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,34 @@
+.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;
+}
+
+.card-body {
+  width: 42rem;
+}

edison/static/js/policy.controller.js

@@ -0,0 +1,100 @@
+
+import { Policy } from './policy.model.js'
+import { PolicyElementsModifier } from './policyElementsModifier.js'
+
+var policy = new Policy();
+var countCondition = 0;
+
+function createInitElement(type, className = '', id = '') {
+    var element = document.createElement(type);
+
+    if (className !== '') {
+        element.setAttribute("class", className);
+    }
+
+    if (id !== '') {
+        element.setAttribute("id", id);
+    }
+    return element;
+}
+
+function setCondition() {
+    var policyElementsModifier = new PolicyElementsModifier();
+    var conditionValue = document.getElementById('chooseCondition').value;
+    var equalOrUnderOrAbove = document.getElementById('showEqualOrUnderOrAbove');
+    var from = document.getElementById('showFrom');
+    var to = document.getElementById('showTo');
+    var labelEqualOrUnderOrAbove = document.getElementById('labelEqualOrUnderOrAbove');
+
+    policyElementsModifier.modify(conditionValue, from, to, labelEqualOrUnderOrAbove, equalOrUnderOrAbove);
+}
+
+function addCondition(policy) {
+    var conditionValue = document.getElementById('chooseCondition').value;
+    var sensor = document.getElementById('sensor').value + ' ';
+
+    var condition = sensor + conditionValue + ' ';
+
+    if (conditionValue === 'Between') {
+        condition = condition + document.getElementById('from').value + ' ';
+        condition = condition + document.getElementById('to').value;
+    } else {
+        condition = condition + document.getElementById('equalOrUnderOrAbove').value;
+    }
+
+    policy.addCondition(condition);
+}
+
+function setCommand(policy) {
+    var light = document.getElementById('light').value;
+    var airConditioner = document.getElementById('airConditioner').value;
+    var shutters = document.getElementById('shutters').value;
+
+    policy.addCommandToPolicy(airConditioner, light, shutters);
+}
+
+function showCondition(policy, countCondition, elementID) {
+    var element = document.getElementById(elementID);
+    var elementCurrCondition = createInitElement('option', '', 'option' + countCondition);
+    var arrCondition = policy.condition.split(', ');
+    var currCondition = arrCondition[countCondition];
+
+    elementCurrCondition.innerHTML = countCondition + 1 + ': ' + currCondition;
+    element.appendChild(elementCurrCondition);
+}
+
+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('policyRoom').value;
+    setCommand(policy);
+    $.post('/policy', policy, function () { });
+    initSettingToNewPolicy();
+}
+
+function saveCondition() {
+    addCondition(policy);
+    showCondition(policy, countCondition, 'conditionNum');
+    countCondition++;
+}
+
+function mainFunctionPolicy() {
+    document.getElementById('chooseCondition').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,40 @@
+
+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(airConditioner, light, shutters) {
+        var sensors = []; 
+        if (light) {
+            sensors.push('light ' + light);
+        }
+
+        if (airConditioner) {
+            sensors.push('air conditioner ' + airConditioner);;
+        }
+
+        if (shutters) {
+            sensors.push('shutters ' + shutters);
+        }
+        this.command = sensors.join(' ,');
+    }
+}

edison/static/js/policyElementsModifier.js

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

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,111 @@
+{% extends 'layout.html' %}
+{% block body %}
+<div class="policy">
+  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/Policy.css') }}">
+  <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">
+      <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="policyRoom">Room</label>
+            <input type="text" class="form-control" id="policyRoom" 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="airConditioner">AC</label>
+              <select class="form-control" id="airConditioner">
+                <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">
+            <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="chooseCondition">Condition</label>
+                <select class="form-control" id="chooseCondition">
+                  <option><</option>
+                  <option>=</option>
+                  <option>></option>
+                  <option>Between</option>
+                </select>
+              </div>
+            </div>
+            <div class="form-row">
+              <div class="form-group col-md-4 condition-term" id="showEqualOrUnderOrAbove">
+                <label id="labelEqualOrUnderOrAbove" for="equalOrUnderOrAbove"></label>
+                <input type="number" id="equalOrUnderOrAbove" 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>
+          <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>
+  </div>
+  <script type="module" src="{{ url_for('static', filename='js/policy.controller.js') }}"></script>
+</div>
+{% endblock %}