Status icons for plug

Homemade-Disaster · Apr 8, 2022 · 92ce86b · 92ce86b
1 parent 30ea2d2
commit 92ce86b
Show file tree

Hide file tree

Showing 20 changed files with 194 additions and 65 deletions.
diff --git a/README.md b/README.md
@@ -33,6 +33,9 @@ Mittels der Netatmo-Energy API werden die aktuellen Einstellungen abgeholt bzw.
     Placeholder for the next version (at the beginning of the line):
     ### **WORK IN PROGRESS**
 -->
+### 1.2.3 (2022-04-08)
+* (ioKlausi) Added status icons to plug
+
 ### 1.2.2 (2022-04-03)
 * (ioKlausi) Added a slider to each valve to change the temperature and added some API requests to admin tab to transfer changes to the cloud 
 

diff --git a/admin/img/thermostat.png b/admin/img/thermostat.png
diff --git a/admin/style.css b/admin/style.css
@@ -244,65 +244,24 @@ i.icon-green {
 i.icon-grey {
 	color: grey;
 }
-.tooltip {
-	position: relative;
-	text-decoration: none;
-	z-index: 1;
-}
-.tooltip:after {
-	content: attr(data-tooltip);
-	position: absolute;
-	bottom: 130%;
-	left: 20%;
-	background: #ffbd66;
-	padding: 5px 15px;
-	color: black;
-	-webkit-border-radius: 2px;
-	-moz-border-radius : 2px;
-	border-radius : 2px;
-	white-space: nowrap;
-	opacity: 0;
-	-webkit-transition: all 0.4s ease;
-	-moz-transition : all 0.4s ease;
-	transition : all 0.4s ease;
-}
-.tooltip:before {
-	content: "";
-	position: absolute;
-	width: 0;
-	height: 0;
-	border-top: 5px solid #ffcb66;
-	border-left: 5px solid transparent;
-	border-right: 5px solid transparent;
-	-webkit-transition: all 0.4s ease;
-	-moz-transition : all 0.4s ease;
-	transition : all 0.4s ease;
-	opacity: 0;
-	left: 30%;
-	bottom: 90%;
-}
-.tooltip:hover:after {
-	bottom: 100%;
-}
-.tooltip:hover:before {
-	bottom: 70%;
-}
-.tooltip:hover:after, a:hover:before {
-	opacity: 1;
-}
+
 .myslider {
 	-webkit-appearance: none;
 	background: #d3d3d3;
 	outline: none;
 	opacity: 0.7;
 	-webkit-transition: .2s;
 	transition: opacity .2s;
-  }
-
+  }  
 .myslider:hover {
 	opacity: 1;
 }
-
+.myslider::-webkit-slider-runnable-track {
+	width: 100%;
+	height: 6px;
+	background: #ff0000;
+	border: none;
+  }
 .myslider::-webkit-slider-thumb {
 	-webkit-appearance: none;
 	appearance: none;
@@ -311,7 +270,6 @@ i.icon-grey {
 	background: #04AA6D;
 	cursor: pointer;
 }
-
 .myslider::-moz-range-thumb {
 	width: 25px;
 	height: 25px;

diff --git a/admin/tab_m.html b/admin/tab_m.html
@@ -36,7 +36,7 @@
 
             $('#netatmo_energy_refresh').on('click', () => {
                 var $sel = $('#messages');
-                const wait_html=`<div style="float: left">
+                const wait_html=`<div style="float: left;">
                                     <img src="img/progress.gif" width="65px" onerror="this.onerror=null;this.src='img/noimage.png';">
                                 </div>
                                 <div class="col">    
@@ -216,9 +216,11 @@ <h6 class="translate">${message.msgtxt}</h6>
         //get battery infos
         function getBatteryCls(value) {
             if (value) {
-                if (value == 'low') return {color: 'icon-red', icon: 'battery_alert', text: 'low'}
+                if (value == 'very_low') return {color: 'icon-red', icon: 'battery_alert', text: 'very low'}
+                else if (value == 'low') return {color: 'icon-red', icon: 'battery_alert', text: 'low'}
                 else if (value == 'medium') return {color: 'icon-orange', icon: 'battery_charging_full', text: 'medium'};
-                else return {color: 'icon-green', icon: 'battery_std', text: 'high'};
+                else if (value == 'high') return {color: 'icon-green', icon: 'battery_std', text: 'high'};
+                else return {color: 'icon-green', icon: 'battery_std', text: 'full'};
             }
             return undefined;
         }
@@ -258,7 +260,48 @@ <h6 class="translate">${message.msgtxt}</h6>
             }
             return undefined;
         }
-
+
+        //get boiler cable
+        function getBoilerCableCls(value) {
+            if (value != undefined && value != null) {
+                if (value == true) return {color: 'icon-green', icon: 'done', text: 'Boiler cable used', value: value}; 
+                else return {color: 'icon-red', icon: 'not_interested', text: 'Boiler cable not used', value: value};
+            }
+            return undefined;
+        }
+
+        //get boiler connected
+        function getBoilerConnectedCls(value) {
+            if (value != undefined && value != null) {
+                if (value >0) return {color: 'icon-green', icon: 'done', text: 'Plug is connected to boiler', value: value}; 
+                else return {color: 'icon-red', icon: 'cancel', text: 'Plug is not connected to boiler', value: value};
+            }
+            return undefined;
+        }
+
+        //get temp mode
+        function getTempModeCls(value) {
+            if (value != undefined && value != null) {
+                switch (value) {
+                    case 'manual':
+                        return {color: 'icon-orange', icon: 'edit', text: 'manually'};
+                    case 'max':
+                        return {color: 'icon-aqua', icon: 'keyboard_arrow_up', text: 'max'};
+                    case 'off':
+                        return {color: 'icon-black', icon: 'highlight_off', text: 'off'};
+                    case 'away':
+                        return {color: 'icon-grey', icon: 'directions_walk', text: 'away'};
+                    case 'hg':
+                        return {color: 'icon-red', icon: 'card_travel', text: 'frost guardian'};
+                    case 'schedule':
+                        return {color: 'icon-green', icon: 'av_timer', text: 'scheduled'};
+                    default:
+                        return null;
+                }
+            }
+            return undefined;
+        }
+
         //get boiler infos
         function getBoilerCls(value) {
             if (value != undefined && value != null) {
@@ -304,6 +347,7 @@ <h6 class="translate">${message.msgtxt}</h6>
                     let temp_act                    = valve.therm_measured_temperature;
                     let temp_set                    = valve.therm_setpoint_temperature;
                     let temp_mode                   = valve.therm_setpoint_mode;
+                    let temp_mode_cls               = getTempModeCls(temp_mode);
 
                     let anticipating                = valve.anticipating;
                     let anticipating_cls            = getAnticipatingCls(anticipating);
@@ -331,9 +375,11 @@ <h6 class="translate">${message.msgtxt}</h6>
                     let boiler_valve_comfort        = valve.boiler_valve_comfort_boost;
 
                     let wifi_strength               = valve.wifi_strength;
-                    let plug_connected_boiler       = valve.plug_connected_boiler;
+                    let plug_connected_boiler       = getBoilerConnectedCls(valve.plug_connected_boiler);
+
                     let hardware_version            = valve.hardware_version;
-                    let boiler_cable                = valve.boiler_cable;
+                    let boiler_cable                = getBoilerCableCls(valve.boiler_cable);
+
                     let act_date                    = new Date();
                     let act_date_text               = act_date.toLocaleString();
 
@@ -362,22 +408,25 @@ <h6 class="translate">${message.msgtxt}</h6>
                                                         <img src="${img_src.img}" width="65px" onerror="this.onerror=null;this.src='img/noimage.png';">
                                                     ` : ''}
                                                     ${friendlyName != undefined && friendlyName!= null ? `
-                                                        <div id="friendly_name" class="card-title truncate" style="margin-right: 5px;">${friendlyName}</div>
+                                                        <div id="friendly_name" class="card-title truncate" style="margin-right: 5px;">${friendlyName}  
+                                                        </div>
                                                     ` : ''}
                                                     ${temp_act != undefined && temp_act!= null ? `
                                                         <ul style="margin: 0px;"><b class="translate">Actual temperature:</b> ${temp_act.toFixed(1)}</ul>
                                                     ` : ''}
                                                     ${temp_set != undefined && temp_set!= null ? `
-                                                        <ul id="${mod_id_internal}_setTemp_TempValve" data_point="${temp_set.toFixed(1)}" data_folder="${setMode}" class="${id}_setTemp_Class ${valve.type}" style="margin: 0px;"><b class="translate">Target temperature:</b> ${temp_set.toFixed(1)}</ul>
+                                                        <ul id="${mod_id_internal}_setTemp_TempValve" data_point="${temp_set.toFixed(1)}" data_folder="${setMode}" class="${id}_setTemp_Class ${valve.type}" style="margin: 0px;">
+                                                            <b class="translate">Target temperature:</b> ${temp_set.toFixed(1)} 
+                                                        </ul>
                                                     ` : ''}
                                                     ${temp_set != undefined && temp_set!= null ? `
                                                         <input id="${id}_setTemp" data_point="${setTemp}" type="range" min="7" max="30" step="0.5" value="${temp_set}" class="myslider ${id}_slider_Class" onchange="setTempValve(this.value, this)">
                                                     ` : ''}
-                                                    ${plug_connected_boiler != undefined && plug_connected_boiler!= null ? ((plug_connected_boiler > 0) ? 
+                                                    ${plug_connected_boiler != undefined && plug_connected_boiler!= null ? ((plug_connected_boiler.value > 0) ? 
                                                         `<ul style="margin: 0px;"><b class="translate">Plug is connected to boiler</b></ul>` 
                                                         :
                                                         `<ul style="margin: 0px;"><b class="translate">Plug is not connected to boiler</b></ul>`) : ''}
-                                                    ${boiler_cable != undefined && boiler_cable!= null ? ((boiler_cable == true) ? 
+                                                    ${boiler_cable != undefined && boiler_cable!= null ? ((boiler_cable.value == true) ? 
                                                         `<ul style="margin: 0px;"><b class="translate">Boiler cable used</b></ul>` 
                                                         :
                                                         `<ul style="margin: 0px;"><b class="translate">Boiler cable not used</b></ul>`) : ''}                                                                                                              
@@ -390,6 +439,12 @@ <h6 class="translate">${message.msgtxt}</h6>
                                                                 <i class="material-icons icon-green" style="font-size: 24px;padding:left=5px">mood</i>
                                                             </a>
                                                         </div>` : ''}
+                                                    ${temp_mode_cls != undefined && temp_mode_cls!= null ? `
+                                                        <div id="${mod_id_internal}_schedule" class="col el">
+                                                            <a id="temp_mode_icon" class="tooltipped translateT" title="${temp_mode_cls.text}">
+                                                                <i class="material-icons ${temp_mode_cls.color}" style="font-size: 24px;padding:left=5px">${temp_mode_cls.icon}</i>
+                                                            </a>
+                                                        </div>` : ''} 
                                                     ${battery_state != undefined ? `
                                                         <div id="${mod_id_internal}_battery" class="col el">
                                                             <a id="battery_icon" class="tooltipped translateT" title="${battery_state_cls.text}">
@@ -420,6 +475,18 @@ <h6 class="translate">${message.msgtxt}</h6>
                                                                 <i class="material-icons ${heating_power_request_cls.color}" style="font-size: 24px;padding:left=5px">${heating_power_request_cls.icon}</i>
                                                             </a>
                                                         </div>` : ''}
+                                                    ${boiler_cable != undefined ? `
+                                                        <div id="${mod_id_internal}_boiler_cable" class="col el">
+                                                            <a id="battery_icon" class="tooltipped translateT" title="${boiler_cable.text}">
+                                                                <i class="material-icons ${boiler_cable.color}" style="font-size: 24px;padding:left=5px">${boiler_cable.icon}</i>
+                                                            </a>
+                                                        </div>` : ''}
+                                                    ${plug_connected_boiler != undefined ? `
+                                                        <div id="${mod_id_internal}_boiler_connected" class="col el">
+                                                            <a id="battery_icon" class="tooltipped translateT" title="${plug_connected_boiler.text}">
+                                                                <i class="material-icons ${plug_connected_boiler.color}" style="font-size: 24px;padding:left=5px">${plug_connected_boiler.icon}</i>
+                                                            </a>
+                                                        </div>` : ''}
                                                 </div>  
                                             </div>
                                         </div>
@@ -530,9 +597,10 @@ <h5 class="translate">Netatmo Energy</h5>
                             </a>  
                         </li>
                     </ul> 
-                </div>
+                </div>    
             </nav>
         </div>   
+        <div id="spacer" class="row"></div>
         <div id="messages" class="row"></div> 
         <div id="valves" class="row"></div> 
     </div>

diff --git a/admin/words.js b/admin/words.js
@@ -1996,6 +1996,90 @@ const _systemDictionary = {
 		"es": "¡Modo establecido en el modo predeterminado!",
 		"pl": "Tryb ustawiony na tryb domyślny!",
 		"zh-cn": "模式设置为默认模式！"
+	},
+	"manually": {
+		"en": "manually",
+		"de": "manuell",
+		"ru": "вручную",
+		"pt": "manualmente",
+		"nl": "handmatig",
+		"fr": "manuellement",
+		"it": "manualmente",
+		"es": "a mano",
+		"pl": "ręcznie",
+		"zh-cn": "手动"
+	},
+	"max": {
+		"en": "max",
+		"de": "max",
+		"ru": "Максимум",
+		"pt": "máximo",
+		"nl": "max",
+		"fr": "maximum",
+		"it": "max",
+		"es": "máximo",
+		"pl": "maks",
+		"zh-cn": "最大限度"
+	},
+	"away": {
+		"en": "away",
+		"de": "Weg",
+		"ru": "прочь",
+		"pt": "um jeito",
+		"nl": "weg",
+		"fr": "une façon",
+		"it": "lontano",
+		"es": "fuera",
+		"pl": "z dala",
+		"zh-cn": "离开"
+	},
+	"frost guardian": {
+		"en": "frost guardian",
+		"de": "Frostwächter",
+		"ru": "хранитель мороза",
+		"pt": "guardião do gelo",
+		"nl": "vorst bewaker",
+		"fr": "gardien du gel",
+		"it": "guardiano del gelo",
+		"es": "guardián de las heladas",
+		"pl": "strażnik mrozu",
+		"zh-cn": "冰霜守护者"
+	},
+	"scheduled": {
+		"en": "schedule",
+		"de": "Zeitplan",
+		"ru": "график",
+		"pt": "cronograma",
+		"nl": "schema",
+		"fr": "programme",
+		"it": "programma",
+		"es": "calendario",
+		"pl": "harmonogram",
+		"zh-cn": "时间表"
+	},
+	"very low": {
+		"en": "very low",
+		"de": "sehr niedrig",
+		"ru": "очень низкий",
+		"pt": "muito baixo",
+		"nl": "heel laag",
+		"fr": "très lent",
+		"it": "molto basso",
+		"es": "muy bajo",
+		"pl": "bardzo niski",
+		"zh-cn": "非常低"
+	},
+	"full": {
+		"en": "full",
+		"de": "voll",
+		"ru": "полный",
+		"pt": "cheio",
+		"nl": "vol",
+		"fr": "plein",
+		"it": "completo",
+		"es": "completo",
+		"pl": "pełny",
+		"zh-cn": "满的"
 	}
 };
 

diff --git a/docs/de/README.md b/docs/de/README.md
@@ -95,6 +95,8 @@ Auf der Admin-Tab können sie alle Thermostate, Bridges und Ventile ihrer netatm
 
 <img src="https://github.com/Homemade-Disaster/ioBroker.netatmo-energy/raw/master/docs/img/admintab_de.png" alt="admintab" width="70%"/>
 
+Auf jeder Karte werden Statussysmbole angezeigt, welche den aktuellen Zustand des Thermostats, der Ventile und des Steckers darstellt.
+
 ## Widget
 Widget für VIS um ein komplettes Thermostat anzuzeigen. Sie müssen nur den "SetTemp" - Datenpunkt eintragen. Alle anderen Informationen werden dynamisch aus der "rooms"-Struktur ermittelt.
 

diff --git a/docs/en/README.md b/docs/en/README.md
@@ -96,6 +96,8 @@ On the Admin-Tab you can see all thermostates, plugs and valves from your netatm
 
 <img src="https://github.com/Homemade-Disaster/ioBroker.netatmo-energy/raw/master/docs/img/admintab_en.png" alt="admintab" width="70%"/>
 
+On each card you can find status icons, which show you the actual state of each thermostat, valve and plug.
+
 ## Widget
 Widget for VIS to show a complete valve. You have only to define the "SetTemp" - datapoint. The widget will get all other fields dynamically out of the "rooms"-structure.
 

diff --git a/docs/img/admintab_de.png b/docs/img/admintab_de.png
diff --git a/docs/img/admintab_en.png b/docs/img/admintab_en.png
diff --git a/docs/img/admintab_plug_2nd_de.png b/docs/img/admintab_plug_2nd_de.png
diff --git a/docs/img/admintab_plug_2nd_en.png b/docs/img/admintab_plug_2nd_en.png
diff --git a/docs/img/admintab_plug_de.png b/docs/img/admintab_plug_de.png
diff --git a/docs/img/admintab_plug_en.png b/docs/img/admintab_plug_en.png
diff --git a/docs/img/admintab_therm_de.png b/docs/img/admintab_therm_de.png
diff --git a/docs/img/admintab_therm_en.png b/docs/img/admintab_therm_en.png
diff --git a/docs/img/admintab_valve_de.png b/docs/img/admintab_valve_de.png
diff --git a/docs/img/admintab_valve_en.png b/docs/img/admintab_valve_en.png
diff --git a/io-package.json b/io-package.json
@@ -1,8 +1,20 @@
 {
 	"common": {
 		"name": "netatmo-energy",
-		"version": "1.2.2",
+		"version": "1.2.3",
 		"news": {
+			"1.2.3": {
+				"en": "Added status icons to plug",
+				"de": "Statussymbole zum Stecker hinzugefügt",
+				"ru": "Добавлены значки состояния для плагина",
+				"pt": "Adicionados ícones de status para conectar",
+				"nl": "Statuspictogrammen toegevoegd om aan te sluiten",
+				"fr": "Ajout d'icônes d'état à brancher",
+				"it": "Aggiunte icone di stato da collegare",
+				"es": "Se agregaron íconos de estado para conectar",
+				"pl": "Dodano ikony stanu do wtyczki",
+				"zh-cn": "添加了状态图标以插入"
+			},
 			"1.2.2": {
 				"en": "Added a slider to each valve to change the temperature and added some API requests to admin tab to transfer changes to the cloud",
 				"de": "Es wurde jedem Ventil ein Schieberegler hinzugefügt, um die Temperatur zu ändern, und einige API-Anforderungen zum Admin-Tab hinzugefügt, um Änderungen in die Cloud zu übertragen",