[refactor] fix modals

acvigue · Jul 27, 2023 · bcafa4f · bcafa4f
1 parent c25fabb
commit bcafa4f
Show file tree

Hide file tree

Showing 31 changed files with 310 additions and 381 deletions.
diff --git a/index.html b/index.html
@@ -9,7 +9,7 @@
     <title>Tranquil</title>
   </head>
   <body>
-    <div id="app" class="w-full h-full"></div>
+    <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/src/App.vue b/src/App.vue
@@ -12,9 +12,9 @@ const loader = useLoader()
 </script>
 
 <template>
-  <RouterView v-slot="{ Component, route }" class="h-[calc(100dvh-3.5rem)]">
+  <RouterView v-slot="{ Component, route }">
     <Transition name="fade" mode="out-in">
-      <component :is="Component" :key="route.path" />
+      <component :is="Component" :key="route.path" class="mb-20" />
     </Transition>
   </RouterView>
 

diff --git a/src/components/PatternGridItem.vue b/src/components/PatternGridItem.vue
@@ -27,7 +27,7 @@ const isPatternDownloaded = computed(() => {
   >
     <HeartIcon class="absolute z-20 top-3 right-3 text-red-400 w-4 md:w-7" v-if="item.isFavorite" />
     <ArrowDownTrayIcon
-      class="absolute z-20 top-3 right-3 text-orange-400 w-3 md:w-6"
+      class="absolute z-20 top-3 right-3 text-orange-400 w-5 md:w-5"
       v-if="!isPatternDownloaded"
     />
     <PatternPreview
@@ -37,9 +37,7 @@ const isPatternDownloaded = computed(() => {
       class="h-36 w-36 md:h-44 md:w-44 rounded-full border-gray-500 border-[3px] bg-gray-800 group-hover:scale-105 transition transform-gpu duration-300"
       lineColor="#ffffff"
     />
-    <span
-      class="w-[90%] text-center text-md font-medium line-clamp-1 text-ellipsis break-words"
-    >
+    <span class="w-[90%] text-center text-md font-medium line-clamp-1 text-ellipsis break-words">
       {{ item.name }}</span
     >
   </button>

diff --git a/src/components/PatternPreview.vue b/src/components/PatternPreview.vue
@@ -13,6 +13,7 @@ interface PatternPreviewProps {
   lineColor: string
   pattern?: Pattern
   mode: 'thumb' | 'render'
+  progress?: number
 }
 
 const props = defineProps<PatternPreviewProps>()
@@ -24,6 +25,7 @@ const isLoaded = ref(false)
 const thumbSrc = ref('')
 
 let patternData: [number, number][] = []
+let uninterpolatedData: [number, number][] = []
 let patternID = ''
 
 onMounted(async () => {
@@ -69,25 +71,28 @@ const getPatternData = async () => {
   }
 
   let patternDataResponse
-  try {
-    patternDataResponse = await tranquilapi.get(`/patterns/${props.pattern.uuid}/data`)
-  } catch (e) {
-    throw new Error(`Pattern preview generation failed for ${props.pattern.name}`)
-  }
-
-  const patternDataRaw = patternDataResponse.data
-  const uninterpolatedData: [number, number][] = []
-  for (const patternDataLine of (patternDataRaw as string).split('\n')) {
-    if (patternDataLine.charAt(0) === '#') {
-      continue
+  if (uninterpolatedData.length === 0 || patternID != props.pattern.uuid) {
+    try {
+      patternDataResponse = await tranquilapi.get(`/patterns/${props.pattern.uuid}/data`)
+      patternID = props.pattern.uuid
+    } catch (e) {
+      throw new Error(`Pattern preview generation failed for ${props.pattern.name}`)
     }
 
-    const patternCoordinates = patternDataLine.split(' ')
-    const theta = parseFloat(patternCoordinates[0])
-    const rho = parseFloat(patternCoordinates[1])
-    uninterpolatedData.push([theta, rho])
+    const patternDataRaw = patternDataResponse.data
+    for (const patternDataLine of (patternDataRaw as string).split('\n')) {
+      if (patternDataLine.charAt(0) === '#') {
+        continue
+      }
+
+      const patternCoordinates = patternDataLine.split(' ')
+      const theta = parseFloat(patternCoordinates[0])
+      const rho = parseFloat(patternCoordinates[1])
+      uninterpolatedData.push([theta, rho])
+    }
   }
 
+  patternData = []
   patternData.push(uninterpolatedData[0])
   let previousPoint = uninterpolatedData[0]
   for (const uninterpolatedPoint of uninterpolatedData) {
@@ -116,15 +121,15 @@ const render = async () => {
     return
   }
 
-  if (patternID != props.pattern.uuid) {
-    patternData = []
-    try {
-      await getPatternData()
-    } catch (e) {
-      isLoaded.value = true
-      return
-    }
-    patternID = props.pattern.uuid
+  try {
+    await getPatternData()
+  } catch (e) {
+    isLoaded.value = true
+    return
+  }
+
+  if (props.progress) {
+    patternData = patternData.slice(0, Math.floor(patternData.length * props.progress))
   }
 
   context.value.strokeStyle = props.lineColor
@@ -150,7 +155,6 @@ const render = async () => {
 }
 
 watch(props, async () => {
-  console.log('watcher')
   await render()
 })
 </script>

diff --git a/src/components/PlaylistGridItem.vue b/src/components/PlaylistGridItem.vue
@@ -34,9 +34,7 @@ const isPlaylistDownloaded = computed(() => {
       class="h-36 w-36 md:h-44 md:w-44 rounded-full border-gray-500 border-[3px] bg-gray-800 group-hover:scale-105 transition transform-gpu duration-300"
       lineColor="#ffffff"
     />
-    <span
-      class="w-[90%] text-center text-md font-medium line-clamp-1 text-ellipsis break-words"
-    >
+    <span class="w-[90%] text-center text-md font-medium line-clamp-1 text-ellipsis break-words">
       {{ item.name }}</span
     >
   </button>

diff --git a/src/components/SettingsButton.vue b/src/components/SettingsButton.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { ArrowRightIcon } from '@heroicons/vue/24/outline'
+
+interface SettingsButtonProps {
+  title: string
+}
+
+defineProps<SettingsButtonProps>()
+
+const emit = defineEmits(['click'])
+</script>
+
+<template>
+  <button
+    @click="emit('click')"
+    class="flex w-full justify-between items-center p-4 bg-gray-700 hover:bg-gray-600 rounded-xl transform-gpu duration-300"
+  >
+    <span class="text-lg font-medium">{{ title }}</span>
+    <ArrowRightIcon class="w-6 h-6"></ArrowRightIcon>
+  </button>
+</template>
diff --git a/src/components/modals/AboutModal.vue b/src/components/modals/AboutModal.vue
@@ -16,7 +16,7 @@ const emit = defineEmits<{
 
 async function checkForUpdate() {
   loader.showLoader('update')
-  await table.get("/update")
+  await table.get('/update')
   loader.hideLoader('update')
   toast.info('Update queued')
 }

diff --git a/src/components/modals/AddItemToPlaylistModal.vue b/src/components/modals/AddItemToPlaylistModal.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { type Pattern, default as useFilesStore } from '@/stores/files'
 import { FormKit } from '@formkit/vue'
-import { XMarkIcon } from '@heroicons/vue/24/outline'
 import ModalHeader from './helpers/ModalHeader.vue'
 import ModalTemplate from './helpers/ModalTemplate.vue'
 

diff --git a/src/components/modals/AdvancedLightsSettingsModal.vue b/src/components/modals/AdvancedLightsSettingsModal.vue
@@ -35,17 +35,3 @@ const lights = useTableLightsStore()
     />
   </ModalTemplate>
 </template>
-
-<style>
-.vue-swatches__container {
-  @apply border-[2px] border-gray-400;
-}
-
-.vue-swatches {
-  @apply !flex !justify-center !items-center;
-}
-
-.vue-swatches__trigger__wrapper {
-  @apply border-[2px] border-gray-400 rounded-xl;
-}
-</style>
diff --git a/src/components/modals/DeleteConfirmationModal.vue b/src/components/modals/DeleteConfirmationModal.vue
@@ -16,7 +16,7 @@ const emit = defineEmits<{
 
 <template>
   <ModalTemplate border-color="red" @close="emit('close')">
-    <ModalHeader title="Are you sure?" @close="emit('close')"/>
+    <ModalHeader title="Are you sure?" @close="emit('close')" />
     <div class="flex flex-col gap-8">
       <span class="text-md font-medium w-full text-center">
         Deleting '{{ itemName.trim() }}' cannot be undone

diff --git a/src/components/modals/LightsModal.vue b/src/components/modals/LightsModal.vue
@@ -16,7 +16,7 @@ const emit = defineEmits<{
 const effects = [
   { label: 'Solid', value: 0 },
   { label: 'Rainbow', value: 1 },
-  { label: 'Motion Tracked', value: 2 }
+  { label: 'Motion Tracked', value: 2 },
 ]
 
 const lights = useTableLightsStore()

diff --git a/src/components/modals/NewPlaylistModal.vue b/src/components/modals/NewPlaylistModal.vue
@@ -1,9 +1,7 @@
 <script setup lang="ts">
-import { VueFinalModal } from 'vue-final-modal'
 import useFilesStore, { type Playlist } from '@/stores/files'
 import { FormKit } from '@formkit/vue'
 import { v4 as uuidv4 } from 'uuid'
-import { XMarkIcon } from '@heroicons/vue/24/outline'
 import { useToast } from 'vue-toast-notification'
 import ModalTemplate from './helpers/ModalTemplate.vue'
 import ModalHeader from './helpers/ModalHeader.vue'
@@ -33,9 +31,9 @@ const emit = defineEmits<{
 
 <template>
   <ModalTemplate @close="emit('close')">
-    <ModalHeader title="New Playlist" @close="emit('close')"/>
+    <ModalHeader title="New Playlist" @close="emit('close')" />
     <FormKit type="form" @submit="formHandler" submit-label="Create">
-        <FormKit type="text" name="name" id="name" label="Playlist Name" validation="required" />
-      </FormKit>
+      <FormKit type="text" name="name" id="name" label="Playlist Name" validation="required" />
+    </FormKit>
   </ModalTemplate>
 </template>
diff --git a/src/components/modals/OverplayConfirmationModal.vue b/src/components/modals/OverplayConfirmationModal.vue
@@ -16,7 +16,7 @@ const emit = defineEmits<{
 
 <template>
   <ModalTemplate @close="emit('close')">
-    <ModalHeader title="Wait!" @close="emit('close')"/>
+    <ModalHeader title="Wait!" @close="emit('close')" />
     <span class="text-md text-medium"
       >'{{ currentlyPlayingItemName }}' is already playing. Continuing will stop playback.</span
     >

diff --git a/src/components/modals/PatternModal.vue b/src/components/modals/PatternModal.vue
@@ -152,7 +152,7 @@ const isCurrentlyPlayingThisPattern = computed(() => {
       <div class="flex justify-center flex-col items-center">
         <PatternPreview
           :pattern="pattern"
-          mode="render"
+          mode="thumb"
           class="md:h-80 md:w-80 w-[60vw] h-[60vw] rounded-full border-gray-500 border-[3px] bg-gray-800 group-hover:scale-105 transition transform-gpu duration-300"
           lineColor="#ffffff"
         />