From 5774c1aee25530baca375c25e2c5ecc2e65af0c2 Mon Sep 17 00:00:00 2001
From: HampusM <hampus@hampusmat.com>
Date: Tue, 31 May 2022 12:05:41 +0200
Subject: feat(master): client add temperatures to rooms

---
 master/client/src/components/G7Map.vue | 73 ++++++++++++++++++++++++----------
 1 file changed, 53 insertions(+), 20 deletions(-)

(limited to 'master')

diff --git a/master/client/src/components/G7Map.vue b/master/client/src/components/G7Map.vue
index 771756a..626c67f 100644
--- a/master/client/src/components/G7Map.vue
+++ b/master/client/src/components/G7Map.vue
@@ -5,16 +5,19 @@
 			<span class="title">Rooms</span>
 			<ul>
 				<li
-					:key="room"
-					v-for="[index, room] in Object.entries(rooms)"
+					:key="room_nr"
+					v-for="[room_nr, room] in Object.entries(rooms)"
 				>
-					{{ index }}. {{ room }}
+					<span class="room-nr">{{ room_nr }}. {{ room }}</span>
+					<span
+						:style="{color: get_temperature_color(minion_data_map[room_nr])}"
+						v-if="minion_data_map[room_nr] !== undefined"
+					>
+						{{ minion_data_map[room_nr] }}°C
+					</span>
 				</li>
 			</ul>
 		</div>
-		<div>
-			{{ minion_data_arr }}
-		</div>
 	</div>
 </template>
 
@@ -35,11 +38,6 @@ type MinionTemperatureResponse = {
     error: string | null
 }
 
-type MinionData = {
-	temperature: number
-	position: number
-}
-
 const rooms = {
 	1: "Studio / G3",
 	2: "Studio 1",
@@ -57,6 +55,15 @@ const rooms = {
 	14: "Trapphus"
 };
 
+const temperature_colors = {
+	extremly_hot: "#d00000",
+	hot: "#dc2f02",
+	mildly_hot: "#e85d04",
+	mild: "#52b69a",
+	cold: "#0077b6",
+	freezing_cold: "#168aad"
+};
+
 export default defineComponent(
 	{
 		name: "G7Map",
@@ -65,8 +72,33 @@ export default defineComponent(
 				rooms: rooms
 			};
 		},
+		methods: {
+			get_temperature_color(temperature: number) {
+				if(temperature < 10) {
+					return temperature_colors.freezing_cold;
+				}
+
+				if(temperature < 20) {
+					return temperature_colors.cold;
+				}
+
+				if(temperature > 27) {
+					return temperature_colors.mildly_hot;
+				}
+
+				if(temperature > 31) {
+					return temperature_colors.hot;
+				}
+
+				if(temperature > 38) {
+					return temperature_colors.extremly_hot;
+				}
+
+				return temperature_colors.mild;
+			}
+		},
 		setup(props) {
-			const minion_data_arr: Ref<MinionData[]> = ref([]);
+			const minion_data_map: Ref<Record<number, number>> = ref({});
 
 			async function fetch_minion_ip_addresses() {
 				let response: Response;
@@ -139,22 +171,19 @@ export default defineComponent(
 			async function fetch_all_minion_data() {
 				const minion_info_arr = await fetch_minion_ip_addresses();
 
-				const minion_data_arr_buf: MinionData[] = [];
+				const minion_data_map_buf: Record<number, number> = {};
 
 				for(const minion_info of minion_info_arr) {
 					const temperature =
 						await fetch_minion_temperature("lol", minion_info.ip_address);
 
-					minion_data_arr_buf.push({
-						temperature: temperature,
-						position: minion_info.position
-					});
+					minion_data_map_buf[minion_info.position] = temperature;
 				}
 
-				minion_data_arr.value = minion_data_arr_buf;
+				minion_data_map.value = minion_data_map_buf;
 			}
 
-			return { minion_data_arr, fetch_all_minion_data };
+			return { minion_data_map, fetch_all_minion_data };
 		},
 		created() {
 			this.fetch_all_minion_data();
@@ -184,8 +213,12 @@ export default defineComponent(
         min-width: 40%;
 
         ul li {
-			line-height: 1.75em;
+			line-height: 2.25em;
 			list-style: none;
+
+            .room-nr {
+                margin-right: 1.5em;
+            }
         }
 
         .title {
-- 
cgit v1.2.3-18-g5258