Merge branch 'material-design' into 'master'

Material design

See merge request b4/bits-server!1

bitsd/server/assets/browser_handler.js

 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;
-});
+);
 

bitsd/server/assets/index_main.js

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

bitsd/server/assets/material-custom.css

+#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;
+}
+
+