diff options
| -rw-r--r-- | master/client/src/components/G7Map.vue | 73 |
1 files changed, 53 insertions, 20 deletions
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 { |