feat(master): add display single minion temperature reading

12 files changed, 185 insertions, 138 deletions

diff --git a/master/src/App.vue b/master/src/App.vue
index ec98c47..1638c18 100644
--- a/master/src/App.vue
+++ b/master/src/App.vue
@@ -1,30 +1,15 @@
 <template>
-  <nav>
-    <router-link to="/">Home</router-link> |
-    <router-link to="/about">About</router-link>
-  </nav>
-  <router-view/>
+	<router-view />
 </template>
 
 <style lang="scss">
+@use "scss/colors";
+@use "scss/fonts";
+
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
+    color: colors.$text;
+    background-color: colors.$background;
+    font-family: fonts.$primary;
 }
 
-nav {
-  padding: 30px;
-
-  a {
-    font-weight: bold;
-    color: #2c3e50;
-
-    &.router-link-exact-active {
-      color: #42b983;
-    }
-  }
-}
 </style>
diff --git a/master/src/assets/logo.png b/master/src/assets/logo.png
deleted file mode 100644
index f3d2503..0000000
--- a/master/src/assets/logo.png
+++ /dev/null
diff --git a/master/src/components/HelloWorld.vue b/master/src/components/HelloWorld.vue
deleted file mode 100644
index f68982b..0000000
--- a/master/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script lang="ts">
-import { Options, Vue } from 'vue-class-component'
-
-@Options({
-  props: {
-    msg: String
-  }
-})
-export default class HelloWorld extends Vue {
-  msg!: string
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>
diff --git a/master/src/components/MinionStatus.vue b/master/src/components/MinionStatus.vue
new file mode 100644
index 0000000..ec2564c
--- /dev/null
+++ b/master/src/components/MinionStatus.vue
@@ -0,0 +1,110 @@
+<template>
+	<div class="minion">
+		<span class="name">{{ name }}</span>
+		<span class="ip">{{ ip }}</span>
+		Temperature: {{ temperature }}
+	</div>
+</template>
+
+<script lang="ts">
+import { ref, defineComponent } from "vue";
+
+interface MinionResponseData {
+    data: { temperature: number } | null,
+    error: string | null
+}
+
+export default defineComponent(
+	{
+		name: "MinionStatus",
+		props: {
+			name: {
+				type: String,
+				required: true
+			},
+			ip: {
+				type: String,
+				required: true
+			}
+		},
+		setup(props) {
+			const temperature = ref("None");
+
+			async function fetch_temperature() {
+				let response: Response;
+
+				try {
+					response = await fetch(`http://${props.ip}`);
+				}
+				catch (err) {
+					const error = err as Error;
+
+					console.error(
+						`Failed to fetch temperature for minion "${props.name}". ` +
+                        `${error.message}`
+					);
+					return;
+				}
+
+				const data = await response.json() as MinionResponseData;
+
+				if(!response.ok) {
+					if(data.error !== null) {
+						console.error(
+							`Minion "${props.name}" responded with status ` +
+                                `${response.status} and error "${data.error}"`
+						);
+					}
+					else {
+						console.error(
+							`Minion "${props.name}" responded with status ` +
+                                `${response.status} and a unknown error`
+						);
+					}
+
+					return;
+				}
+
+				if(data.data == null) {
+					console.error(`Minion "${props.name}" has no data in response`);
+					return;
+				}
+
+				temperature.value = `${data.data.temperature}°C`;
+			}
+
+			return { temperature, fetch_temperature };
+		},
+		created() {
+			this.fetch_temperature();
+		}
+	}
+);
+</script>
+
+<style scoped lang="scss">
+@use "@/scss/colors";
+
+.minion {
+    background-color: lighten(colors.$background, 8%);
+    width: fit-content;
+    padding-top: 1em;
+    padding-bottom: 1.5em;
+    padding-left: 1.5em;
+    padding-right: 3em;
+    border: 1px solid lighten(colors.$background, 14%);
+    border-radius: 8px;
+
+    .name {
+        display: block;
+        font-size: 1.25rem;
+        font-weight: 700;
+        color: colors.$primary;
+        margin-bottom: 0.25em;
+    }
+
+    .ip {
+        display: block;
+    }
+}
+</style>
diff --git a/master/src/main.ts b/master/src/main.ts
index 3e79677..10ea69d 100644
--- a/master/src/main.ts
+++ b/master/src/main.ts
@@ -1,5 +1,5 @@
-import { createApp } from 'vue'
-import App from './App.vue'
-import router from './router'
+import { createApp } from "vue";
+import App from "./App.vue";
+import router from "./router";
 
-createApp(App).use(router).mount('#app')
+createApp(App).use(router).mount("#app");
diff --git a/master/src/router.ts b/master/src/router.ts
new file mode 100644
index 0000000..4c70eab
--- /dev/null
+++ b/master/src/router.ts
@@ -0,0 +1,17 @@
+import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
+import HomeView from "./views/Home.vue";
+
+const routes: Array<RouteRecordRaw> = [
+	{
+		path: "/",
+		name: "home",
+		component: HomeView
+	}
+];
+
+const router = createRouter({
+	history: createWebHashHistory(),
+	routes
+});
+
+export default router;
diff --git a/master/src/router/index.ts b/master/src/router/index.ts
deleted file mode 100644
index df8090e..0000000
--- a/master/src/router/index.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
-import HomeView from '../views/HomeView.vue'
-
-const routes: Array<RouteRecordRaw> = [
-  {
-    path: '/',
-    name: 'home',
-    component: HomeView
-  },
-  {
-    path: '/about',
-    name: 'about',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
-  }
-]
-
-const router = createRouter({
-  history: createWebHashHistory(),
-  routes
-})
-
-export default router
diff --git a/master/src/scss/_colors.scss b/master/src/scss/_colors.scss
new file mode 100644
index 0000000..d8bc4dd
--- /dev/null
+++ b/master/src/scss/_colors.scss
@@ -0,0 +1,3 @@
+$text: #ffffff;
+$background: #121212;
+$primary: #118AB2;
diff --git a/master/src/scss/_fonts.scss b/master/src/scss/_fonts.scss
new file mode 100644
index 0000000..72a9501
--- /dev/null
+++ b/master/src/scss/_fonts.scss
@@ -0,0 +1,3 @@
+@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');
+
+$primary: "Lato", sans-serif;
diff --git a/master/src/views/AboutView.vue b/master/src/views/AboutView.vue
deleted file mode 100644
index 3fa2807..0000000
--- a/master/src/views/AboutView.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>
diff --git a/master/src/views/Home.vue b/master/src/views/Home.vue
new file mode 100644
index 0000000..180383f
--- /dev/null
+++ b/master/src/views/Home.vue
@@ -0,0 +1,41 @@
+<template>
+	<div class="home">
+		<div id="title-container">
+			<span>Gymnasiearbete</span>
+		</div>
+		<div id="minion-list">
+			<Minion
+				name="Skyddsling 1"
+				ip="10.0.1.179"
+			/>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from "vue-class-component";
+import Minion from "@/components/MinionStatus.vue";
+
+@Options({
+	components: {
+		Minion
+	}
+})
+export default class HomeView extends Vue {}
+</script>
+
+<style scoped lang="scss">
+#title-container {
+    display: flex;
+    justify-content: center;
+    margin-top: 2em;
+
+    span {
+        font-size: 2.5rem;
+    }
+}
+
+#minion-list {
+    margin: 3em;
+}
+</style>
diff --git a/master/src/views/HomeView.vue b/master/src/views/HomeView.vue
deleted file mode 100644
index 8e628bd..0000000
--- a/master/src/views/HomeView.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
-  </div>
-</template>
-
-<script lang="ts">
-import { Options, Vue } from 'vue-class-component'
-import HelloWorld from '@/components/HelloWorld.vue' // @ is an alias to /src
-
-@Options({
-  components: {
-    HelloWorld
-  }
-})
-export default class HomeView extends Vue {}
-</script>