Commit 1688d49d authored by JackV's avatar JackV

Merge branch 'material-design' into 'master'

Material design

See merge request b4/bits-server!1
parents da0a98ff ccb6f7dc
module("browser_handler", function (require, exports) {
"use strict";
var doc = require("document"),
debug = require("debug"),
query = require("peppy").query,
Raphael = require("Raphael"),
sede,
sedeValue,
sedeTimestamp,
sedeModifiedBy,
temp,
tempValue,
tempTrend,
msg,
msgTimestamp,
msgUser,
msgValue,
head,
title,
favicon,
trend,
tempGraph,
lastTimestamp,
tempGraphValuesY = [],
tempGraphTimestampValues = [],
tempGraphHeight = 380,
tempGraphWidth = 380;
/* HELPERS */
function seq(x, y) {
var container = [];
if (x < y) {
while (x < y) {
container[container.length] = x;
x++;
}
} else {
while (x < y) {
container[container.length] = x;
x--;
"use strict";
var doc = require("document"),
debug = require("debug"),
query = require("peppy").query,
Raphael = require("Raphael"),
moment = require("moment"),
sede,
sedeValue,
sedeTimestamp,
sedeModifiedBy,
temp,
tempValue,
tempTrend,
msg,
msgTimestamp,
msgUser,
msgValue,
head,
title,
favicon,
trend,
tempGraph,
lastTimestamp,
tempGraphValuesY = [],
tempGraphTimestampValues = [],
tempGraphHeight = 380,
tempGraphWidth = 380;
/* HELPERS */
function seq(x, y) {
var container = [];
if (x < y) {
while (x < y) {
container[container.length] = x;
x++;
}
} else {
while (x < y) {
container[container.length] = x;
x--;
}
}
return container;
}
return container;
}
// Show a DOM hidden element
function show(elem) {
debug.log("Showing", elem.id);
$(elem).fadeIn();
}
// Show a DOM hidden element
function show(elem) {
debug.log("Showing", elem.id);
elem.setAttribute("style", "display: block");
}
function hide(elem) {
debug.log("Hiding", elem.id);
$(elem).fadeOut();
}
// Return a new string capitalized
function capitalize(string) {
debug.log("Capitilizing string", string);
return string.charAt(0).toUpperCase() + string.slice(1);
}
// Return a new string capitalized
function capitalize(string) {
debug.log("Capitilizing string", string);
return string.charAt(0).toUpperCase() + string.slice(1);
}
// Change the favicon icon of the site.
function changeIcon(status) {
debug.log("Changing favicon", status);
var link = doc.createElement("link");
head.removeChild(favicon);
link.href = "static/" + status + ".ico";
link.rel = "shortcut icon";
head.appendChild(link);
favicon = link;
}
// Change the favicon icon of the site.
function changeIcon(status) {
debug.log("Changing favicon", status);
var link = doc.createElement("link");
head.removeChild(favicon);
link.href = "static/" + status + ".ico";
link.rel = "shortcut icon";
head.appendChild(link);
favicon = link;
}
// the Trend object contains an old state off the value defined
// - newValue
// add a new state to the _oldValue_ state and
// assign the difference between the new state and the
// old value to the _diff_ state.
//
// - toString
// Respond to the toString message, transorm the object in an intelligible form.
// In this case the trend arcs.
function Trend() {
debug.log("New Trend Object instanziated");
this.oldValue = undefined;
this.diff = 0;
}
function changeFAB(status) {
debug.log("Changing floating action button", status);
Trend.prototype.newValue = function (value) {
if (this.oldValue !== undefined) {
this.diff = value - this.oldValue;
debug.log("The difference between the current temp and the old temp is", this.diff);
$("#hq-status-fab button")
.removeClass("btn-gialla")
.removeClass("btn-open")
.removeClass("btn-closed")
.addClass("btn-" + status);
}
debug.log("The value of the oldTemp is now", value);
this.oldValue = value;
return this;
};
Trend.prototype.toString = function () {
if (this.diff === 0) {
return "";
} else if (this.diff > 0) {
return "";
} else {
return "";
// the Trend object contains an old state off the value defined
// - newValue
// add a new state to the _oldValue_ state and
// assign the difference between the new state and the
// old value to the _diff_ state.
//
// - toString
// Respond to the toString message, transorm the object in an intelligible form.
// In this case the trend arcs.
function Trend() {
debug.log("New Trend Object instanziated");
this.oldValue = undefined;
this.diff = 0;
}
};
function swith(elem, callback) {
if (elem !== undefined) {
debug.log(elem, "selected");
if (callback !== undefined) {
callback();
Trend.prototype.newValue = function (value) {
if (this.oldValue !== undefined) {
this.diff = value - this.oldValue;
debug.log("The difference between the current temp and the old temp is", this.diff);
}
} else {
debug.error(elem, "not selectable");
}
}
debug.log("The value of the oldTemp is now", value);
this.oldValue = value;
return this;
};
Trend.prototype.toString = function () {
if (this.diff === 0) {
return "";
} else if (this.diff > 0) {
return "";
} else {
return "";
}
};
/* END HELPERS */
/* END HELPERS */
/* DOM Selecting initialization */
main(function () {
sede = doc.getElementById("sede");
swith(sede, function () {
sedeValue = query(".value", sede)[0];
sedeTimestamp = query(".timestamp", sede)[0];
sedeModifiedBy = query(".modified_by", sede)[0];
});
/* DOM Selecting initialization */
main(function () {
moment.locale('it');
temp = doc.getElementById("temp");
swith(temp, function () {
tempValue = query(".value", temp)[0];
tempTrend = query(".trend", temp)[0];
});
sede = $("#sede")[0];
sedeValue = $("#sede .value")[0];
sedeTimestamp = $("#sede .timestamp")[0];
sedeModifiedBy = $("#sede .modified_by")[0];
msg = query("#last.msg")[0];
swith(msg, function () {
msgUser = query(".user", msg)[0];
msgTimestamp = query(".timestamp", msg)[0];
msgValue = query(".value", msg)[0];
});
temp = $("#temp")[0];
tempValue = $("#temp .value")[0];
tempTrend = $("#temp .trend")[0];
msg = $("#last.msg")[0];
msgUser = $("#last.msg .user")[0];
msgTimestamp = $("#last.msg .timestamp")[0];
msgValue = $("#last.msg .value")[0];
title = doc.title;
swith(title);
title = doc.title;
favicon = query('[rel="icon"]')[0];
favicon = query('[rel="icon"]')[0];
swith(favicon);
head = doc.head || doc.getElementsByTagName('head')[0];
head = doc.head || doc.getElementsByTagName('head')[0];
swith(head);
if ($("#temperature_graph").length > 0)
tempGraph = Raphael("temperature_graph", tempGraphWidth, tempGraphHeight);
tempGraph = Raphael("temperature_graph", tempGraphWidth, tempGraphHeight);
trend = new Trend();
});
trend = new Trend();
});
/* Handler functions definition */
/* Handler functions definition */
// Handle BITS status change.
function statusHandler(status, first) {
debug.log("browserHandler handling status");
if (first) {
show(sede);
// Handle BITS status change.
function statusHandler(status, first) {
debug.log("browserHandler handling status");
if (first) {
show(sede);
}
var value = status.value === "open" ? "open" : "closed";
changeIcon(value);
changeFAB(value);
doc.title = capitalize(value) + " " + title;
sedeValue.setAttribute("class", value + " value");
sedeTimestamp.innerHTML = moment(status.timestamp).startOf('hour').fromNow();
sedeModifiedBy.innerHTML = status.modifiedby;
}
var value = status.value === "open" ? "open" : "close";
changeIcon(value);
doc.title = capitalize(value) + " " + title;
sedeValue.setAttribute("class", value + " value");
sedeTimestamp.innerHTML = status.timestamp;
sedeModifiedBy.innerHTML = status.modifiedby;
}
// Handle MSGs arrival
function msgHandler(message, first) {
debug.log("Displaying message");
if(first) {
show(msg);
// Handle MSGs arrival
function msgHandler(message, first) {
debug.log("Displaying message");
if (message.value.length > 0) {
show(msg);
} else if (message.value.length === 0) {
hide(msg);
}
msgUser.innerHTML = message.user;
msgTimestamp.innerHTML = moment(message.timestamp).startOf('hour').fromNow();
msgValue.innerHTML = message.value;
}
msgUser.innerHTML = message.user;
msgTimestamp.innerHTML = message.timestamp;
msgValue.innerHTML = message.value;
}
// Handle tempInt arrival
function tempIntHandler(tempInt, first) {
debug.log("browserHandler handling tempint");
// Handle tempInt arrival
function tempIntHandler(tempInt, first) {
debug.log("browserHandler handling tempint");
if (first) {
show(temp);
}
tempValue.innerHTML = tempInt.value.toPrecision() + "°C";
if (first) {
show(temp);
}
tempValue.innerHTML = tempInt.value.toPrecision() + "°C";
if (lastTimestamp !== tempInt.timestamp) {
tempTrend.innerHTML = trend.newValue(tempInt.value);
if (!first) {
//TODO tempGraph.addTemp(tempInt);
if (lastTimestamp !== tempInt.timestamp) {
tempTrend.innerHTML = trend.newValue(tempInt.value);
if (!first) {
//TODO tempGraph.addTemp(tempInt);
}
}
$(temp)
.removeClass("high")
.removeClass("low")
.addClass(tempInt.value > 20 ? "high" : "low");
}
temp.setAttribute("class", tempInt.value > 20 ? "high" : "low");
}
function tempIntHistHandler(tempIntHist, first) {
debug.log("browserHandler handling tempIntHist");
var cordX = 0,
cordY = 0,
reversedHistory = tempIntHist.reverse();
function tempIntHistHandler(tempIntHist, first) {
debug.log("browserHandler handling tempIntHist");
var cordX = 0,
cordY = 0,
reversedHistory = tempIntHist.reverse();
for (var i = 0; i < tempIntHist.length; i++) {
tempGraphValuesY[tempGraphValuesY.length] = tempIntHist[i].value;
tempGraphTimestampValues[tempGraphTimestampValues.length] = tempIntHist[i].timestamp;
for (var i = 0; i < tempIntHist.length; i++) {
tempGraphValuesY[tempGraphValuesY.length] = tempIntHist[i].value;
tempGraphTimestampValues[tempGraphTimestampValues.length] = tempIntHist[i].timestamp;
}
tempGraph.linechart(
cordX, cordY,
tempGraphHeight, tempGraphWidth,
seq(0, tempGraphValuesY.length), tempGraphValuesY,
{
shade: true,
colors: ["#0F0"]
}
);
}
tempGraph.linechart(
cordX, cordY,
tempGraphHeight, tempGraphWidth,
seq(0, tempGraphValuesY.length), tempGraphValuesY,
{
shade: true,
colors: ["#0F0"]
}
);
// Exports only the browserHandler object in the global scope
exports.status = statusHandler;
exports.msg = msgHandler;
exports.tempInt = tempIntHandler;
exports.tempIntHist = tempIntHistHandler;
}
// Exports only the browserHandler object in the global scope
exports.status = statusHandler;
exports.msg = msgHandler;
exports.tempInt = tempIntHandler;
exports.tempIntHist = tempIntHistHandler;
});
);
......@@ -7,8 +7,9 @@ main(function (require) {
location = require("location"),
query = require("peppy").query,
debug = require("debug"),
protocol = /https/.test(location.protocol)? "wss": "ws",
protocol = /https/.test(location.protocol) ? "wss" : "ws",
ws = new WebSocket(protocol + "://" + location.hostname + ":" + location.port + "/ws"),
// ws = new WebSocket("wss://bits.poul.org/ws"),
handler = new Handler(browserHandler);
var debugMeta = query("meta[name='mode']")[0];
......@@ -26,3 +27,29 @@ main(function (require) {
debug.error("WS Error", event);
};
});
let _sticky = false;
const setFABsticky = function (sticky) {
if (sticky === _sticky)
return;
if (sticky)
$("#hq-status-fab").addClass("stick-to-bar");
else
$("#hq-status-fab").removeClass("stick-to-bar");
_sticky = sticky;
};
$(document).ready(function () {
const navbar = $("nav.navbar");
const mainTop = $("#hq-status-fab").parent().offset().top;
$(window).scroll(function () {
const windowScroll = $(this).scrollTop();
const barBottom = navbar.outerHeight();
setFABsticky(windowScroll + barBottom > mainTop);
});
});
\ No newline at end of file
This diff is collapsed.
#poul-logo-top {
width: 65%;
}
.bg-very-dark {
background-color: #010101 !important;
}
.bg-a-bit-less-dark {
background-color: #1b1b1b !important;
}
.bg-kinda-dark {
background-color: #232323 !important;
}
.bg-black {
background-color: black !important;
}
.page-header {
height: 400px;
z-index: -1;
}
a {
color: #ffc500;
}
a:hover {
color: #ac8300;
}
strong {
font-weight: bold;
color: #ffc500;
}
footer ul li a {
color: #ffc500;
}
#hq-status-fab {
z-index: 2000;
text-align: center;
position: absolute;
top: -33px;
width: 100%;
}
#hq-status-fab button {
top: 0;
font-weight: bold;
}
.no-z-index {
z-index: unset !important;
}
.btn.btn-gialla {
color: #fff;
background-color: #ffc500;
border-color: #ffc500;
box-shadow: 0 2px 2px 0 rgba(255, 152, 0, 0.14), 0 3px 1px -2px rgba(255, 152, 0, 0.2), 0 1px 5px 0 rgba(255, 152, 0, 0.12);
}
.btn.btn-gialla:hover {
color: #fff;
background-color: #ffc500;
border-color: #7f6200;
}
.btn-gialla {
color: #212529;
background-color: #ffc500;
border-color: #ffc500;
box-shadow: none;
}
.btn.btn-gialla:after {
content: 'Sede gialla';
}
.btn-gialla:focus,
.btn-gialla.focus {
box-shadow: none, 0 0 0 0.2rem rgba(127, 98, 0, 1);
}
.btn-gialla.disabled,
.btn-gialla:disabled {
color: #212529;
background-color: #ffc500;
border-color: #ffc500;
}
.btn.btn-open {
color: #fff;
background-color: #387002;
border-color: #387002;
box-shadow: 0 2px 2px 0 rgba(28, 56, 1, 0.14), 0 3px 1px -2px rgba(28, 56, 1, 0.2), 0 1px 5px 0 rgba(28, 56, 1, 0.12);
}
.btn.btn-open:hover {
color: #fff;
background-color: #387002;
border-color: #1c3801;
}
.btn.btn-open:after {
content: 'Sede aperta';
}
.btn-open {
color: #212529;
background-color: #387002;
border-color: #387002;
box-shadow: none;
}
.btn-open:focus,
.btn-open.focus {
box-shadow: none, 0 0 0 0.2rem rgb(28, 56, 1);
}
.btn-open.disabled,
.btn-open:disabled {
color: #212529;
background-color: #387002;
border-color: #1c3801;
}