diff options
Diffstat (limited to 'master/src/components')
| -rw-r--r-- | master/src/components/HelloWorld.vue | 64 | ||||
| -rw-r--r-- | master/src/components/MinionStatus.vue | 110 |
2 files changed, 110 insertions, 64 deletions
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> |