Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Bysykkel modul til Smashing dashboard
require "httparty"
# Bysykkel ID + navn. Se UIP for liste: https://oslobysykkel.no/apne-data
station01 = '478' # Jernbanetoget
station02 = '424' # Birkelunden
friendly_name_01 = "Jernbanetorget"
friendly_name_02 = "Birkelunden"
obs_identifier = "" # VIKTIG: Bytt med din egen identifier
# :first_in sets how long it takes before the job is first run. Here: 10 minutes
SCHEDULER.every '10m', :first_in => 0 do |job|
response = HTTParty.get("https://gbfs.urbansharing.com/oslobysykkel.no/station_status.json", {
headers: {"Client-Identifier" => "#{obs_identifier}"},
})
relResponse01 = response["data"]["stations"].find {|r| r['station_id']=="#{station01}"}
relResponse02 = response["data"]["stations"].find {|r| r['station_id']=="#{station02}"}
send_event('bysykkel01', {obs_friendly_name: friendly_name_01, obs_bikes: relResponse01["num_bikes_available"], obs_locks: relResponse01["num_docks_available"], obs_resp_code: response.code})
send_event('bysykkel02', {obs_friendly_name: friendly_name_02, obs_bikes: relResponse02["num_bikes_available"], obs_locks: relResponse02["num_docks_available"], obs_resp_code: response.code})
end
<i class="fa fa-bicycle icon-background"></i> <!-- Bruker fontawesome for ikon -->
<h1 class="title" data-bind="obs_friendly_name"></h1>
<h2><span class="bikes" data-bind="obs_bikes"></span></h2>
<p class="updated-at"> <span data-bind="updatedAtMessage"></span> | <span data-bind="obs_resp_code"></span></p>
// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color: rgb(30, 90, 205);
$full-color: rgba(255, 255, 255, 1);
$faded-color: rgba(255, 255, 255, 0.3);
$dim-color: rgba(255, 255, 255, 0.5);
$title-color: rgba(255, 255, 255, 0.7);
// ----------------------------------------------------------------------------
// Widget-forecast styles
// ----------------------------------------------------------------------------
.widget-bysykkel-bikes {
background-color: $background-color;
display: flex;
color: $full-color;
.title {
color: $title-color;
}
.bikes {
color: $full-color
}
.locks {
color: $dim-color;
font-size: 0.5em;
}
.updated-at {
color: $faded-color;
}
.icon {
max-height: 50px;
opacity: 0.3
}
.img-background {
pointer-events: none;
width: 70%!important;
height: 70%;
left: 15%;
bottom: 15%;
position: absolute;
opacity: 0.07;
text-align: center;
margin-top: 82px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment