From 2212cbab4fea2f66b2736401a3f7f53f31bb898e Mon Sep 17 00:00:00 2001
From: HampusM <hampus@hampusmat.com>
Date: Tue, 31 May 2022 00:06:52 +0200
Subject: feat(master): client add get minion ips from backend

---
 master/client/src/components/G7Map.vue | 165 ++++++++++++++++++++++++++++-----
 master/client/vue.config.js            |  17 +++-
 2 files changed, 156 insertions(+), 26 deletions(-)

(limited to 'master/client')

diff --git a/master/client/src/components/G7Map.vue b/master/client/src/components/G7Map.vue
index 6a887b1..771756a 100644
--- a/master/client/src/components/G7Map.vue
+++ b/master/client/src/components/G7Map.vue
@@ -3,43 +3,161 @@
 		<img src="g7-map.svg">
 		<div class="rooms">
 			<span class="title">Rooms</span>
-			<ol>
+			<ul>
 				<li
 					:key="room"
-					v-for="room in rooms"
+					v-for="[index, room] in Object.entries(rooms)"
 				>
-					{{ room }}
+					{{ index }}. {{ room }}
 				</li>
-			</ol>
+			</ul>
+		</div>
+		<div>
+			{{ minion_data_arr }}
 		</div>
 	</div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, Ref, ref } from "vue";
+
+type MinionInfo = {
+	ip_address: string
+	position: number
+};
+
+type MinionInfoResponse = {
+	data: MinionInfo[]
+}
+
+type MinionTemperatureResponse = {
+    data: { temperature: number } | null
+    error: string | null
+}
+
+type MinionData = {
+	temperature: number
+	position: number
+}
+
+const rooms = {
+	1: "Studio / G3",
+	2: "Studio 1",
+	3: "Hall",
+	4: "Studio 2",
+	5: "Studio 3",
+	6: "Grupprum",
+	7: "Verkstad",
+	8: "Serverrum",
+	9: "Kurator",
+	10: "Pannrum",
+	11: "Toalett",
+	12: "Inspelningsbås",
+	13: "G2",
+	14: "Trapphus"
+};
 
 export default defineComponent(
 	{
 		name: "G7Map",
 		data() {
 			return {
-				rooms: [
-					"Studio / G3",
-					"Studio 1",
-					"Hall",
-					"Studio 2",
-					"Studio 3",
-					"Grupprum",
-					"Verkstad",
-					"Serverrum",
-					"Kurator",
-					"Pannrum",
-					"Toalett",
-					"Inspelningsbås",
-					"G2",
-					"Trapphus"
-				]
+				rooms: rooms
 			};
+		},
+		setup(props) {
+			const minion_data_arr: Ref<MinionData[]> = ref([]);
+
+			async function fetch_minion_ip_addresses() {
+				let response: Response;
+
+				const api_endpoint_url =
+					`${window.location.protocol}//${window.location.host}/api/v1/minions`;
+
+				try {
+					response = await fetch(api_endpoint_url);
+				}
+				catch (err) {
+					const error = err as Error;
+
+					throw Error(`Failed to fetch minion IP addresses. ${error.message}`);
+				}
+
+				const data = await response.json() as MinionInfoResponse;
+
+				if(!response.ok) {
+					throw Error(
+						"Failed to get minion IP addresses. Responded with status " +
+						`${response.status}`
+					);
+				}
+
+				return data.data;
+			}
+
+			async function fetch_minion_temperature(
+				minion_name: string,
+				minion_ip_address: string
+			) {
+				let response: Response;
+
+				try {
+					response = await fetch(`http://${minion_ip_address}`);
+				}
+				catch (err) {
+					const error = err as Error;
+
+					throw Error(
+						`Failed to fetch temperature for minion "${minion_name}". ` +
+                        `${error.message}`
+					);
+				}
+
+				const data = await response.json() as MinionTemperatureResponse;
+
+				if(!response.ok) {
+					if(data.error !== null) {
+						throw Error(
+							`Minion "${minion_name}" responded with status ` +
+                                `${response.status} and error "${data.error}"`
+						);
+					}
+
+					throw Error(
+						`Minion "${minion_name}" responded with status ` +
+                                `${response.status} and a unknown error`
+					);
+				}
+
+				if(data.data == null) {
+					throw Error(`Minion "${minion_name}" has no data in response`);
+				}
+
+				return data.data.temperature;
+			}
+
+			async function fetch_all_minion_data() {
+				const minion_info_arr = await fetch_minion_ip_addresses();
+
+				const minion_data_arr_buf: MinionData[] = [];
+
+				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_arr.value = minion_data_arr_buf;
+			}
+
+			return { minion_data_arr, fetch_all_minion_data };
+		},
+		created() {
+			this.fetch_all_minion_data();
 		}
 	}
 );
@@ -65,8 +183,9 @@ export default defineComponent(
     .rooms {
         min-width: 40%;
 
-        ol li {
-            line-height: 1.75em;
+        ul li {
+			line-height: 1.75em;
+			list-style: none;
         }
 
         .title {
diff --git a/master/client/vue.config.js b/master/client/vue.config.js
index 910e297..1f0e2b3 100644
--- a/master/client/vue.config.js
+++ b/master/client/vue.config.js
@@ -1,4 +1,15 @@
-const { defineConfig } = require('@vue/cli-service')
+const { defineConfig } = require("@vue/cli-service");
+
 module.exports = defineConfig({
-  transpileDependencies: true
-})
+	transpileDependencies: true,
+	devServer: {
+		host: "192.168.1.213",
+		port: 8080,
+		proxy: {
+			"^/api": {
+				target: "http://192.168.1.213:80",
+				changeOrigin: true
+			}
+		}
+	}
+});
-- 
cgit v1.2.3-18-g5258