diff options
author | HampusM <hampus@hampusmat.com> | 2022-05-30 14:43:59 +0200 |
---|---|---|
committer | HampusM <hampus@hampusmat.com> | 2022-05-30 14:43:59 +0200 |
commit | 4d2a1e5adfc8688bc585c96e959470d45f655438 (patch) | |
tree | fd5ee2742129584400a7d6aced0d4c2ea6e5535d /master/src/components | |
parent | 72e3bb715157fb5aabcbc889f4f7143bf87b90f5 (diff) |
chore(master): add client folder
Diffstat (limited to 'master/src/components')
-rw-r--r-- | master/src/components/G7Map.vue | 85 | ||||
-rw-r--r-- | master/src/components/MinionStatus.vue | 110 |
2 files changed, 0 insertions, 195 deletions
diff --git a/master/src/components/G7Map.vue b/master/src/components/G7Map.vue deleted file mode 100644 index 6a887b1..0000000 --- a/master/src/components/G7Map.vue +++ /dev/null @@ -1,85 +0,0 @@ -<template> - <div class="map-wrapper"> - <img src="g7-map.svg"> - <div class="rooms"> - <span class="title">Rooms</span> - <ol> - <li - :key="room" - v-for="room in rooms" - > - {{ room }} - </li> - </ol> - </div> - </div> -</template> - -<script lang="ts"> -import { defineComponent } from "vue"; - -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" - ] - }; - } - } -); -</script> - -<style scoped lang="scss"> -@use "sass:map"; - -@use "@/scss/colors"; - -@import "@/scss/breakpoints"; - -.map-wrapper { - display: flex; - flex-wrap: wrap; - row-gap: 5em; - column-gap: 10em; - - img { - max-width: 50%; - } - - .rooms { - min-width: 40%; - - ol li { - line-height: 1.75em; - } - - .title { - font-size: 2rem; - font-weight: 700; - color: colors.$primary; - } - } -} - -@media (max-width: map.get($breakpoints, "xl")) { - .map-wrapper img { - max-width: 90%; - } -} -</style> diff --git a/master/src/components/MinionStatus.vue b/master/src/components/MinionStatus.vue deleted file mode 100644 index ec2564c..0000000 --- a/master/src/components/MinionStatus.vue +++ /dev/null @@ -1,110 +0,0 @@ -<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> |