Skip to content

Instantly share code, notes, and snippets.

@amochtar
Last active November 21, 2016 14:14
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save amochtar/daf5ef3e437174bd6695 to your computer and use it in GitHub Desktop.
Save amochtar/daf5ef3e437174bd6695 to your computer and use it in GitHub Desktop.
Xebia Essentials Dashing widget

Description

A Dashing widget to display a random Xebia Essentials card. Refreshes every 15 minutes.

Dependencies

The following dependencies are required. Please add them to your dashing gemfile.

require 'net/http'
require 'json'

Run bundle install

Installation

Manually

Place the xebia_essentials.html, xebia_essentials.scss and xebia_essentials.coffee in the /widget/xebia_essentials directory and xebia_essentials.rb in the /jobs directory.

Automatically

dashing install daf5ef3e437174bd6695

Usage

Add the following widget HTML snippet to your dashboard erb file.

<li data-row="1" data-col="1" data-sizex="2" data-sizey="1">
    <div data-id="view1" data-view="XebiaEssentials"></div>
</li>

Add a data-hideqrcode="true" attribute to the div to hide the QR Code.

Preview

See attached example card.

License

The widget is provided unter the Apache License, Version 2.0. You may obtain a copy of the License at (http://www.apache.org/licenses/LICENSE-2.0)

class Dashing.XebiaEssentials extends Dashing.Widget
ready: ->
# This is fired when the widget is done being rendered
onData: (data) ->
# Handle incoming data
# You can access the html node of this widget with `@node`
# Example: $(@node).fadeOut().fadeIn() will make the node flash each time data comes in.
<div class="card" data-bind-style="card.style">
<div class="category" data-bind="card.category"></div>
<h1 class="title" data-bind="card.title | trim"></h1>
<div class="url"><a data-bind="card.url" data-bind-href="card.url"></a></div>
<a data-bind-href="card.url" data-removeif="hideqrcode">
<img class="qrcode" data-bind-src="'https://api.qrserver.com/v1/create-qr-code/?size=100x100&data=' | append card.url">
</a>
</div>
require 'net/http'
require 'json'
domain = 'essentials.xebia.com'
http = Net::HTTP.new(domain)
response = http.request(Net::HTTP::Get.new("/api.json"))
json = JSON.parse(response.body)
SCHEDULER.every '15m', first_in: 0 do |job|
card = json['cards'].sample
category = json['categories'].find{|category| category['name'] == card['category']}
card['style'] = 'background-color: ' + category['colour']
card['url'] = 'http://' + domain + '/' + card['name']
send_event('xebia_essentials', card: card)
end
.widget-xebia-essentials {
position: relative;
height: 100%;
width: 100%;
padding: 0 !important;
.card {
position: absolute;
border: 15px solid white;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
.category {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
padding-top: 5px;
margin: 0 10px;
text-align: left;
font-size: 8pt;
border-bottom: 1px solid white;
text-transform: capitalize;
}
.url {
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
padding-bottom: 5px;
margin: 0 10px;
text-align: left;
font-size: 8pt;
border-top: 1px solid white;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAMCAYAAAAK/x/DAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAewgAAHsIBbtB1PgAABHBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICAgICAgICAgIHhtbG5zOmV4aWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vZXhpZi8xLjAvIgogICAgICAgICAgICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iCiAgICAgICAgICAgIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyI+CiAgICAgICAgIDx0aWZmOlJlc29sdXRpb25Vbml0PjI8L3RpZmY6UmVzb2x1dGlvblVuaXQ+CiAgICAgICAgIDx0aWZmOkNvbXByZXNzaW9uPjU8L3RpZmY6Q29tcHJlc3Npb24+CiAgICAgICAgIDx0aWZmOlhSZXNvbHV0aW9uPjIwMDwvdGlmZjpYUmVzb2x1dGlvbj4KICAgICAgICAgPHRpZmY6T3JpZW50YXRpb24+MTwvdGlmZjpPcmllbnRhdGlvbj4KICAgICAgICAgPHRpZmY6WVJlc29sdXRpb24+MjAwPC90aWZmOllSZXNvbHV0aW9uPgogICAgICAgICA8dGlmZjpQaG90b21ldHJpY0ludGVycHJldGF0aW9uPjI8L3RpZmY6UGhvdG9tZXRyaWNJbnRlcnByZXRhdGlvbj4KICAgICAgICAgPGV4aWY6UGl4ZWxYRGltZW5zaW9uPjM2PC9leGlmOlBpeGVsWERpbWVuc2lvbj4KICAgICAgICAgPGV4aWY6Q29sb3JTcGFjZT4xPC9leGlmOkNvbG9yU3BhY2U+CiAgICAgICAgIDxleGlmOlBpeGVsWURpbWVuc2lvbj4xMjwvZXhpZjpQaXhlbFlEaW1lbnNpb24+CiAgICAgICAgIDxkYzpzdWJqZWN0PgogICAgICAgICAgICA8cmRmOlNlcS8+CiAgICAgICAgIDwvZGM6c3ViamVjdD4KICAgICAgICAgPHhtcDpNb2RpZnlEYXRlPjIwMTQ6MTE6MjIgMTc6MTE6NTk8L3htcDpNb2RpZnlEYXRlPgogICAgICAgICA8eG1wOkNyZWF0b3JUb29sPlBpeGVsbWF0b3IgMy4zPC94bXA6Q3JlYXRvclRvb2w+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgonbKo8AAACUUlEQVQ4Ea3UXYiMURjA8Z39qkmbtXZdWV8XkpJbXPgoF/IVtZKNTa2Ior1RarJKiig3ikghckFSxF5INrVtvku4wQXykbLLElbs+P9nztle7+xc2ad+c55zzjPnfWbed6Yin88vw2/E2FJRJihoxttYyHiqTOn/LXPwJgyGC31lbE2fyNoU3A81DhdRl6xjPh37MD65bm4t9mN2em/EOYWt+A7D5tpjIbkXeoIYp+NecmRzeSiYnFw3Z70BVzA/vVd2TvFqDMDwNm7FLDxHjKMk9TiAp7iHzeGiS8j9MCfwEHewHVUYizOYE2pbyLvxGAdxEmtKmmPRQz/BsKm+QlZ8Oczg4ZfwAu3YBT/EDiyE8RnWnnNC5DAOnrcKSzGE67CZdzA6SxoK3c9j80OhpPjyh2Fv2PMbM66hE3vwEq/gN2y0xIPJj+EjvO02bkNd6EnUzGVug7nquJgaa5hXjrDmUjasDzI2Io+r+IL4njfkMcx9Ty2stWYM+hHjPclQnPwz0uVK+JUbv+Cni3GEJAsf8MuYiUW4hbaQM+R7sRjr0YfzaMQPrMA2GLvh385NJ0Qu3cxaFr8VtorN+IzMwLOw5nAc3rYeeAt0AT4jC/AaD+Av1gZsvAkN8LmzgWocQj/8EVjvNTqGG2KyET9heNCGuEk+DY8Q4yxJHaaiOVFXw7weXtC9SYm9SuY27a0rBLmNenYtPC/r/4OH7EQMv6HhhzLx5omseyti3CBpivujNWY41AezDVXwobubyWRuM5YEtRNYXAcfenVT28s4avEXXhBd9qxfl4gAAAAASUVORK5CYII=");
background-repeat: no-repeat;
background-position: right 3px;
}
.title {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
color: white;
margin: 25px 10px;
font-family: 'Open Sans';
font-weight: 600;
font-size: 32pt;
text-align: left;
overflow: hidden;
}
.qrcode {
position: absolute;
bottom: 0px;
right: 0px;
margin: 30px 15px;
border: 10px solid white;
float: right;
}
}
@budgester
Copy link

HTML data-id should be xebia_essential rather than view1

<li data-row="1" data-col="1" data-sizex="2" data-sizey="1">
  <div data-id="xebia_essentials" data-view="XebiaEssentials"></div>
</li>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment