Includes (js, css to public)

public/Elementum/scss/elements/_buttons.scss

@@ -0,0 +1,69 @@
+.button{
+	background-color: $secondary-color;
+	border: 0;
+	border-radius: $control-border-radius;
+	color: $base-font-color;
+	padding: $control-padding-y $control-padding-x;
+	transition: background-color .15s;
+	height: 2.5rem;
+	display: inline-block;
+	line-height: 1.5;
+	font-size: 1rem;
+	font-weight: 500;
+	cursor: pointer;
+	text-decoration: none;
+
+	&:hover{
+		color: $base-font-color;
+		background-color: $secondary-color-dark;
+	}
+	&:active{
+		background-color: $secondary-color-dark;
+	}
+	&:focus{
+		box-shadow: 0 0 3px $control-focus-color;
+    }
+}
+
+.button.is-small{
+	padding: $control-padding-y $control-padding-x/1.5;
+	height: 2rem;
+	font-size: .875rem;
+}
+
+.button.is-large{
+	height: 3rem;
+	font-size: 1.25rem;
+}
+
+.buttons .button{
+	margin-right: .25rem;
+	margin-bottom: .25rem;
+}
+
+.button.is-primary{
+	background-color: $primary-color;
+	color: white;
+
+	&:hover{
+		color: white;
+		background-color: $primary-color-dark;
+	}
+	&:active{
+		background-color: $primary-color-dark;
+	}
+}
+
+.button.is-danger{
+	background-color: map-get($red-colors , '100');
+	color: map-get($red-colors , '500');
+
+	&:hover{
+		background-color: map-get($red-colors , '200');
+		color: map-get($red-colors , '600');
+	}
+	&:active{
+		background-color: map-get($red-colors , '200');
+		color: map-get($red-colors , '600');
+	}
+}

public/css/loading.css

@@ -0,0 +1,19 @@
+.loader {
+    border: 16px solid #f3f3f3;
+    border-radius: 50%;
+    border-top: 16px solid rgb(101, 30, 122);;
+    width: 100%;
+    height: 100%;
+    -webkit-animation: spin 2s linear infinite; /* Safari */
+    animation: spin 2s linear infinite;
+}
+
+@-webkit-keyframes spin {
+    0% { -webkit-transform: rotate(0deg); }
+    100% { -webkit-transform: rotate(360deg); }
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}

public/css/modal.css

@@ -0,0 +1,28 @@
+.modal-container-hiden {
+    display: none !important;
+}
+
+#modal:target {
+    display: flex;
+}
+
+#modal2:target {
+    display: flex;
+}
+
+#modal3:target {
+    display: flex;
+}
+
+#modal4:target {
+    display: flex;
+}
+
+
+@media (max-width: 767px){    
+    .modal>.overflow {
+        height: calc(100% - 44px);
+        overflow-y: scroll;
+        overflow-x: hidden;
+    }
+}

public/css/override.css

@@ -0,0 +1,21 @@
+table.table td, table.table th {
+  border: 2px solid #121a2b;
+  padding: 8px;
+}
+
+/*tr:nth-child(even){background-color: #f2f2f2;}*/
+
+table.table tr:hover {background-color: #121a2b;}
+
+table.table th {
+  padding-top: 12px;
+  padding-bottom: 12px;
+  text-align: left;
+  background-color: #121a2b;
+  color: white;
+}
+
+button:disabled,
+button[disabled] {
+  opacity: .4;
+}

public/css/pre.css

@@ -0,0 +1,17 @@
+pre{
+    border-radius: 3px;
+    border: 0px solid transparent;
+    color: #d4def7;
+    padding: 0.5em 0.8em;
+    line-height: 1.5;
+    background: #121a2b;
+    width: 100%;
+    display: block;
+}
+
+.rectangle-content{
+    width: 100%;
+    background: linear-gradient(135deg, rgba(116, 34, 189, 0.5), rgba(185, 19, 121, 0.5));
+    border-radius: 8px;
+    padding: .25rem !important;
+}

public/js/automation.js

@@ -0,0 +1,35 @@
+function restartAutomation(automationId){
+    console.log("restartingAutomation" + automationId);
+    $.ajax({
+        url: 'ajax',
+        type: 'POST',
+        data: {
+            "automation_id" : automationId,
+            "action": "restart"
+        },
+        success: function(data){
+            console.log(data);
+        },
+        error: function (request, status, error) {
+            console.log("ERROR ", request, error);
+        }
+    });
+}
+
+function toggleAutomation(automationId){
+    console.log("togglingAutomation" + automationId);
+    $.ajax({
+        url: 'ajax',
+        type: 'POST',
+        data: {
+            "automation_id" : automationId,
+            "action": "deactive"
+        },
+        success: function(data){
+            $('#automation-'+automationId).toggleClass("is-inactive");
+        },
+        error: function (request, status, error) {
+            console.log("ERROR ", request, error);
+        }
+    });
+}

public/js/jquery.redirect.js

@@ -0,0 +1,182 @@
+/*
+jQuery Redirect v1.1.3
+
+Copyright (c) 2013-2018 Miguel Galante
+Copyright (c) 2011-2013 Nemanja Avramovic, www.avramovic.info
+
+Licensed under CC BY-SA 4.0 License: http://creativecommons.org/licenses/by-sa/4.0/
+
+This means everyone is allowed to:
+
+Share - copy and redistribute the material in any medium or format
+Adapt - remix, transform, and build upon the material for any purpose, even commercially.
+Under following conditions:
+
+Attribution - You must give appropriate credit, provide a link to the license, and indicate if changes were made. You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you or your use.
+ShareAlike - If you remix, transform, or build upon the material, you must distribute your contributions under the same license as the original.
+*/
+;(function ($) {
+  'use strict';
+
+  //Defaults configuration
+  var defaults = {
+    url: null,
+    values: null,
+    method: "POST",
+    target: null,
+    traditional: false,
+    redirectTop: false
+  };
+
+  /**
+  * jQuery Redirect
+  * @param {string} url - Url of the redirection
+  * @param {Object} values - (optional) An object with the data to send. If not present will look for values as QueryString in the target url.
+  * @param {string} method - (optional) The HTTP verb can be GET or POST (defaults to POST)
+  * @param {string} target - (optional) The target of the form. "_blank" will open the url in a new window.
+  * @param {boolean} traditional - (optional) This provides the same function as jquery's ajax function. The brackets are omitted on the field name if its an array.  This allows arrays to work with MVC.net among others.
+  * @param {boolean} redirectTop - (optional) If its called from a iframe, force to navigate the top window. 
+  *//**
+  * jQuery Redirect
+  * @param {string} opts - Options object
+  * @param {string} opts.url - Url of the redirection
+  * @param {Object} opts.values - (optional) An object with the data to send. If not present will look for values as QueryString in the target url.
+  * @param {string} opts.method - (optional) The HTTP verb can be GET or POST (defaults to POST)
+  * @param {string} opts.target - (optional) The target of the form. "_blank" will open the url in a new window.
+  * @param {boolean} opts.traditional - (optional) This provides the same function as jquery's ajax function. The brackets are omitted on the field name if its an array.  This allows arrays to work with MVC.net among others.
+  * @param {boolean} opts.redirectTop - (optional) If its called from a iframe, force to navigate the top window. 
+  */
+  $.redirect = function (url, values, method, target, traditional, redirectTop) {
+    var opts = url;
+    if (typeof url !== "object") {
+      var opts = {
+        url: url,
+        values: values,
+        method: method,
+        target: target,
+        traditional: traditional,
+        redirectTop: redirectTop
+      };
+    }
+
+    var config = $.extend({}, defaults, opts);
+    var generatedForm = $.redirect.getForm(config.url, config.values, config.method, config.target, config.traditional);
+    $('body', config.redirectTop ? window.top.document : undefined).append(generatedForm.form);
+    generatedForm.submit();
+    generatedForm.form.remove();
+  };
+
+  $.redirect.getForm = function (url, values, method, target, traditional) {
+    method = (method && ["GET", "POST", "PUT", "DELETE"].indexOf(method.toUpperCase()) !== -1) ? method.toUpperCase() : 'POST';
+
+    url = url.split("#");
+    var hash = url[1] ? ("#" + url[1]) : "";
+    url = url[0];
+
+    if (!values) {
+      var obj = $.parseUrl(url);
+      url = obj.url;
+      values = obj.params;
+    }
+
+    values = removeNulls(values);
+
+    var form = $('<form>')
+      .attr("method", method)
+      .attr("action", url + hash);
+
+
+    if (target) {
+      form.attr("target", target);
+    }
+
+    var submit = form[0].submit;
+    iterateValues(values, [], form, null, traditional);
+
+    return { form: form, submit: function () { submit.call(form[0]); } };
+  }
+
+  //Utility Functions
+	/**
+	 * Url and QueryString Parser.
+	 * @param {string} url - a Url to parse.
+	 * @returns {object} an object with the parsed url with the following structure {url: URL, params:{ KEY: VALUE }}
+	 */
+  $.parseUrl = function (url) {
+
+    if (url.indexOf('?') === -1) {
+      return {
+        url: url,
+        params: {}
+      };
+    }
+    var parts = url.split('?'),
+      query_string = parts[1],
+      elems = query_string.split('&');
+    url = parts[0];
+
+    var i, pair, obj = {};
+    for (i = 0; i < elems.length; i += 1) {
+      pair = elems[i].split('=');
+      obj[pair[0]] = pair[1];
+    }
+
+    return {
+      url: url,
+      params: obj
+    };
+  };
+
+  //Private Functions
+  var getInput = function (name, value, parent, array, traditional) {
+    var parentString;
+    if (parent.length > 0) {
+      parentString = parent[0];
+      var i;
+      for (i = 1; i < parent.length; i += 1) {
+        parentString += "[" + parent[i] + "]";
+      }
+
+      if (array) {
+        if (traditional)
+          name = parentString;
+        else
+          name = parentString + "[" + name + "]";
+      } else {
+        name = parentString + "[" + name + "]";
+      }
+    }
+
+    return $("<input>").attr("type", "hidden")
+      .attr("name", name)
+      .attr("value", value);
+  };
+
+  var iterateValues = function (values, parent, form, isArray, traditional) {
+    var i, iterateParent = [];
+    Object.keys(values).forEach(function (i) {
+      if (typeof values[i] === "object") {
+        iterateParent = parent.slice();
+        iterateParent.push(i);
+        iterateValues(values[i], iterateParent, form, Array.isArray(values[i]), traditional);
+      } else {
+        form.append(getInput(i, values[i], parent, isArray, traditional));
+      }
+    });
+  };
+
+  var removeNulls = function (values) {
+    var propNames = Object.getOwnPropertyNames(values);
+    for (var i = 0; i < propNames.length; i++) {
+      var propName = propNames[i];
+      if (values[propName] === null || values[propName] === undefined) {
+        delete values[propName];
+      } else if (typeof values[propName] === 'object') {
+        values[propName] = removeNulls(values[propName]);
+      } else if (values[propName].length < 1) {
+        delete values[propName];
+      }
+    }
+    return values;
+  };
+}(window.jQuery || window.Zepto || window.jqlite));

public/js/post.js

@@ -0,0 +1,74 @@
+function ajaxPostSimple(path, params, reload = false) {
+    navigator.vibrate([200]);
+    $.ajax({
+        url: path,
+        type: 'POST',
+        data: params,
+        success: function(msg){
+            console.log("message");
+            console.log(msg);
+            if (reload){
+                location.reload();
+            }
+        },
+        error: function (request, status, error) {
+            console.log('0');
+        }
+    });
+    return false;
+}
+
+function ajaxPost(path, params, self, reload = false) {
+    navigator.vibrate([200]);
+    $.ajax({
+        url: path,
+        type: 'POST',
+        data: params,
+        success: function(msg){
+            if (msg != '' && msg != 1){        
+                $(self).find('.content').addClass( "loader" );
+                $(self).find('.row').hide();
+                waitForExecution(params, self, msg);
+            } else {
+                
+            }
+            console.log(msg);
+            if (reload){
+                location.reload();
+            }
+        },
+        error: function (request, status, error) {
+            console.log('0');
+        }
+    });
+    return false;
+}
+
+function waitForExecution(params, elements, msg_state){
+    console.log('Waiting FOR Executed');
+    var interval = setInterval(
+        function(){
+            $.ajax({
+                url: 'ajax',
+                type: 'POST',
+                data: { 
+                    action:'executed',
+                    subDevice_id : params['subDevice_id']
+                },
+                success: function(msg){
+                    if (msg == 1){
+                        $(elements).find('.text-right').text(msg_state);
+                        $(elements).find('.content').removeClass( "loader" );
+                        $(elements).find('.row').show();
+                        console.log('Executed');
+                        clearInterval(interval);
+                    }
+                    console.log('Waiting FOR Executed');
+                    console.log(msg);
+                },
+                error: function (request, status, error) {
+                    console.log('0');
+                }
+            });
+        }, 1000);
+    }

public/js/script.js

@@ -0,0 +1,299 @@
+var pending = false;
+
+var firebaseConfig = {
+    apiKey: "AIzaSyBFZjXvnCMpGurSWEuVgHkE9jD9jxGJhx8",
+    authDomain: "test-push-notf.firebaseapp.com",
+    databaseURL: "https://test-push-notf.firebaseio.com",
+    projectId: "test-push-notf",
+    storageBucket: "",
+    messagingSenderId: "93473765978",
+    appId: "1:93473765978:web:5d959a487fe5382480f663"
+};
+firebase.initializeApp(firebaseConfig);
+
+const messaging = firebase.messaging();
+if ('serviceWorker' in navigator) {
+    window.addEventListener('load', () => {
+        navigator.serviceWorker.register('serviceWorker.js')
+        .then(registration => {
+            console.log('Service Worker is registered', registration);
+            
+            messaging.useServiceWorker(registration);
+            messaging.usePublicVapidKey('BDYQ7X7J7PX0aOFNqB-CivQeqLq4-SqCxQJlDfJ6yNnQeYRoK8H2KOqxHRh47fLrbUhC8O3tve67MqJAIqox7Ng');
+            messaging.requestPermission().then(function () {
+                console.log("Notification permission granted.");
+                return messaging.getToken()
+            })
+            .then(function (token) {
+                console.log("token is : " + token);
+                $.ajax({
+                    url: 'ajax',
+                    type: 'POST',
+                    data: {
+                        "notification": 'X',
+                        "action": 'subscribe',
+                        "token": token
+                    },
+                    success: function (data) {
+                        console.log('saved', data);
+                    },
+                    error: function (request, status, error) {
+                        console.log("ERROR ", request, error);
+                    }
+                });
+            })
+            .catch(function (err) {
+                console.log("Unable to get permission to notify.", err);
+            });
+        })
+        .catch(err => {
+            console.error('Registration failed:', err);
+        });
+    });
+}
+
+
+$('select[name="atSelector"]').change(function (e) {
+    console.log($(this).val());
+    if ($(this).val() == 'time') {
+        
+        $('input[name="atTime"]').prop("disabled", false);
+        
+        $('select[name="atDeviceValueInt"]').prop("disabled", true);
+        $('input[name="atDeviceValue"]').prop("disabled", true);
+    } else if ($(this).val() == 'atDeviceValue') {
+        
+        $('select[name="atDeviceValue"]').prop("disabled", false);
+        $('input[name="atDeviceValueInt"]').prop("disabled", false);
+        
+        $('input[name="atTime"]').prop("disabled", true);
+    }
+});
+
+var pressTimer;
+var touch = 0;
+var touchSubId = "";
+$("div.square-content").on('touchend', function (e) {
+    clearTimeout(pressTimer);
+});
+
+$("div.square-content").on('touchstart', function (eTarget) {
+    navigator.vibrate([500]);
+    var id = '';
+    
+    var windowLoc = $(location).attr('pathname');
+    windowLoc = windowLoc.substring(windowLoc.lastIndexOf("/"));
+    console.log(windowLoc);
+    if (windowLoc == "/") {
+        id = $(this).attr('id').replace('device-', '');
+    } else if (windowLoc == "/scene") {
+        id = $(this).attr('id').replace('scene-', '');
+    } else if (windowLoc == "/automation") {
+        id = $(this).attr('id').replace('automation-', '');
+    }
+    
+    var subId = $(this).attr('data-sub-device-id');
+    
+    touch++;
+    if (touch == 2 && touchSubId == subId) {
+        console.log("Detail");
+        if (windowLoc == "/") {
+            $("#modal-detail-" + subId).removeClass('modal-container-hiden').show();
+            ajaxChart(subId);
+        } else if (windowLoc == "/scene") {
+            
+        } else if (windowLoc == "/automation") {
+        }
+        touch = 0;
+        touchSubId = "";
+        return;
+    }
+    touchSubId = subId;
+    
+    pressTimer = window.setTimeout(function (e) {
+        console.log("Setting");
+        $("#modal-setting-" + id).removeClass('modal-container-hiden').show();
+        touch = 0;
+    }, 500);
+});
+
+$("div.square-content").mousedown(function (e) {
+    if (event.which == 3) {
+        var windowLoc = $(location).attr('pathname');
+        windowLoc = windowLoc.substring(windowLoc.lastIndexOf("/"));
+        console.log(windowLoc);
+        var id = null;
+        if (windowLoc == "/") {
+            id = $(this).attr('id').replace('device-', '');
+        } else if (windowLoc == "/scene") {
+            id = $(this).attr('id').replace('scene-', '');
+        } else if (windowLoc == "/automation") {
+            id = $(this).attr('id').replace('automation-', '');
+        }
+        $("#modal-setting-" + id).removeClass('modal-container-hiden').show();
+        console.log("Setting");
+        console.log("modal" + id);
+    }
+});
+
+$(".close").on('click', function (e) {
+    var a = $(this).parent().parent();
+    a.hide();
+});
+
+$(this).bind("contextmenu", function (e) {
+    e.preventDefault();
+});
+
+$("div.square-content").on('dblclick', function (eTarget) {
+    windowLoc = windowLoc.substring(windowLoc.lastIndexOf("/"));
+    if (windowLoc == "/") {
+        console.log("Detail");
+        var subId = $(this).attr('data-sub-device-id');
+        ajaxChart(subId);
+        $("#modal-detail-" + subId).removeClass('modal-container-hiden').show();
+    }
+});
+
+$("input#sleepTime").change(function () {
+    console.log("Input text changed!");
+});
+
+var element = $('div.delete');
+element.hide();
+$("a#remove").on('click', function (e) {
+    console.log("Show/Hide Button");
+    var element = $('div.delete');
+    element.toggle();
+});
+
+function ajaxChart(id, period = 'day', group = 'hour') {
+    $.ajax({
+        url: 'ajax',
+        type: 'POST',
+        dataType: 'json',
+        data: {
+            "subDevice_id": id,
+            "action": 'chart',
+            "period": period,
+            "group": group
+        },
+        success: function (data) {
+            console.log('ID: ', id, 'DATA: ', data);
+            var ctx = document.getElementById('canvas-' + id).getContext('2d');
+            var myChart = new Chart(ctx, data);
+        },
+        error: function (request, status, error) {
+            console.log("ERROR ajaxChart():", request, error);
+        }
+    });
+}
+
+//select room on load
+var windowLoc = $(location).attr('pathname');
+windowLoc = windowLoc.substring(windowLoc.lastIndexOf("/"));
+console.log();
+if (windowLoc == "/") {
+    
+    var selectRoomId = localStorage.getItem("selectedRoomId");
+    
+    if (selectRoomId == null) {
+        selectRoomId = 'all';
+    }
+    
+    
+    console.log('Saved Selected Room ID ' + selectRoomId);
+    $('[name="room"]').val(selectRoomId);
+    $('.device-button').each(function () {
+        if (selectRoomId != 'all') {
+            if ($(this).data('room-id') != selectRoomId) {
+                $(this).hide();
+            } else {
+                $(this).show();
+            }
+        }
+    });
+    
+    
+}
+
+//Room selector
+$('[name="room"]').change(function (e) {
+    console.log('Selected Room ID ' + this.value)
+    var roomId = this.value;
+    localStorage.setItem("selectedRoomId", roomId);
+    $('.device-button').show();
+    if (roomId != 'all') {
+        $('.device-button').each(function () {
+            if ($(this).data('room-id') != roomId) {
+                $(this).hide();
+            }
+        });
+    }
+});
+
+
+/*
+var windowLoc = $(location).attr('pathname');
+windowLoc = windowLoc.substring(windowLoc.lastIndexOf("/"));
+console.log();
+if (windowLoc == "/") {
+    var autoUpdate = setInterval(function(){
+        if (pending == false) {
+            pending = true;
+            $.ajax({
+                url: 'ajax',
+                type: 'POST',
+                dataType: 'json',
+                data: {
+                    "action": 'getState'
+                },
+                success: function(data){
+                    console.log(data);
+                    for (const key in data) {
+                        if (data.hasOwnProperty(key)) {
+                            const device = data[key];
+                            $('[data-sub-device-id="'+key+'"]')
+                            .find('.device-button-value')
+                            .text(device['value'])
+                            .attr('title',device['time'])
+                        }
+                    }
+                },
+                error: function (request, status, error) {
+                    console.log("ERROR ajaxChart():", request, error);
+                },
+                complete: function (){
+                    pending = false;
+                }
+            });
+        }
+    },4000);
+}*/
+
+
+
+
+//Graphs
+$('.graph-period').on('click', function (e) {
+    var subId = $(this).attr('data-sub-device-id');
+    var period = $(this).attr('data-period');
+    var groupBy = $(this).attr('data-group');
+    
+    ajaxChart(subId, period, groupBy);
+});
+
+$("button[name=remove]").click(function (e) {
+    if (confirm('Are you shure ?')) {
+        var windowLoc = $(location).attr('pathname');
+        windowLoc = windowLoc.substring(windowLoc.lastIndexOf("/"));
+        console.log(windowLoc);
+        var id = null;
+        if (windowLoc == "/scene") {
+            id = $(this).data('scene-id');
+            $("#scene-" + id + "-content").remove();
+        } else if (windowLoc == "/automation") {
+            $(this).parent().remove();
+        }
+    }
+});

public/js/setting.js

@@ -0,0 +1,58 @@
+navigator.permissions.query({name:'notifications'}).then(function(result) {
+    var element = document.getElementById("notifications");
+    if (result.state === 'granted') {
+        element.checked = true;
+    } else if (result.state === 'denied') {
+        element.checked = false;
+    } else if (result.state === 'prompt') {
+        element.checked = false;
+    }
+});
+
+function toggleNotificationPermissions(input){
+    navigator.permissions.query({name:'notifications'}).then(function(result) {
+        if (result.state === 'granted') {
+            input.checked = true;
+        } else if (result.state === 'denied') {
+            input.checked = false;
+        } else if (result.state === 'prompt') {
+            input.checked = false;
+        }
+    });
+}
+
+function sendTestNotification(){
+    console.log("sending test notification");
+    $.ajax({
+        url: 'ajax',
+        type: 'POST',
+        data: {
+            "notification" : 'X',
+            "action": 'sendTest'
+        },
+        success: function(data){
+            console.log(data);
+        },
+        error: function (request, status, error) {
+            console.log("ERROR ", request, error);
+        }
+    });
+}
+
+$( "button[name='deactivateOta']" ).click(function(){
+    console.log("Didabling ota");
+    $.ajax({
+        url: 'ajax',
+        type: 'POST',
+        data: {
+            "ota" : 'X',
+            "action": 'disable'
+        },
+        success: function(data){
+            console.log(data);
+        },
+        error: function (request, status, error) {
+            console.log("ERROR ", request, error);
+        }
+    });
+})