feat: refactor and add toast

web/package.json

@@ -10,6 +10,7 @@
     "@fortawesome/fontawesome-free": "^5.15.4",
     "bulma": "^0.9.3",
     "vue": "^3.2.25",
+    "vue-toastification": "^2.0.0-rc.5",
     "vuex": "^4.0.2"
   },
   "devDependencies": {

web/src/App.vue

@@ -1,26 +1,32 @@
 <template>
-  <div>
-    <NavTop />
-    <Notifications />
-    <MainBody />
-    <NavBottom />
+  <NavTop />
+  <div class="container nav-margin px-2">
+    <Edit v-if="store.state.page == 'edit'" />
+    <Home v-else />
   </div>
+  <NavBottom />
 </template>
 
 <script setup>
-import { onBeforeMount } from "vue";
 import { useStore } from "vuex";
+import { onMounted } from "vue";
 
 import NavTop from "./components/NavTop/index.vue";
-import MainBody from "./components/MainBody.vue";
 import NavBottom from "./components/NavBottom/index.vue";
-import Notifications from "./components/Notifications.vue";
+
+import Home from "./views/Home.vue"
+import Edit from "./views/Edit.vue"
 
 const store = useStore();
 
-onBeforeMount(() => {
+onMounted(() => {
   store.dispatch("initRadio");
 });
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.nav-margin {
+  margin-top: 1rem;
+  margin-bottom: 6rem;
+}
+</style>

web/src/api/index.js

@@ -50,9 +50,9 @@ export default {
     );
   },
   getRadioWS(uuid) {
-    if (uuid == undefined || uuid == "") {
-      return new WebSocket(WS_URL + "/v1/radio/ws");
+    if (uuid) {
+      return new WebSocket(WS_URL + "/v1/radio/ws?uuid=" + uuid);
     }
-    return new WebSocket(WS_URL + "/v1/radio/ws?uuid=" + uuid);
+    return new WebSocket(WS_URL + "/v1/radio/ws");
   },
 };

web/src/components/NavBottom/RadioControl.vue

@@ -1,10 +1,9 @@
 <template>
   <div class="buttons has-addons is-flex">
-    <RadioVolumeChange title="Volume Down" :change="-5" icon="fa-volume-down" />
-    <RadioVolume />
-    <RadioVolumeChange title="Volume Up" :change="5" icon="fa-volume-up" />
-    <RadioRefresh />
-    <RadioPower class="is-flex-grow-1" />
+    <radio-volume-change-button title="Volume Down" :change="-5" icon="fa-volume-down" />
+    <radio-volume-button />
+    <radio-volume-change-button title="Volume Up" :change="5" icon="fa-volume-up" />
+    <radio-power-button class="is-flex-grow-1" />
   </div>
 </template>
 
@@ -13,19 +12,18 @@ import { mapState } from "vuex";
 
 import BButton from "../Bulma/BButton.vue";
 import BIcon from "../Bulma/BIcon.vue";
-import RadioPower from "./RadioPower.vue";
-import RadioRefresh from "./RadioRefresh.vue";
-import RadioVolume from "./RadioVolume.vue";
-import RadioVolumeChange from "./RadioVolumeChange.vue";
+
+import RadioPowerButton from "../RadioPowerButton.vue";
+import RadioVolumeButton from "../RadioVolumeButton.vue";
+import RadioVolumeChangeButton from "../RadioVolumeChangeButton.vue";
 
 export default {
   components: {
     BButton,
     BIcon,
-    RadioPower,
-    RadioRefresh,
-    RadioVolume,
-    RadioVolumeChange,
+    RadioPowerButton,
+    RadioVolumeButton,
+    RadioVolumeChangeButton,
   },
   computed: {
     ...mapState({

web/src/components/NavBottom/RadioSelect.vue

@@ -3,7 +3,7 @@
     <div class="control">
       <b-button
         title="Toggle Page"
-        :class="{ 'is-info': page === 'play' }"
+        :class="[(page ? 'is-success' : 'is-info')]"
         @click="togglePage"
       >
         <b-icon icon="fa-bars" />
@@ -20,21 +20,13 @@
       </b-button>
     </div>
     <div class="control is-flex-grow-1">
-      <b-select
-        class="is-fullwidth"
-        v-model="radioUUID"
-        :loading="radiosLoading"
-      >
-        <option selected disabled hidden value="">Select Radio</option>
-        <option v-for="radio in radios" :value="radio.uuid">
-          {{ radio.name }}
-        </option>
+      <b-select class="is-fullwidth" v-model="radioUUID" :loading="radiosLoading">
+        <option selected disabled hidden value>Select Radio</option>
+        <option v-for="radio in radios" :value="radio.uuid">{{ radio.name }}</option>
       </b-select>
     </div>
     <div class="control">
-      <b-button title="List" :loading="radiosLoading" @click="listRadios">
-        <b-icon icon="fa-arrow-down"></b-icon>
-      </b-button>
+      <radio-refresh-button />
     </div>
   </div>
 </template>
@@ -46,22 +38,25 @@ import BButton from "../Bulma/BButton.vue";
 import BIcon from "../Bulma/BIcon.vue";
 import BSelect from "../Bulma/BSelect.vue";
 
+import RadioRefreshButton from "../RadioRefreshButton.vue";
+
 export default {
   components: {
     BButton,
     BIcon,
     BSelect,
+    RadioRefreshButton
   },
   methods: {
-    ...mapActions(["togglePage", "discoverRadios", "listRadios"]),
+    ...mapActions(["discoverRadios", "togglePage"]),
   },
   computed: {
     ...mapGetters(["radioSelected"]),
     ...mapState({
+      page: (state) => state.page,
       radios: (state) => state.r.radios,
       radiosLoading: (state) => state.r.radiosLoading,
       radiosDiscovering: (state) => state.r.radiosDiscovering,
-      page: (state) => state.page,
     }),
     radioUUID: {
       get() {

web/src/components/NavBottom/index.vue

@@ -1,15 +1,11 @@
 <template>
-  <nav
-    class="navbar is-fixed-bottom py-2"
-    role="navigation"
-    aria-label="bottom navigation"
-  >
-    <div class="is-flex is-flex-wrap-wrap" style="width: 100%">
+  <nav class="navbar is-fixed-bottom py-2" role="navigation" aria-label="bottom navigation">
+    <div class="is-flex is-flex-wrap-wrap full-width">
       <div class="is-flex-grow-2 p-2">
-        <RadioSelect />
+        <radio-select />
       </div>
       <div v-if="radioSelected" class="is-flex-grow-1 p-2">
-        <RadioControl />
+        <radio-control />
       </div>
     </div>
   </nav>
@@ -36,4 +32,7 @@ export default {
 nav {
   border-top: 1px solid #ddd;
 }
+.full-width {
+  width: 100%;
+}
 </style>

web/src/components/NavTop/RadioState.vue

@@ -1,10 +1,9 @@
 <template>
   <b-button
     :class="state.buttonClass"
-    :loading="!radioLoaded && radioSelected"
+    :loading="!radioReady && radioSelected"
     :title="state.title"
     class="is-rounded"
-    style="width: 0%"
   >
     <b-icon :icon="state.iconClass" />
   </b-button>
@@ -22,7 +21,7 @@ export default {
     BIcon,
   },
   computed: {
-    ...mapGetters(["radioLoaded", "radioSelected"]),
+    ...mapGetters(["radioReady", "radioSelected"]),
     ...mapState({
       radio: (state) => state.r.radio,
     }),
@@ -57,4 +56,8 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+button {
+  width: 0%;
+}
+</style>

web/src/components/NavTop/RadioTitle.vue

@@ -1,43 +1,31 @@
 <template>
-  <div
-    class="dropdown"
-    :class="{ 'is-active': isActive }"
-    @mouseleave="isActive = false"
-  >
+  <div class="dropdown" :class="{ 'is-active': isActive }" @mouseleave="isActive = false">
     <div class="dropdown-trigger is-flex-grow-1">
       <b-button
         :title="radio.title"
-        :loading="!radioLoaded && radioSelected"
+        :loading="!radioReady && radioSelected"
         class="is-info is-justify-content-flex-start is-fullwidth"
         aria-haspopup="true"
         aria-controls="title-dropdown-menu"
         @click="isActive = !isActive"
       >
         <b-tag class="mr-2">{{ radio.preset || 0 }}</b-tag>
-        <span>
-          {{ radio.title }}
-        </span>
+        <span>{{ radio.title }}</span>
       </b-button>
     </div>
     <div class="dropdown-menu" id="title-dropdown-menu" role="menu">
       <div class="dropdown-content">
         <div class="dropdown-item">
           <b-tag class="is-warning mr-2">Metadata</b-tag>
-          <span>
-            {{ radio.metadata }}
-          </span>
+          <span>{{ radio.metadata }}</span>
         </div>
         <div class="dropdown-item">
           <b-tag class="is-info mr-2">URL</b-tag>
-          <a :href="radio.url">
-            {{ radio.url }}
-          </a>
+          <a :href="radio.url">{{ radio.url }}</a>
         </div>
         <div class="dropdown-item">
           <b-tag class="is-success mr-2">New URL</b-tag>
-          <a :href="radio.newURL">
-            {{ radio.newURL }}
-          </a>
+          <a :href="radio.newURL">{{ radio.newURL }}</a>
         </div>
       </div>
     </div>
@@ -61,7 +49,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(["radioLoaded", "radioSelected"]),
+    ...mapGetters(["radioReady", "radioSelected"]),
     ...mapState({
       radio: (state) => state.r.radio,
     }),