From 748dd19a8792e8715ca796b77bb489fd9806ebef Mon Sep 17 00:00:00 2001
From: Senad Uka <senaduka@gmail.com>
Date: Sat, 19 Mar 2016 09:23:59 +0100
Subject: [PATCH] Ui is completely changed

---
 app/.meteor/packages          |   2 +
 app/.meteor/versions          |   2 +
 app/client/app.less           |   3 +-
 app/client/settings.html      | 179 ++++++++++++++++++----------------
 app/client/start.html         |   2 +-
 app/client/state.html         |  22 ++---
 app/client/state.js           |  45 ++++++---
 app/client/state_details.html |  24 +++++
 app/client/state_details.js   |  14 +++
 app/client/tabs.html          |   1 -
 10 files changed, 183 insertions(+), 111 deletions(-)
 create mode 100644 app/client/state_details.html
 create mode 100644 app/client/state_details.js

diff --git a/app/.meteor/packages b/app/.meteor/packages
index 8738548..15145a2 100644
--- a/app/.meteor/packages
+++ b/app/.meteor/packages
@@ -24,3 +24,5 @@ selaias:meteor-simpleweather
 u2622:persistent-session
 percolate:synced-cron
 rzymek:moment-locale-bs
+peppelg:bootstrap-3-modal
+fortawesome:fontawesome
diff --git a/app/.meteor/versions b/app/.meteor/versions
index c0b39db..45149dc 100644
--- a/app/.meteor/versions
+++ b/app/.meteor/versions
@@ -28,6 +28,7 @@ ejson@1.0.7
 email@1.0.8
 es5-shim@4.1.14
 fastclick@1.0.7
+fortawesome:fontawesome@4.5.0
 geojson-utils@1.0.4
 handlebars@1.0.4
 hot-code-push@1.0.0
@@ -58,6 +59,7 @@ npm-bcrypt@0.7.8_2
 npm-mongo@1.4.39_1
 observe-sequence@1.0.7
 ordered-dict@1.0.4
+peppelg:bootstrap-3-modal@1.0.4
 percolate:synced-cron@1.3.0
 promise@0.5.1
 random@1.0.5
diff --git a/app/client/app.less b/app/client/app.less
index c827e72..e66929e 100644
--- a/app/client/app.less
+++ b/app/client/app.less
@@ -9,5 +9,6 @@
 
 
 #bucket_image {
-  width: 60%;
+  width: 50%;
+  cursor: pointer;
 }
diff --git a/app/client/settings.html b/app/client/settings.html
index a49c7fd..b56133a 100644
--- a/app/client/settings.html
+++ b/app/client/settings.html
@@ -1,88 +1,103 @@
 <template name="settings">
-  <div class="col-md-3 col-md-offset-4">
-    <h1>Automatsko zaljevanje: </h1>
-    <select name="time_of_day" id="time_of_day">
-      <option value="00:00" selected={{ timeSelected "00:00" }}>00:00</option>
-      <option value="00:30" selected={{ timeSelected "00:30" }}>00:30</option>
-      <option value="01:00" selected={{ timeSelected "01:00" }}>01:00</option>
-      <option value="01:30" selected={{ timeSelected "01:30" }}>01:30</option>
-      <option value="02:00" selected={{ timeSelected "02:00" }}>02:00</option>
-      <option value="02:30" selected={{ timeSelected "02:30" }}>02:30</option>
-      <option value="03:00" selected={{ timeSelected "03:00" }}>03:00</option>
-      <option value="03:30" selected={{ timeSelected "03:30" }}>03:30</option>
-      <option value="04:00" selected={{ timeSelected "04:00" }}>04:00</option>
-      <option value="04:30" selected={{ timeSelected "04:30" }}>04:30</option>
-      <option value="05:00" selected={{ timeSelected "05:00" }}>05:00</option>
-      <option value="05:30" selected={{ timeSelected "05:30" }}>05:30</option>
-      <option value="06:00" selected={{ timeSelected "06:00" }}>06:00</option>
-      <option value="06:30" selected={{ timeSelected "06:30" }}>06:30</option>
-      <option value="07:00" selected={{ timeSelected "07:00" }}>07:00</option>
-      <option value="07:30" selected={{ timeSelected "07:30" }}>07:30</option>
-      <option value="08:00" selected={{ timeSelected "08:00" }}>08:00</option>
-      <option value="08:30" selected={{ timeSelected "08:30" }}>08:30</option>
-      <option value="09:00" selected={{ timeSelected "09:00" }}>09:00</option>
-      <option value="09:30" selected={{ timeSelected "09:30" }}>09:30</option>
-      <option value="10:00" selected={{ timeSelected "10:00" }}>10:00</option>
-      <option value="10:30" selected={{ timeSelected "10:30" }}>10:30</option>
-      <option value="11:00" selected={{ timeSelected "11:00" }}>11:00</option>
-      <option value="11:30" selected={{ timeSelected "11:30" }}>11:30</option>
-      <option value="12:00" selected={{ timeSelected "12:00" }}>12:00</option>
-      <option value="12:30" selected={{ timeSelected "12:30" }}>12:30</option>
-      <option value="13:00" selected={{ timeSelected "13:00" }}>13:00</option>
-      <option value="13:30" selected={{ timeSelected "13:30" }}>13:30</option>
-      <option value="14:00" selected={{ timeSelected "14:00" }}>14:00</option>
-      <option value="14:30" selected={{ timeSelected "14:30" }}>14:30</option>
-      <option value="15:00" selected={{ timeSelected "15:00" }}>15:00</option>
-      <option value="15:30" selected={{ timeSelected "15:30" }}>15:30</option>
-      <option value="16:00" selected={{ timeSelected "16:00" }}>16:00</option>
-      <option value="16:30" selected={{ timeSelected "16:30" }}>16:30</option>
-      <option value="17:00" selected={{ timeSelected "17:00" }}>17:00</option>
-      <option value="17:30" selected={{ timeSelected "17:30" }}>17:30</option>
-      <option value="18:00" selected={{ timeSelected "18:00" }}>18:00</option>
-      <option value="18:30" selected={{ timeSelected "18:30" }}>18:30</option>
-      <option value="19:00" selected={{ timeSelected "19:00" }}>19:00</option>
-      <option value="19:30" selected={{ timeSelected "19:30" }}>19:30</option>
-      <option value="20:00" selected={{ timeSelected "20:00" }}>20:00</option>
-      <option value="20:30" selected={{ timeSelected "20:30" }}>20:30</option>
-      <option value="21:00" selected={{ timeSelected "21:00" }}>21:00</option>
-      <option value="21:30" selected={{ timeSelected "21:30" }}>21:30</option>
-      <option value="22:00" selected={{ timeSelected "22:00" }}>22:00</option>
-      <option value="22:30" selected={{ timeSelected "22:30" }}>22:30</option>
-      <option value="23:00" selected={{ timeSelected "23:00" }}>23:00</option>
-      <option value="23:30" selected={{ timeSelected "23:30" }}>23:30</option>
-    </select>
-    <div>
+  <div class="modal fade">
+    <div class="modal-dialog">
+      <div class="modal-content">
 
-      <input type="checkbox" id="day_1" name="day_1" value="2" class="day_checkbox" checked="{{ dayChecked '2' }}" />
-      <label for="day_1">Ponedjeljak</label>
-    </div>
-    <div>
-      <input type="checkbox" id="day_2" name="day_2" value="3" class="day_checkbox" checked="{{ dayChecked '3' }}" />
-      <label for="day_2">Utorak</label>
-    </div>
-    <div>
-      <input type="checkbox" id="day_3" name="day_3" value="4" class="day_checkbox" checked="{{ dayChecked '4' }}" />
-      <label for="day_3">Srijeda</label>
-    </div>
-    <div>
-      <input type="checkbox" id="day_4" name="day_4" value="5" class="day_checkbox" checked="{{ dayChecked '5' }}" />
-      <label for="day_4">Četvrtak</label>
-    </div>
-    <div>
-      <input type="checkbox" id="day_5" name="day_5" value="6" class="day_checkbox"  checked="{{ dayChecked '6' }}" />
-      <label for="day_5">Petak</label>
-    </div>
-    <div>
-      <input type="checkbox" id="day_6" name="day_6" value="7" class="day_checkbox" checked="{{ dayChecked '7' }}" />
-      <label for="day_6">Subota</label>
-    </div>
-    <div>
-      <input type="checkbox" id="day_7" name="day_7" value="1" class="day_checkbox" checked="{{ dayChecked '1' }}" />
-      <label for="day_7">Nedjelja</label>
-    </div>
+        <div class="modal-header">
+          <h4 class="modal-title">Automatsko zaljevanje</h4>
+        </div>
 
-    <div>
-      <button id="save_settings" name="save_settings">Zapamti</button>
+        <div class="modal-body">
+          <select name="time_of_day" id="time_of_day">
+            <option value="00:00" selected={{ timeSelected "00:00" }}>00:00</option>
+            <option value="00:30" selected={{ timeSelected "00:30" }}>00:30</option>
+            <option value="01:00" selected={{ timeSelected "01:00" }}>01:00</option>
+            <option value="01:30" selected={{ timeSelected "01:30" }}>01:30</option>
+            <option value="02:00" selected={{ timeSelected "02:00" }}>02:00</option>
+            <option value="02:30" selected={{ timeSelected "02:30" }}>02:30</option>
+            <option value="03:00" selected={{ timeSelected "03:00" }}>03:00</option>
+            <option value="03:30" selected={{ timeSelected "03:30" }}>03:30</option>
+            <option value="04:00" selected={{ timeSelected "04:00" }}>04:00</option>
+            <option value="04:30" selected={{ timeSelected "04:30" }}>04:30</option>
+            <option value="05:00" selected={{ timeSelected "05:00" }}>05:00</option>
+            <option value="05:30" selected={{ timeSelected "05:30" }}>05:30</option>
+            <option value="06:00" selected={{ timeSelected "06:00" }}>06:00</option>
+            <option value="06:30" selected={{ timeSelected "06:30" }}>06:30</option>
+            <option value="07:00" selected={{ timeSelected "07:00" }}>07:00</option>
+            <option value="07:30" selected={{ timeSelected "07:30" }}>07:30</option>
+            <option value="08:00" selected={{ timeSelected "08:00" }}>08:00</option>
+            <option value="08:30" selected={{ timeSelected "08:30" }}>08:30</option>
+            <option value="09:00" selected={{ timeSelected "09:00" }}>09:00</option>
+            <option value="09:30" selected={{ timeSelected "09:30" }}>09:30</option>
+            <option value="10:00" selected={{ timeSelected "10:00" }}>10:00</option>
+            <option value="10:30" selected={{ timeSelected "10:30" }}>10:30</option>
+            <option value="11:00" selected={{ timeSelected "11:00" }}>11:00</option>
+            <option value="11:30" selected={{ timeSelected "11:30" }}>11:30</option>
+            <option value="12:00" selected={{ timeSelected "12:00" }}>12:00</option>
+            <option value="12:30" selected={{ timeSelected "12:30" }}>12:30</option>
+            <option value="13:00" selected={{ timeSelected "13:00" }}>13:00</option>
+            <option value="13:30" selected={{ timeSelected "13:30" }}>13:30</option>
+            <option value="14:00" selected={{ timeSelected "14:00" }}>14:00</option>
+            <option value="14:30" selected={{ timeSelected "14:30" }}>14:30</option>
+            <option value="15:00" selected={{ timeSelected "15:00" }}>15:00</option>
+            <option value="15:30" selected={{ timeSelected "15:30" }}>15:30</option>
+            <option value="16:00" selected={{ timeSelected "16:00" }}>16:00</option>
+            <option value="16:30" selected={{ timeSelected "16:30" }}>16:30</option>
+            <option value="17:00" selected={{ timeSelected "17:00" }}>17:00</option>
+            <option value="17:30" selected={{ timeSelected "17:30" }}>17:30</option>
+            <option value="18:00" selected={{ timeSelected "18:00" }}>18:00</option>
+            <option value="18:30" selected={{ timeSelected "18:30" }}>18:30</option>
+            <option value="19:00" selected={{ timeSelected "19:00" }}>19:00</option>
+            <option value="19:30" selected={{ timeSelected "19:30" }}>19:30</option>
+            <option value="20:00" selected={{ timeSelected "20:00" }}>20:00</option>
+            <option value="20:30" selected={{ timeSelected "20:30" }}>20:30</option>
+            <option value="21:00" selected={{ timeSelected "21:00" }}>21:00</option>
+            <option value="21:30" selected={{ timeSelected "21:30" }}>21:30</option>
+            <option value="22:00" selected={{ timeSelected "22:00" }}>22:00</option>
+            <option value="22:30" selected={{ timeSelected "22:30" }}>22:30</option>
+            <option value="23:00" selected={{ timeSelected "23:00" }}>23:00</option>
+            <option value="23:30" selected={{ timeSelected "23:30" }}>23:30</option>
+          </select>
+          <div>
+
+            <input type="checkbox" id="day_1" name="day_1" value="2" class="day_checkbox" checked="{{ dayChecked '2' }}" />
+            <label for="day_1">Ponedjeljak</label>
+          </div>
+          <div>
+            <input type="checkbox" id="day_2" name="day_2" value="3" class="day_checkbox" checked="{{ dayChecked '3' }}" />
+            <label for="day_2">Utorak</label>
+          </div>
+          <div>
+            <input type="checkbox" id="day_3" name="day_3" value="4" class="day_checkbox" checked="{{ dayChecked '4' }}" />
+            <label for="day_3">Srijeda</label>
+          </div>
+          <div>
+            <input type="checkbox" id="day_4" name="day_4" value="5" class="day_checkbox" checked="{{ dayChecked '5' }}" />
+            <label for="day_4">Četvrtak</label>
+          </div>
+          <div>
+            <input type="checkbox" id="day_5" name="day_5" value="6" class="day_checkbox" checked="{{ dayChecked '6' }}" />
+            <label for="day_5">Petak</label>
+          </div>
+          <div>
+            <input type="checkbox" id="day_6" name="day_6" value="7" class="day_checkbox" checked="{{ dayChecked '7' }}" />
+            <label for="day_6">Subota</label>
+          </div>
+          <div>
+            <input type="checkbox" id="day_7" name="day_7" value="1" class="day_checkbox" checked="{{ dayChecked '1' }}" />
+            <label for="day_7">Nedjelja</label>
+          </div>
+
+          <div>
+
+          </div>
+        </div>
+
+        <div class="modal-footer">
+          <button id="save_settings" class="btn btn-default" name="save_settings" data-dismiss="modal">Zapamti</button>
+        </div>
+
+      </div>
     </div>
   </div>
 
diff --git a/app/client/start.html b/app/client/start.html
index 7aa6e9d..607ba20 100644
--- a/app/client/start.html
+++ b/app/client/start.html
@@ -1,5 +1,5 @@
 <template name="start">
-<div class="col-lg-12 text-center">
+<div class="col-lg-12 text-center form">
 {{>state}}
 </div>
 </template>
diff --git a/app/client/state.html b/app/client/state.html
index 2c32d6e..9f923c2 100644
--- a/app/client/state.html
+++ b/app/client/state.html
@@ -1,25 +1,19 @@
 <template name="state">
-  <div class="col-md-3 col-md-offset-4">
+  <div class="col-md-12">
     {{#with controller_state}}
-    <h1>{{controller_id}}</h1>
-    <img src="{{ bucket_image }}" class="img-responsive center-block" id="bucket_image" /> {{#with last_sensor_reading}}
-    <div>
-      <strong>{{ temperatureValue }} °C, {{ humidityValue }} % </strong>
+    <img src="{{ bucket_image }}" class="img-responsive center-block" id="bucket_image" />
+    <div class="text-center">
+      {{controller_id}}:
+      {{#with last_sensor_reading}} <strong> {{ temperatureValue }} °C, {{ humidityValue }} % </strong>  {{/with}}
     </div>
-    <div>
-
+    <div class="text-center">
+      Automatsko zaljevanje: <strong>{{ pretty_days config.automaticDaysOfWeek }} {{ pretty_time config.automaticDaysOfWeek config.automaticTimeOfDay }}</strong> <button id="run_settings" class="btn btn-default"> <i class="fa fa-wrench"></i> </button>
     </div>
     {{/with}}
-    <div>Otpusni ventil: {{pretty_valve state.out_valve }}</div>
-    <div>Ulazni ventil/pumpa: {{pretty_valve state.in_valve }}</div>
-    <div>Zadnja komunikacija: {{ last_communication_time }}</div>
-    {{/with}}
     <div>
       <button id="water_now" class="{{ water_now_button_class }}">Zalij sada</button>
       <button id="stop_water_now" class="{{ stop_button_class }}">Prekini zalijevanje</button>
+
     </div>
   </div>
-  <div class="col-md-1">
-
-  </div>
 </template>
diff --git a/app/client/state.js b/app/client/state.js
index fdab860..5d41fd7 100644
--- a/app/client/state.js
+++ b/app/client/state.js
@@ -56,34 +56,47 @@ Template.state.helpers({
       else if (sensor.tankFull === 0 && (stateObject.state.out_valve === 'open')) return "/images/barellWateringNotFull.png"
       else if (sensor.tankFull === 0 && (stateObject.state.out_valve === 'closing')) return "/images/barellStopWateringNotFull.png"
       else return "/images/statusAmber.png";
-    }
-    else return "/images/statusRed.png";
+    } else return "/images/statusRed.png";
   },
 
   last_sensor_reading: last_sensor_reading,
 
-  last_communication_time: function() {
-    return moment(controller_state().time).fromNow();
-  },
-
-
   water_now_button_class: function() {
     var stateObject = controller_state();
     if (stateObject.state && (stateObject.state.out_valve === 'open' || stateObject.state.out_valve === 'opening')) {
-      return 'hidden';
+      return 'hidden btn btn-success';
     } else {
-      return '';
+      return 'btn btn-success';
     }
   },
   stop_button_class: function() {
     var stateObject = controller_state();
     if (stateObject.state && (stateObject.state.out_valve === 'closed' || stateObject.state.out_valve === 'closing')) {
-      return 'hidden';
+      return 'hidden btn btn-success';
     } else {
-      return '';
+      return 'btn btn-success';
+    }
+  },
+
+  pretty_days: function(daysInNumbers) {
+    var days = ["Nedjelja", "Ponedjeljak", "Utorak", "Srijeda", "Četvrtak", "Petak", "Subota"];
+    if (daysInNumbers.length == 7) {
+      return "Svaki dan"
+    } else if (!daysInNumbers || daysInNumbers.length == 0) {
+      return "Nikad"
+    } else {
+      return daysInNumbers.map(function(number) {
+        return days[number -1 ];
+      }).join(", ");
+    }
+  },
+  pretty_time: function(daysInNumbers, time) {
+    if (!daysInNumbers || daysInNumbers.length == 0) {
+      return ""
+    } else {
+      return " u " + time;
     }
   }
-
 });
 
 Template.state.events({
@@ -95,6 +108,14 @@ Template.state.events({
   'click #stop_water_now': function() {
     var controller_id = Session.get('controller_id');
     Meteor.call('closeOutValve', controller_id)
+  },
+
+  'click #run_settings': function() {
+    Modal.show('settings');
+  },
+
+  'click #bucket_image': function() {
+    Modal.show('state_details', controller_state());
   }
 
 });
diff --git a/app/client/state_details.html b/app/client/state_details.html
new file mode 100644
index 0000000..14b1c45
--- /dev/null
+++ b/app/client/state_details.html
@@ -0,0 +1,24 @@
+<template name="state_details">
+  <div class="modal fade">
+    <div class="modal-dialog">
+      <div class="modal-content">
+
+        <div class="modal-header">
+          <h4 class="modal-title">Detalji</h4>
+        </div>
+
+        <div class="modal-body">
+          <div><strong>Otpusni ventil:</strong> {{pretty_valve state.out_valve }}</div>
+            <div><strong>Ulazni ventil/pumpa:</strong> {{pretty_valve state.in_valve }}</div>
+            <div><strong>Zadnja komunikacija: {{ last_communication_time }}</strong></div>
+        </div>
+
+        <div class="modal-footer">
+          <button id="close_details" class="btn btn-default" name="close_details" data-dismiss="modal">Zatvori</button>
+        </div>
+
+      </div>
+    </div>
+  </div>
+
+</template>
diff --git a/app/client/state_details.js b/app/client/state_details.js
new file mode 100644
index 0000000..ee01e5c
--- /dev/null
+++ b/app/client/state_details.js
@@ -0,0 +1,14 @@
+Template.state_details.helpers({
+  pretty_valve: function(state) {
+    if (state === 'open') return "Otvoren";
+    if (state === 'opening') return "Otvara se";
+    if (state === 'closing') return "Zatvara se";
+    if (state === 'closed') return "Zatvoren";
+  },
+  last_communication_time: function() {
+    return moment(this.time).fromNow();
+  }
+});
+
+Template.state_details.events({
+});
diff --git a/app/client/tabs.html b/app/client/tabs.html
index d285cff..036106b 100644
--- a/app/client/tabs.html
+++ b/app/client/tabs.html
@@ -4,7 +4,6 @@
     <li role="presentation" class="{{ class_for 'start' }}"><a href="#">Stanje</a></li>
     <li role="presentation" class="{{ class_for 'weather' }}"><a href="#">Vrijeme</a></li>
     <li role="presentation" class="{{ class_for 'log' }}"><a href="#">Novosti</a></li>
-    <li role="presentation" class="{{ class_for 'settings' }}"><a href="#">Podešavanje</a></li>
     <li role="presentation" class="controller_selection">  <input type="number" id="controller" name="controller"  value="{{ selected_controller }}" min="1" max="99999"> <button id="switch" name="switch">Prebaci</button>
     </li>
   </ul>