Initial Material redesign, partially working, not ready

parent da0a98ff
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++;
"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--;
}
}
} 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.setAttribute("style", "display: block");
}
// Show a DOM hidden element
function show(elem) {
debug.log("Showing", elem.id);
elem.setAttribute("style", "display: block");
}
// 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);
}
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 "";
}
};
function swith(elem, callback) {
if (elem !== undefined) {
debug.log(elem, "selected");
if (callback !== undefined) {
callback();
}
} else {
debug.error(elem, "not selectable");
}
} else {
debug.error(elem, "not selectable");
}
}
/* 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 () {
sede = doc.getElementById("sede");
swith(sede, function () {
sedeValue = query(".value", sede)[0];
sedeTimestamp = query(".timestamp", sede)[0];
sedeModifiedBy = query(".modified_by", sede)[0];
});
temp = doc.getElementById("temp");
swith(temp, function () {
tempValue = query(".value", temp)[0];
tempTrend = query(".trend", temp)[0];
});
temp = doc.getElementById("temp");
swith(temp, function () {
tempValue = query(".value", temp)[0];
tempTrend = query(".trend", temp)[0];
});
msg = query("#last.msg")[0];
swith(msg, function () {
msgUser = query(".user", msg)[0];
msgTimestamp = query(".timestamp", msg)[0];
msgValue = query(".value", msg)[0];
});
msg = query("#last.msg")[0];
swith(msg, function () {
msgUser = query(".user", msg)[0];
msgTimestamp = query(".timestamp", msg)[0];
msgValue = query(".value", msg)[0];
});
title = doc.title;
swith(title);
title = doc.title;
swith(title);
favicon = query('[rel="icon"]')[0];
swith(favicon);
favicon = query('[rel="icon"]')[0];
swith(favicon);
head = doc.head || doc.getElementsByTagName('head')[0];
swith(head);
head = doc.head || doc.getElementsByTagName('head')[0];
swith(head);
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" : "close";
changeIcon(value);
changeFAB(value);
doc.title = capitalize(value) + " " + title;
sedeValue.setAttribute("class", value + " value");
sedeTimestamp.innerHTML = status.timestamp;
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 (first) {
show(msg);
}
msgUser.innerHTML = message.user;
msgTimestamp.innerHTML = message.timestamp;
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.setAttribute("class", 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;
});
);
......@@ -26,3 +26,30 @@ 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();
console.log("sticky? " + (windowScroll + barBottom > mainTop) + " offset " + (windowScroll + barBottom) + " " + mainTop);
setFABsticky(windowScroll + barBottom > mainTop);
});
});
\ No newline at end of file
#poul-logo-top {
width: 65%;
}
.bg-very-dark {
background-color: #212121 !important;
}
.page-header {
height: 400px;
z-index: -1;
}
a {
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 {
position: -webkit-sticky; /* Safari */
position: sticky;
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;
}
.btn.btn-close {
color: #fff;
background-color: #d32f2f;
border-color: #d32f2f;
box-shadow: 0 2px 2px 0 rgba(105, 23, 23, 0.14), 0 3px 1px -2px rgba(105, 23, 23, 0.2), 0 1px 5px 0 rgba(105, 23, 23, 0.12);
}
.btn.btn-close :hover {
color: #fff;
background-color: #d32f2f;
border-color: #691717;
}
.btn-close {
color: #212529;
background-color: #d32f2f;
border-color: #d32f2f;
box-shadow: none;
}
.btn.btn-close :after {
content: 'Sede chiusa';
}
.btn-close :focus,
.btn-close .focus {
box-shadow: none, 0 0 0 0.2rem rgb(105, 23, 23);
}
.btn-close .disabled,
.btn-close :disabled {
color: #212529;
background-color: #d32f2f;
border-color: #d32f2f;
}</