add add policy function and ordering the home & layout

edison/app.py

@@ -5,6 +5,10 @@
 
 app = edison.app
 
+@app.route("/policy")
+def policy():
+	return render_template('policy.html')
+
 @app.route("/")
 def home():
 	return render_template('home.html')

edison/static/css/footer.css

@@ -2,6 +2,7 @@
   background-color: #222;
   color: #ccc;
   padding: 60px 30px;
+  bottom:0;
 }
 
 .footer-copyright {

edison/static/css/policy.css

@@ -0,0 +1,30 @@
+.policy {
+  padding: 0.4em;
+  top: 5rem;
+  position: fixed;
+}
+
+.active {
+  font-size: 120%;
+}
+
+.card-header {
+  font-size: 100%;
+}
+
+.btn-link {
+  font-size: 120%;
+}
+
+.btn {
+  font-size: 120%;
+  margin: 1rem;
+}
+
+.modal-body {
+  font-size: 120%;
+}
+
+.condition-term {
+  display: none;
+}

edison/static/js/policy.controller.js

@@ -0,0 +1,105 @@
+
+import { Policy } from './policy.model.js'
+import { PolicyElementsModifier } from './policyElementsModifier.js'
+
+var policy = new Policy();
+var countCondition = 0;
+
+function createInitElement(type, classSet = '', id = '', style = '') {
+    var element = document.createElement(type);
+
+    if (classSet !== '') {
+        element.setAttribute("class", classSet);
+    }
+
+    if (id !== '') {
+        element.setAttribute("id", id);
+    }
+
+    if (style !== '') {
+        element.setAttribute("style", style);
+    }
+
+    return element;
+}
+
+function setCondition() {
+    var policyElementsModifier = new PolicyElementsModifier();
+    var conditionValue = document.getElementById('condition').value;
+    var value = document.getElementById('showValue');
+    var from = document.getElementById('showFrom');
+    var to = document.getElementById('showTo');
+    var labelValue = document.getElementById('labelValue');
+
+    policyElementsModifier.modify(conditionValue, from, to, labelValue, value);
+}
+
+function addCondition(policy) {
+    var conditionValue = document.getElementById('condition').value;
+    var condition = document.getElementById('sensor').value + ' ';
+
+    condition = condition + conditionValue + ' ';
+
+    if (conditionValue === 'Between') {
+        condition = condition + document.getElementById('from').value + ' ';
+        condition = condition + document.getElementById('to').value;
+    } else {
+        condition = condition + document.getElementById('value').value;
+    }
+
+    policy.addCondition(condition);
+}
+
+function setCommand(policy) {
+    var light = document.getElementById('light').value;
+    var ac = document.getElementById('ac').value;
+    var shutters = document.getElementById('shutters').value;
+
+    policy.addCommandToPolicy(ac, light, shutters);
+}
+
+function showCondition(policy, countCondition, elementID) {
+    var element = document.getElementById(elementID);
+    var option = createInitElement('option', '', 'option' + countCondition);
+    var arrCondition = policy.condition.split(', ');
+    var sensorValue = arrCondition[countCondition];
+
+    option.innerHTML = countCondition + 1 + ': ' + sensorValue;
+    element.appendChild(option);
+}
+
+function initSettingToNewPolicy() {
+    policy.reset();
+
+    for (var i = 0; i < countCondition; i++) {
+        var element = document.getElementById('option' + i);
+
+        element.remove();
+    }
+
+    countCondition = 0;
+}
+
+function addPolicy() {
+    policy.name = document.getElementById('PolicyName').value;
+    policy.room = document.getElementById('choiceRoom').value;
+    setCommand(policy);
+    $.post('/policy', policy, function () { });
+    initSettingToNewPolicy();
+}
+
+function saveCondition() {
+    addCondition(policy);
+    showCondition(policy, countCondition, 'conditionNum');
+    countCondition++;
+}
+
+function mainFunctionPolicy() {
+    document.getElementById('condition').addEventListener('click', setCondition);
+    document.getElementById('saveCondition').addEventListener('click', saveCondition);
+    document.getElementById('savePolicy').addEventListener('click', addPolicy);
+}
+
+$(function () {
+    mainFunctionPolicy();
+});

edison/static/js/policy.model.js

@@ -0,0 +1,38 @@
+
+export class Policy {
+    constructor() {
+        this.name = '';
+        this.room = '';
+        this.command = '';
+        this.condition = '';
+    }
+
+    reset() {
+        this.name = '';
+        this.room = '';
+        this.command = '';
+        this.condition = '';
+    }
+
+    addCondition(add_condition) {
+        if (this.condition !== '') {
+            this.condition = this.condition + ', ';
+        }
+
+        this.condition = this.condition + add_condition;
+    }
+
+    addCommandToPolicy(ac, light, shutters) {
+        if (light) {
+            this.command = this.command + 'light ' + light;
+        }
+
+        if (ac) {
+            this.command = this.command + ' ,ac ' + ac;
+        }
+
+        if (shutters) {
+            this.command = this.command + ',shutters ' + shutters;
+        }
+    }
+}

edison/static/js/policyElementsModifier.js

@@ -0,0 +1,24 @@
+
+export class PolicyElementsModifier {
+    #configByCondition;
+
+    constructor() {
+        this.#configByCondition = {
+            '=': { displayTo: 'none', displayFrom: 'none', labelValue: 'Equal', displayValue: 'inline' },
+            '<': { displayTo: 'none', displayFrom: 'none', labelValue: 'Under', displayValue: 'inline' },
+            '>': { displayTo: 'none', displayFrom: 'none', labelValue: 'Above', displayValue: 'inline' },
+            'Between': { displayTo: 'inline', displayFrom: 'inline', labelValue: '', displayValue: 'none' }
+        }
+    }
+
+    modify(condition, from, to, labelValue, value) {
+        if (this.#configByCondition.hasOwnProperty(condition)) {
+            var config = this.#configByCondition[condition];
+
+            to.style.display = config.displayTo;
+            from.style.display = config.displayFrom;
+            value.style.display = config.displayValue;
+            labelValue.innerHTML = config.labelValue;
+        }
+    }
+}

edison/templates/home.html

@@ -1,6 +1,4 @@
 {% extends 'layout.html' %}
 
-{% block body %}
-{% include 'include/footer.html' %}
-{% endblock  %}
+{% block body %}{% endblock  %}
 

edison/templates/include/navgar.html

@@ -14,10 +14,9 @@
                     <a class="nav-link" id="Plans" href="#plan">Plans</a>
                 </li>
                 <li class="nav-item">
-                    <a class="nav-link" id=Policies href="#policy">Policy</a>
+                    <a class="nav-link" id="policy" href="policy">Policy</a>
                 </li>
             </ul>
         </div>
     </div>
 </nav>
-

edison/templates/layout.html

@@ -8,26 +8,19 @@
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
         integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
     <link rel="stylesheet" href="{{ url_for('static', filename='css/layout.css') }}">
-
 </head>
 
 <body>
-
-    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
-        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
+    <script src="https://code.jquery.com/jquery-3.3.1.min.js"
+        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT"
         crossorigin="anonymous"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
         integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
         crossorigin="anonymous"></script>
-
-        {% include 'include/navgar.html' %}
-        {% include 'include/header.html' %}
-        {% block body %} {% endblock %}
-
-    </div>
-
-
-
+    {% include 'include/navgar.html' %}
+    {% include 'include/header.html' %}
+    {% include 'include/footer.html' %}
+    {% block body %}{% endblock %}
 </body>
 
 </html>

edison/templates/policy.html

@@ -0,0 +1,117 @@
+{% extends 'layout.html' %}
+{% block body %}
+<div class="policy">
+  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/Policy.css') }}">
+  <div class="list-policies" id="Policieslist">
+    <div class="container">
+      <button class="btn btn-primary collapsed" data-toggle="collapse" data-target="#collapseAddPolicy" type="button"
+        aria-expanded="false" aria-controls="collapseAddPolicy">
+        Add Policy
+      </button>
+      <div class="collapse" id="collapseAddPolicy" style="width: 50rem;">
+        <div class="card card-body">
+          <form>
+            <div class="form-group">
+              <label for="PolicyName">Name</label>
+              <input type="text" class="form-control" id="PolicyName" placeholder="my policy">
+            </div>
+            <div class="form-group">
+              <label for="choiceRoom">Room</label>
+              <input type="text" class="form-control" id="choiceRoom" placeholder="Living Room">
+            </div>
+            <div class="form-row">
+              <div class="form-group col-md-4">
+                <label for="light">Light</label>
+                <select class="form-control" id="light">
+                  <option> </option>
+                  <option>On</option>
+                  <option>Off</option>
+                </select>
+              </div>
+              <div class="form-group col-md-4">
+                <label for="ac">AC</label>
+                <select class="form-control" id="ac">
+                  <option> </option>
+                  <option>On</option>
+                  <option>Off</option>
+                </select>
+              </div>
+              <div class="form-group col-md-4">
+                <label for="shutters">Shutters</label>
+                <select class="form-control" id='shutters'>
+                  <option> </option>
+                  <option>On</option>
+                  <option>Off</option>
+                </select>
+              </div>
+            </div>
+            <div class="form-row">
+              <div class="form-group col-md-4">
+                <button class="btn btn-link collapsed" id='addCondition' data-toggle="collapse"
+                  data-target="#collapseAddCondition" type="button" aria-expanded="false"
+                  aria-controls="collapseAddCondition">
+                  Add Condition
+                </button>
+              </div>
+            </div>
+            <div class="collapse" id="collapseAddCondition" style="width: 50rem;">
+              <div class="form-row">
+                <div class="form-group col-md-5">
+                  <label for="sensor">Sensor</label>
+                  <select class="form-control" id="sensor">
+                    <option>Humidity</option>
+                    <option>Light</option>
+                    <option>Temperature</option>
+                  </select>
+                </div>
+                <div class="form-group col-md-5">
+                  <label for="condition">Condition</label>
+                  <select class="form-control" id="condition">
+                    <option><</option>
+                    <option>=</option>
+                    <option>></option>
+                    <option>Between</option>
+                  </select>
+                </div>
+              </div>
+              <div id='ConditionTerm'>
+              </div>
+              <div class="form-row">
+                <div class="form-group col-md-4 condition-term" id="showValue">
+                  <label id=labelValue for="value"></label>
+                  <input type="number" id="value" class="form-control" placeholder="30">
+                </div>
+                <div class="form-group col-md-4 condition-term" id="showFrom">
+                  <label for="from">From</label>
+                  <input type="number" id="from" class="form-control" placeholder="30">
+                </div>
+                <div class="form-group col-md-4 condition-term" id="showTo">
+                  <label for="to">To</label>
+                  <input type="number" id="to" class="form-control" placeholder="50">
+                </div>
+              </div>
+              <button id='saveCondition' class="btn btn-info" data-toggle="collapse" data-target="#collapseAddCondition"
+                type="button" aria-expanded="false">
+                Save Condition
+            </div>
+            </button>
+            <p></p>
+            <button id='savePolicy' type="button" class="btn btn-outline-info" data-toggle="collapse"
+              data-target="#collapseAddPolicy" type="button" aria-expanded="false">Save Policy</button>
+            <div class="form-row">
+              <div class="form-group col-md-4">
+                <p></p>
+                <label for="conditionNum">condition</label>
+                <select class="form-control" id="conditionNum">
+                </select>
+              </div>
+            </div>
+          </form>
+        </div>
+      </div>
+      <p></p>
+    </div>
+  </div>
+  <script type="module" src="{{ url_for('static', filename='js/policy.controller.js') }}"></script>
+</div>
+{% endblock %}