feat(web): mockup add hamburger menu

ItsNotGoodName · Apr 27, 2022 · cb8ca12 · cb8ca12
1 parent fa92887
commit cb8ca12
Show file tree

Hide file tree

Showing 7 changed files with 114 additions and 26 deletions.
diff --git a/left/web/src/App.vue b/left/web/src/App.vue
@@ -8,11 +8,15 @@ import RadioPower from "./components/RadioPower.vue";
 import RadioName from "./components/RadioName.vue";
 import DButton from "./components/DaisyUI/DButton.vue";
 import RadioAudiosource from "./components/RadioAudiosource.vue";
+import HamburgerMenu from "./components/HamburgerMenu.vue";
+import { PAGE_HOME, PAGE_EDIT } from "./constants";
 
-const edit = ref(false)
+const page = ref(PAGE_HOME);
 const status = ref("")
 const audiosources = ref(["Aux", "Internet radio"])
 const audiosource = ref("")
+const version = ref("")
+const versionLoading = ref(true)
 
 const radio = ref({
   name: "Living Room",
@@ -24,23 +28,28 @@ onMounted(() => {
   setTimeout(() => { status.value = "Stopped" }, 2000);
   setTimeout(() => { status.value = "Connecting" }, 4000);
   setTimeout(() => { status.value = "Playing" }, 6000);
+  setTimeout(() => { version.value = "v0.9.2"; versionLoading.value = false }, 2000);
 })
 
 const setAudiosource = async (value: string) => {
   await new Promise(resolve => setTimeout(resolve, 1000))
   audiosource.value = value
 }
+
+const setPage = (value: string) => {
+  page.value = value
+}
 </script>
 
 <template>
   <div class="h-screen">
     <div class="navbar bg-base-200 fixed top-0 flex gap-2 z-50 border-b-2 border-b-base-300">
       <radio-status :status="status" />
-      <radio-title class="flex-grow w-full" title="Lorem Ipsum" url="http://www.google.com"
+      <radio-title class="flex-grow w-full" title="Preset 0" title_new="Lorem Ipsum" url="http://www.google.com"
         url_new="http://example.com" />
     </div>
     <div class="mx-5 pt-20 pb-36">
-      <div v-if="!edit" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+      <div v-if="page == PAGE_HOME" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
         <radio-preset :selected="true" :number="1" title="Preset 1" />
         <radio-preset :number="2" title="Preset 2" />
         <radio-preset :number="3" title="Preset 3" />
@@ -53,7 +62,7 @@ const setAudiosource = async (value: string) => {
         <radio-preset :number="10" title="Preset 11" />
         <radio-preset :number="11" title="Preset 11" />
       </div>
-      <div v-else>
+      <div v-else-if="page == PAGE_EDIT">
         Hello World
       </div>
     </div>
@@ -79,11 +88,7 @@ const setAudiosource = async (value: string) => {
       </div>
       <!--- Radios Toolbar -->
       <div class="grow flex gap-2">
-        <div class="tooltip" data-tip="Edit Presets">
-          <d-button :class="{ 'btn-success': edit }" aria-label="Edit Presets" @click="edit = !edit">
-            <v-icon name="fa-edit" />
-          </d-button>
-        </div>
+        <hamburger-menu :version="version" :version-loading="versionLoading" :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">

diff --git a/left/web/src/components/HamburgerMenu.vue b/left/web/src/components/HamburgerMenu.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { PropType } from 'vue';
+import { PAGE_HOME, PAGE_EDIT } from "../constants"
+
+import DDropdownButton from './DaisyUI/DDropdownButton.vue';
+
+const { version, versionLoading, page, setPage } = defineProps({
+  version: {
+    type: String,
+    default: "",
+  },
+  versionLoading: {
+    type: Boolean,
+    default: false,
+  },
+  page: {
+    type: String,
+    default: "",
+  },
+  setPage: {
+    type: Function as PropType<(page: string) => void>,
+    default: () => { },
+  },
+});
+</script>
+
+<template>
+  <div class="dropdown dropdown-top">
+    <d-dropdown-button :class="{ 'btn-success': page != PAGE_HOME }">
+      <v-icon name="fa-bars" />
+    </d-dropdown-button>
+    <ul tabindex="0" class="menu menu-compact dropdown-content mb-2 p-2 shadow bg-base-200 rounded-box w-52">
+      <li>
+        <a :class="{ 'active': page == PAGE_HOME }" @click="() => setPage(PAGE_HOME)">
+          <v-icon name="fa-home" />Homepage
+        </a>
+      </li>
+      <li>
+        <a :class="{ 'active': page == PAGE_EDIT }" @click="() => setPage(PAGE_EDIT)">
+          <v-icon name="fa-edit" />Edit Presets
+        </a>
+      </li>
+      <li>
+        <a href="https://github.com/ItsNotGoodName/reciva-web-remote">
+          <v-icon name="fa-github" />Source Code
+        </a>
+      </li>
+      <li v-if="versionLoading">
+        <a>
+          <v-icon name="fa-spinner" animation="spin" />Version
+        </a>
+      </li>
+      <li v-else-if="version">
+        <a :href="'https://github.com/ItsNotGoodName/reciva-web-remote/releases/tag/' + version">
+          <v-icon name="fa-tag" />
+          {{ version }}
+        </a>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style>
+</style>
diff --git a/left/web/src/components/RadioAudiosource.vue b/left/web/src/components/RadioAudiosource.vue
@@ -38,7 +38,8 @@ const onClick = (a: string) => {
     <d-dropdown-button :class="{ 'btn-secondary': audiosource }" aria-label="Audiosource">
       <v-icon name="fa-itunes-note" />
     </d-dropdown-button>
-    <ul tabindex="0" class="menu card card-compact bg-base-200 p-2 menu-compact dropdown-content space-y-2 mb-2 w-52">
+    <ul tabindex="0" class="menu menu-compact dropdown-content mb-2 p-2 shadow bg-base-200 rounded-box w-52 space-y-2">
+      <span class="mx-auto">Audio Source</span>
       <d-button :loading="loading" :key="a" v-for="a in audiosources" :class="{ 'btn-secondary': a == audiosource }"
         @click="() => onClick(a)">
         {{ a }}

diff --git a/left/web/src/components/RadioStatus.vue b/left/web/src/components/RadioStatus.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import DButton from "./DaisyUI/DButton.vue";
 
+import { STATUS_CONNECTING, STATUS_PLAYING, STATUS_STOPPED } from "../constants";
+
 const { status } = defineProps({
   status: {
     type: String,
@@ -11,13 +13,13 @@ const { status } = defineProps({
 
 <template>
   <div class="tooltip tooltip-bottom" :data-tip="status">
-    <d-button v-if="status == 'Connecting'" class="btn-circle btn-warning" :aria-label="status">
+    <d-button v-if="status == STATUS_CONNECTING" class="btn-circle btn-warning" :aria-label="status">
       <v-icon name="fa-sync" animation="spin" />
     </d-button>
-    <d-button v-else-if="status == 'Playing'" class="btn-circle btn-success pl-1" :aria-label="status">
+    <d-button v-else-if="status == STATUS_PLAYING" class="btn-circle btn-success pl-1" :aria-label="status">
       <v-icon name="fa-play" />
     </d-button>
-    <d-button v-else-if="status == 'Stopped'" class="btn-circle btn-error" :aria-label="status">
+    <d-button v-else-if="status == STATUS_STOPPED" class="btn-circle btn-error" :aria-label="status">
       <v-icon name="fa-stop" />
     </d-button>
     <d-button v-else class="btn-circle no-animation btn-info" :aria-label="status">

diff --git a/left/web/src/components/RadioTitle.vue b/left/web/src/components/RadioTitle.vue
@@ -1,11 +1,15 @@
 <script setup lang="ts">
 import DDropdownButton from './DaisyUI/DDropdownButton.vue';
 
-const { title, metadata, url, url_new, preset_number } = defineProps({
+const { title, title_new, metadata, url, url_new, preset_number } = defineProps({
   title: {
     type: String,
     default: "",
   },
+  title_new: {
+    type: String,
+    default: "",
+  },
   metadata: {
     type: String,
     default: "",
@@ -32,23 +36,27 @@ const { title, metadata, url, url_new, preset_number } = defineProps({
         <span class="badge badge-info badge-lg mr-2 ">
           {{ preset_number }}
         </span>
-        {{ title }}
+        {{ title_new ? title_new : title }}
       </div>
     </d-dropdown-button>
     <div tabindex="0" class="dropdown-content card card-compact w-full p-2 mt-2 shadow bg-primary text-primary-content">
       <div class="card-body break-words">
         <h3 class="card-title">Stream Information</h3>
+        <p>
+          <span class="badge badge-info mr-2">Metadata</span>
+          {{ metadata }}
+        </p>
         <p>
           <span class="badge badge-info mr-2">Title</span>
           {{ title }}
         </p>
         <p>
-          <span class="badge badge-info mr-2">Preset Number</span>
-          {{ preset_number }}
+          <span class="badge badge-info mr-2">New Title</span>
+          {{ title_new }}
         </p>
         <p>
-          <span class="badge badge-info mr-2">Metadata</span>
-          {{ metadata }}
+          <span class="badge badge-info mr-2">Preset Number</span>
+          {{ preset_number }}
         </p>
         <p>
           <span class="badge badge-info mr-2">URL</span>

diff --git a/left/web/src/constants.ts b/left/web/src/constants.ts
@@ -4,8 +4,16 @@ export const API_URL = import.meta.env.VITE_API_URL
 export const WS_URL = import.meta.env.VITE_WS_URL
   ? import.meta.env.VITE_WS_URL
   : (() => {
-      if (window.location.protocol == "http:") {
-        return "ws://" + window.location.host;
-      }
-      return "wss://" + window.location.host;
-    })();
+    if (window.location.protocol == "http:") {
+      return "ws://" + window.location.host;
+    }
+    return "wss://" + window.location.host;
+  })();
+
+
+export const PAGE_HOME = "";
+export const PAGE_EDIT = "edit";
+
+export const STATUS_CONNECTING = "Connecting";
+export const STATUS_PLAYING = "Playing";
+export const STATUS_STOPPED = "Stopped";
diff --git a/left/web/src/main.ts b/left/web/src/main.ts
@@ -3,10 +3,10 @@ import App from './App.vue'
 import './index.css'
 
 import { OhVueIcon, addIcons } from "oh-vue-icons";
-import { FaPlay, FaStop, FaSync, FaQuestion, FaSearch, FaRedo, FaPowerOff, FaVolumeDown, FaVolumeUp, MdRadio, FaVolumeMute, FaEdit, FaItunesNote } from "oh-vue-icons/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";
 
 
-addIcons(FaPlay, FaStop, FaSync, FaQuestion, FaSearch, FaRedo, FaPowerOff, FaVolumeDown, FaVolumeUp, MdRadio, FaVolumeMute, FaEdit, FaItunesNote);
+addIcons(FaPlay, FaStop, FaSync, FaQuestion, FaSearch, FaRedo, FaPowerOff, FaVolumeDown, FaVolumeUp, MdRadio, FaVolumeMute, FaEdit, FaItunesNote, FaBars, FaGithub, FaHome, FaTag, FaSpinner);
 
 createApp(App)
   .component("v-icon", OhVueIcon)