feat(web): radio ws alert

ItsNotGoodName · Apr 28, 2022 · ea8afbd · ea8afbd
1 parent 5070de5
commit ea8afbd
Show file tree

Hide file tree

Showing 13 changed files with 65 additions and 47 deletions.
diff --git a/left/web/src/App.vue b/left/web/src/App.vue
@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import { ref } from "vue";
 
 import RadioStatus from "./components/RadioStatus.vue";
@@ -20,54 +20,70 @@ const setPage = (value: string) => {
 
 const radioUUID = ref("");
 const { data: radios, isLoading: radiosLoading, refetch: radiosRefetch } = useRadiosQuery();
-const { connecting, radio } = useWS(radioUUID);
-
+const { connecting, disconnected, reconnect, radio } = useWS(radioUUID);
 </script>
 
 <template>
   <div class="h-screen">
+    <!-- Top Navbar -->
     <div class="navbar bg-base-200 fixed top-0 flex gap-2 z-50 border-b-2 border-b-base-300">
       <radio-status :radio="radio" :loading="connecting" />
       <radio-title class="flex-grow w-full" :radio="radio" :loading="connecting" />
     </div>
     <div class="mx-5 pt-20 pb-36">
-      <div v-if="page == PAGE_HOME && radio"
-        class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+      <!-- Homepage -->
+      <div v-if="page == PAGE_HOME && radio" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
         <preset :key="p.number" v-for="p of radio.presets" :selected="radio.preset_number == p.number" :preset="p" />
       </div>
+      <!-- Edit Presets -->
       <div v-else-if="page == PAGE_EDIT">
         Hello World
       </div>
     </div>
-    <div
-      class="navbar bg-base-200 fixed bottom-0 flex flex-row-reverse flex-wrap gap-2 pb-4 px-4 z-50 border-t-2 border-t-base-300">
-      <!--- Radio Toolbar -->
-      <div v-if="radio" class="flex-grow md:flex-grow-0 flex gap-2">
-        <radio-power class="flex-grow" :radio="radio" />
-        <radio-volume :radio="radio" />
-        <radio-audiosource :radio="radio" />
-        <radio-name :radio="radio" />
-      </div>
-      <!--- Radios Toolbar -->
-      <div class="grow flex gap-2">
-        <hamburger-menu :page="page" :set-page="setPage" />
-        <div class="grow flex">
-          <div class="tooltip" data-tip="Discover">
-            <d-button class="btn-primary rounded-none rounded-l-md" aria-label="Discover">
-              <v-icon name="fa-search" />
-            </d-button>
+    <!-- Bottom -->
+    <div class="fixed bottom-0 w-full space-y-2">
+      <!--- Radio Websocket Disconnect Alert -->
+      <div v-if="disconnected" class="ml-auto px-2 max-w-screen-sm">
+        <div class="alert shadow-lg">
+          <div>
+            <v-icon class="text-info" name="fa-info-circle" />
+            <span>Disconnected from server.</span>
+          </div>
+          <div class="flex-none">
+            <d-button class="btn-sm btn-primary" :loading="connecting" @click="reconnect">Reconnect</d-button>
           </div>
-          <select v-model="radioUUID" :disabled="radiosLoading" class="select select-primary rounded-none flex-grow">
-            <option disabled selected value="">Select Radio</option>
-            <template v-if="radios">
-              <option :key="r.uuid" v-for="r in radios" :value="r.uuid">{{ r.name }}</option>
-            </template>
-          </select>
-          <div class="tooltip" data-tip="Refresh">
-            <d-button class="btn-primary rounded-none rounded-r-md" aria-label="Refresh" :loading="radiosLoading"
-              @click="() => radiosRefetch()">
-              <v-icon name="fa-redo" />
-            </d-button>
+        </div>
+      </div>
+      <!--- Navbar -->
+      <div class="navbar bg-base-200 flex flex-row-reverse flex-wrap gap-2 pb-4 px-4 z-50 border-t-2 border-t-base-300">
+        <!--- Radio Toolbar -->
+        <div v-if="radio" class="flex-grow md:flex-grow-0 flex gap-2">
+          <radio-power class="flex-grow" :radio="radio" />
+          <radio-volume :radio="radio" />
+          <radio-audiosource :radio="radio" />
+          <radio-name :radio="radio" />
+        </div>
+        <!--- Radios Toolbar -->
+        <div class="grow flex gap-2">
+          <hamburger-menu :page="page" :set-page="setPage" />
+          <div class="grow flex">
+            <div class="tooltip" data-tip="Discover">
+              <d-button class="btn-primary rounded-none rounded-l-md" aria-label="Discover">
+                <v-icon name="fa-search" />
+              </d-button>
+            </div>
+            <select v-model="radioUUID" :disabled="radiosLoading" class="select select-primary rounded-none flex-grow">
+              <option disabled selected value="">Select Radio</option>
+              <template v-if="radios">
+                <option :key="r.uuid" v-for="r in radios" :value="r.uuid">{{ r.name }}</option>
+              </template>
+            </select>
+            <div class="tooltip" data-tip="Refresh">
+              <d-button class="btn-primary rounded-none rounded-r-md" aria-label="Refresh" :loading="radiosLoading"
+                @click="() => radiosRefetch()">
+                <v-icon name="fa-redo" />
+              </d-button>
+            </div>
           </div>
         </div>
       </div>

diff --git a/left/web/src/components/DaisyUI/DButton.vue b/left/web/src/components/DaisyUI/DButton.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const { loading } = defineProps({
+defineProps({
   loading: {
     type: Boolean,
     default: false,

diff --git a/left/web/src/components/DaisyUI/DDropdownButton.vue b/left/web/src/components/DaisyUI/DDropdownButton.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const { loading } = defineProps({
+defineProps({
   loading: {
     type: Boolean,
     default: false,

diff --git a/left/web/src/components/HamburgerMenu.vue b/left/web/src/components/HamburgerMenu.vue
@@ -4,7 +4,7 @@ import { PAGE_HOME, PAGE_EDIT } from "../constants"
 
 import DDropdownButton from './DaisyUI/DDropdownButton.vue';
 
-const { version, versionLoading, page, setPage } = defineProps({
+defineProps({
   version: {
     type: String,
     default: "",

diff --git a/left/web/src/components/Preset.vue b/left/web/src/components/Preset.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import DButton from "./DaisyUI/DButton.vue";
 
-const { preset, selected } = defineProps({
+defineProps({
   preset: {
     type: Object as () => RadioPreset,
     required: true,

diff --git a/left/web/src/components/RadioAudiosource.vue b/left/web/src/components/RadioAudiosource.vue
@@ -4,7 +4,7 @@ import { ref } from 'vue';
 import DButton from './DaisyUI/DButton.vue';
 import DDropdownButton from './DaisyUI/DDropdownButton.vue';
 
-const { radio } = defineProps({
+defineProps({
   radio: {
     type: Object as () => Radio,
     required: true,

diff --git a/left/web/src/components/RadioName.vue b/left/web/src/components/RadioName.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import DDropdownButton from './DaisyUI/DDropdownButton.vue';
 
-const { radio } = defineProps({
+defineProps({
   radio: {
     type: Object as () => Radio,
     required: true,

diff --git a/left/web/src/components/RadioPower.vue b/left/web/src/components/RadioPower.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import DButton from "./DaisyUI/DButton.vue";
 
-const { radio } = defineProps({
+defineProps({
   radio: {
     type: Object as () => Radio,
     required: true,

diff --git a/left/web/src/components/RadioStatus.vue b/left/web/src/components/RadioStatus.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import { computed } from "vue"
 import DButton from "./DaisyUI/DButton.vue";
 
 import { STATUS_CONNECTING, STATUS_PLAYING, STATUS_STOPPED } from "../constants";
 
-const props = defineProps({
+defineProps({
   radio: {
     type: Object as () => Radio,
     default: { status: "Unknown" }

diff --git a/left/web/src/components/RadioTitle.vue b/left/web/src/components/RadioTitle.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import DDropdownButton from './DaisyUI/DDropdownButton.vue';
 
-const { radio, loading } = defineProps({
+defineProps({
   radio: {
     type: Object as () => Radio,
     default: { preset_number: 0 }

diff --git a/left/web/src/components/RadioVolume.vue b/left/web/src/components/RadioVolume.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import DButton from "./DaisyUI/DButton.vue";
 
-const { radio } = defineProps({
+defineProps({
   radio: {
     type: Object as () => Radio,
     required: true,

diff --git a/left/web/src/hooks/ws.ts b/left/web/src/hooks/ws.ts
@@ -13,6 +13,7 @@ const unsubscribe = (ws: WebSocket) => {
 export function useWS(uuid: Ref<string>) {
   const connecting = ref(true);
   const connected = ref(false);
+  const disconnected = ref(false);
   const radio = ref<Radio | undefined>(undefined);
 
   const connect = () => {
@@ -22,6 +23,7 @@ export function useWS(uuid: Ref<string>) {
     ws.addEventListener("open", () => {
       connecting.value = false;
       connected.value = true;
+      disconnected.value = false;
 
       if (uuid.value) {
         subscribe(ws, uuid.value);
@@ -40,6 +42,7 @@ export function useWS(uuid: Ref<string>) {
     ws.addEventListener("close", () => {
       connecting.value = false
       connected.value = false
+      disconnected.value = true;
       radio.value = undefined;
 
       setTimeout(() => reconnect(), 5000);
@@ -71,5 +74,5 @@ export function useWS(uuid: Ref<string>) {
     }
   })
 
-  return { radio, connecting, connected, reconnect }
+  return { radio, connecting, connected, disconnected, reconnect }
 }
diff --git a/left/web/src/main.ts b/left/web/src/main.ts
@@ -5,9 +5,9 @@ import './index.css'
 import { VueQueryPlugin } from "vue-query";
 
 import { OhVueIcon, addIcons } from "oh-vue-icons";
-import { FaPlay, FaStop, FaSync, FaQuestion, FaSearch, FaRedo, FaPowerOff, FaVolumeDown, FaVolumeUp, MdRadio, FaVolumeMute, FaEdit, FaItunesNote, FaBars, FaGithub, FaHome, FaTag, FaSpinner } from "oh-vue-icons/icons";
+import { FaPlay, FaStop, FaSync, FaQuestion, FaSearch, FaRedo, FaPowerOff, FaVolumeDown, FaVolumeUp, MdRadio, FaVolumeMute, FaEdit, FaItunesNote, FaBars, FaGithub, FaHome, FaTag, FaSpinner, FaInfoCircle } from "oh-vue-icons/icons";
 
-addIcons(FaPlay, FaStop, FaSync, FaQuestion, FaSearch, FaRedo, FaPowerOff, FaVolumeDown, FaVolumeUp, MdRadio, FaVolumeMute, FaEdit, FaItunesNote, FaBars, FaGithub, FaHome, FaTag, FaSpinner);
+addIcons(FaPlay, FaStop, FaSync, FaQuestion, FaSearch, FaRedo, FaPowerOff, FaVolumeDown, FaVolumeUp, MdRadio, FaVolumeMute, FaEdit, FaItunesNote, FaBars, FaGithub, FaHome, FaTag, FaSpinner, FaInfoCircle);
 
 createApp(App)
   .use(VueQueryPlugin)