add time_offset control

events.py

@@ -262,6 +262,9 @@ async def lixie_clock(request, ws, data):
 		mqtt_msg.append('color')
 		payload = tools.from_html_color(data.get('color'))
 		payload = str(payload)[1:-1].replace(' ', '')
+	elif data.get('change_mode') == 'time_offset':
+		mqtt_msg.append('time_offset')
+		payload = data.get('time_offset')
 	mqtt_msg = '/'.join(mqtt_msg)
 
 	request.app['mqtt'].publish(mqtt_msg, payload)

models.py

@@ -284,6 +284,10 @@ class LixieClock(Device):
 			data['change_mode'] = 'color'
 			data['color'] = tools.to_html_color(payload)
 			self.color = payload
+		elif topic[1] == 'time_offset':
+			data['change_mode'] = 'time_offset'
+			data['time_offset'] = int(payload)
+			self.time_offset = int(payload)
 		save_network(network)
 
 		res = {'event': 'lixie_clock', 'data': data}

static/juice.js

@@ -243,6 +243,8 @@ function lixie_clock_recv(data) {
 		device.querySelector('#lixie_number_' + device.id).value = data.display_number;
 	} else if (data.change_mode === 'color') {
 		device.querySelector('#display_color_' + device.id).value = data.color;
+	} else if (data.change_mode === 'time_offset') {
+		device.querySelector('#lixie_time_offset_' + device.id).value = data.time_offset;
 	}
 }
 
@@ -275,7 +277,8 @@ function save_field(field) {
 	socket.send('edit_field', data);
 }
 
-function new_device() { let data = {
+function new_device() {
+	let data = {
 		device_type: 'RelayDevice',
 	};
 	socket.send('new_device', data);
@@ -393,6 +396,9 @@ function lixie_clock(input) {
 	} else if (input.className === 'color') {
 		data['change_mode'] = 'color';
 		data['color'] = input.value
+	} else if (input.className === 'time_offset') {
+		data['change_mode'] = 'time_offset';
+		data['time_offset'] = device.querySelector('#lixie_time_offset_' + device.id).value;
 	}
 	socket.send('lixie_clock', data);
 }
@@ -472,8 +478,10 @@ function lixie_display_mode(radio, send_socket_event = true) {
 	let device = radio.closest('.device');
 	if (radio.value === 'time') {
 		device.querySelector('.lixie_number').style.display = 'none';
+		device.querySelector('.lixie_time_offset').style.display = 'block';
 	} else if (radio.value === 'number') {
 		device.querySelector('.lixie_number').style.display = 'block';
+		device.querySelector('.lixie_time_offset').style.display = 'none';
 	}
 	if (send_socket_event) {
 		lixie_clock(radio);

templates/index.html

@@ -136,6 +136,10 @@
 					<div class="lixie_controls">
 						<input type="radio" id="display_mode_time_{{ device.id }}" class="time" name="display_mode_{{ device.id }}" value="time" onchange="lixie_display_mode(this)"{% if device.display_mode == 'time' %} checked{% endif %}>
 						<label for="display_mode_time_{{ device.id }}">Time</label><br>
+						<div class='lixie_time_offset' style="display: {% if device.display_mode == 'time' %}block{% else %}none{% endif %}">
+							<label for="lixie_time_offset_{{ device.id }}">Time Zone Offset:</label>
+							<input type="number" id="lixie_time_offset_{{ device.id }}" class="time_offset" min="-12" max="12" value="{{ device.time_offset }}" onchange="lixie_clock(this)">
+						</div>
 						<input type="radio" id="display_mode_number_{{ device.id }}" class="number" name="display_mode_{{ device.id }}" value="number" onchange="lixie_display_mode(this)"{% if device.display_mode == 'number' %} checked{% endif %}>
 						<label for="display_mode_number_{{ device.id }}">Number</label><br>
 						<div class='lixie_number' style="display: {% if device.display_mode == 'number' %}block{% else %}none{% endif %}">