Bysykkel modul til Smashing dashboard

bysykkel.rb

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

bysykkel_bikes.html

<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>

bysykkel_bikes.scss

// ----------------------------------------------------------------------------
// 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;
	}
}