Ui is completely changed #12
@@ -24,3 +24,5 @@ selaias:meteor-simpleweather
|
||||
u2622:persistent-session
|
||||
percolate:synced-cron
|
||||
rzymek:moment-locale-bs
|
||||
peppelg:bootstrap-3-modal
|
||||
fortawesome:fontawesome
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -9,5 +9,6 @@
|
||||
|
||||
|
||||
#bucket_image {
|
||||
width: 60%;
|
||||
width: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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());
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
24
app/client/state_details.html
Normal file
24
app/client/state_details.html
Normal file
@@ -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>
|
||||
14
app/client/state_details.js
Normal file
14
app/client/state_details.js
Normal file
@@ -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({
|
||||
});
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user