Merge pull request #256 from zurdi15/refactor/frontend-views

Refactor/frontend views

frontend/src/App.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { ref, inject, onMounted } from "vue"
 import { useTheme, useDisplay } from "vuetify"
-import { fetchPlatforms } from '@/services/api.js'
+import { fetchPlatformsApi } from '@/services/api.js'
 import { storePlatforms } from '@/stores/platforms.js'
 import { storeScanning } from '@/stores/scanning.js'
 import Drawer from '@/components/Drawer/Base.vue'
@@ -19,7 +19,7 @@ useTheme().global.name.value = localStorage.getItem('theme') || 'rommDark'
 // Event listeners bus
 const emitter = inject('emitter')
 emitter.on('refresPlatforms', () => {
-  fetchPlatforms()
+  fetchPlatformsApi()
     .then((res) => { platforms.set(res.data.data) })
     .catch((error) => { console.log(error);console.log("Couldn't fetch platforms") })
     refresPlatforms.value = !refresPlatforms.value
@@ -29,9 +29,9 @@ emitter.on('refreshGallery', () => {
   refreshGallery.value = !refreshGallery.value
 })
 
-// Startup
+
 onMounted(() => {
-  fetchPlatforms()
+  fetchPlatformsApi()
     .then((res) => { platforms.set(res.data.data) })
     .catch((error) => { console.log(error);console.log("Couldn't fetch platforms") })
 })
@@ -40,26 +40,25 @@ onMounted(() => {
 <template>
   <v-app>
 
-    <notification class="mt-6"/>
+    <notification id="notification" class="mt-6"/>
+
+    <v-progress-linear id="scan-progress-bar" color="rommAccent1" :active="scanning.value" :indeterminate="true" absolute fixed/>
 
-    <v-progress-linear class="scan-progress-bar" color="rommAccent1" :active="scanning.value" :indeterminate="true" absolute/>
+    <drawer id="drawer" :key="refresPlatforms"/>
 
-    <drawer :key="refresPlatforms"/>
+    <app-bar v-if="mdAndDown"/>
 
     <v-main>
-      <v-container class="pa-0" fluid>
-        <app-bar v-if="mdAndDown"/>
+      <v-container id="main-container" class="pa-1" fluid>
         <router-view :key="refreshGallery"/>
       </v-container>
     </v-main>
 
-
   </v-app>
 </template>
 
 <style>
 @import '@/styles/scrollbar.css';
-.scan-progress-bar {
-  z-index: 1000 !important;
-}
+#scan-progress-bar { z-index: 1000 !important; }
+#main-container { height: 100%; }
 </style>

frontend/src/components/Drawer/Platform.vue

@@ -7,7 +7,7 @@ const props = defineProps(['platform', 'rail'])
     <v-list-item :to="`/platform/${platform.slug}`" :value="platform.slug" :key="platform" class="pt-4 pb-4 bg-terciary">
         <span class="text-body-2 text-truncate">{{ rail ? '' : platform.name }}</span>
         <template v-slot:prepend>
-            <v-avatar :rounded="0" size="40"><v-img :src="'/assets/platforms/'+platform.slug+'.ico'"></v-img></v-avatar>
+            <v-avatar :rounded="0" size="40"><v-img :src="`/assets/platforms/${platform.slug}.ico`"></v-img></v-avatar>
         </template>
         <template v-slot:append>
             <v-chip class="ml-4 bg-chip" size="x-small" label>{{ platform.n_roms }}</v-chip>

frontend/src/components/GameDetails/BackgroundHeader.vue

@@ -4,7 +4,7 @@ const props = defineProps(['rom'])
 
 <template>
     <v-card class="header-background" position="absolute" rounded="0" flat>
-        <v-img :src="'/assets/romm/resources/'+rom.path_cover_s" class="header-background-img" cover/>
+        <v-img :src="`/assets/romm/resources/${rom.path_cover_s}?reload=${Date.now()}`" class="header-background-img" cover/>
     </v-card>
 </template>
 

frontend/src/components/GameGallery/Card/Cover.vue

@@ -1,6 +1,7 @@
 <script setup>
 // Props
 const props = defineProps(['rom', 'isHovering', 'hoverProps', 'size'])
+const forceImgReload = Date.now()
 </script>
 
 <template>
@@ -11,8 +12,8 @@ const props = defineProps(['rom', 'isHovering', 'hoverProps', 'size'])
             :value="rom.id"
             :key="rom.id"
             v-bind="hoverProps"
-            :src="'/assets/romm/resources/'+rom.path_cover_l"
-            :lazy-src="'/assets/romm/resources/'+rom.path_cover_s"
+            :src="`/assets/romm/resources/${rom.path_cover_l}?reload=${forceImgReload}`"
+            :lazy-src="`/assets/romm/resources/${rom.path_cover_s}?reload=${forceImgReload}`"
             class="cover"
             cover>
             <template v-slot:placeholder>

frontend/src/components/GameGallery/ListItem/Item.vue

@@ -5,6 +5,7 @@ import { storeDownloading } from '@/stores/downloading.js'
 
 // Props
 const props = defineProps(['rom'])
+const forceImgReload = Date.now()
 const saveFiles = ref(false)
 const downloading = storeDownloading()
 
@@ -32,8 +33,8 @@ const emitter = inject('emitter')
                     <v-avatar :rounded="0">
                         <v-progress-linear color="rommAccent1" :active="downloading.value.includes(rom.file_name)" :indeterminate="true" absolute/>
                         <v-img
-                        :src="'/assets/romm/resources/'+rom.path_cover_s"
-                        :lazy-src="'/assets/romm/resources/'+rom.path_cover_s"
+                        :src="`/assets/romm/resources/${rom.path_cover_s}?reload=${forceImgReload}`"
+                        :lazy-src="`/assets/romm/resources/${rom.path_cover_s}?reload=${forceImgReload}`"
                         min-height="150"/>
                     </v-avatar>
                 </template>

frontend/src/components/Home/Platform.vue

@@ -2,12 +2,12 @@
 import { ref } from 'vue'
 
 const props = defineProps(['platform'])
-const platformIconUrl = ref('/assets/platforms/' + props.platform.slug + '.ico')
+const platformIconUrl = ref(`/assets/platforms/${props.platform.slug}.ico`)
 const platformIconNotFound = () => { platformIconUrl.value = '/assets/platforms/default.ico' }
 </script>
 
 <template>
-    <router-link style="text-decoration: none; color: inherit;" :to="`/platform/${platform.slug}`">
+    <router-link id="router-link" :to="`/platform/${platform.slug}`">
         <v-hover v-slot="{ isHovering, props }">
             <v-card v-bind="props" :class="{ 'on-hover': isHovering }" :elevation="isHovering ? 20 : 3">
                 <v-card-text>
@@ -29,4 +29,8 @@ const platformIconNotFound = () => { platformIconUrl.value = '/assets/platforms/
 </template>
 
 <style scoped>
+#router-link{
+    text-decoration: none;
+    color: inherit;
+}
 </style>

frontend/src/services/api.js

@@ -1,6 +1,26 @@
 import axios from 'axios'
 
 
-export async function fetchPlatforms () {
+export async function fetchPlatformsApi () {
     return axios.get('/api/platforms')
 }
+
+export async function fetchRomsApi (platform) {
+    return axios.get(`/api/platforms/${platform}/roms`)
+}
+
+export async function fetchRomApi (platform, rom) {
+    return axios.get(`/api/platforms/${platform}/roms/${rom}`)
+}
+
+export async function updateRomApi (rom, updatedRom) {
+    return axios.patch(`/api/platforms/${rom.p_slug}/roms/${rom.id}`, { updatedRom: updatedRom })
+}
+
+export async function deleteRomApi (rom, deleteFromFs) {
+    return axios.delete(`/api/platforms/${rom.p_slug}/roms/${rom.id}?filesystem=${deleteFromFs}`)
+}
+
+export async function searchRomApi (searchTerm, searchBy, rom) {
+    return axios.put(`/api/search/roms/igdb?search_term=${searchTerm}&search_by=${searchBy}`, { rom: rom })
+}

frontend/src/services/download.js

@@ -6,16 +6,16 @@ const downloading = storeDownloading()
 
 export async function downloadRom(rom, emitter, filesToDownload=[]) {
     downloading.add(rom.file_name)
-    emitter.emit('snackbarScan', {'msg': "Downloading "+rom.file_name+"...", 'icon': 'mdi-download', 'color': 'green'})
+    emitter.emit('snackbarScan', {'msg': `Downloading ${rom.file_name}...`, 'icon': 'mdi-download', 'color': 'green'})
     if(rom.multi){
         const zip = new JSZip()
-        var zipFilename = rom.file_name+".zip"
+        var zipFilename = `${rom.file_name}.zip`
         var files = []
         filesToDownload.forEach(f => {files.push(f)})
         if (files.length == 0){ files = rom.files }
         var count = 0
         files.forEach(async function (file_part) {
-            var file_full_path = "/assets/romm/library/"+rom.file_path+"/"+rom.file_name+"/"+file_part
+            var file_full_path = `/assets/romm/library/${rom.file_path}/${rom.file_name}/${file_part}`
             var file = await fetch(file_full_path)
             var fileBlob = await file.blob()
             var f = zip.folder(rom.file_name);
@@ -25,12 +25,12 @@ export async function downloadRom(rom, emitter, filesToDownload=[]) {
         })
     }
     else{
-        var file_full_path = "/assets/romm/library/"+rom.file_path+"/"+rom.file_name
+        var file_full_path = `/assets/romm/library/${rom.file_path}/${rom.file_name}`
         var file = await fetch(file_full_path)
         var fileBlob = await file.blob()
         saveAs(fileBlob, rom.file_name)
     }
     downloading.remove(rom.file_name)
 }
 
-export async function downloadSave(rom) { console.log("Downloading "+rom.file_name+" save file") }
+export async function downloadSave(rom) { console.log(`Downloading ${rom.file_name} save file`) }

frontend/src/styles/scrollbar.css

@@ -1,12 +1,12 @@
 /* Firefox */
 * {
-    scrollbar-width: none;
+    scrollbar-width: thin;
     scrollbar-color: #6e6e6e rgba(0, 0, 0, 0);;
 }
 
 /* Chrome, Edge, and Safari */
 *::-webkit-scrollbar {
-    width: 0px;
+    width: 3px;
 }
 
 *::-webkit-scrollbar-track {

frontend/src/views/Details.vue

@@ -1,8 +1,8 @@
 <script setup>
-import axios from 'axios'
 import { ref, inject, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useDisplay } from "vuetify"
+import { fetchRomApi, updateRomApi, deleteRomApi, searchRomApi } from '@/services/api.js'
 import { downloadRom, downloadSave } from '@/services/download.js'
 import { storeDownloading } from '@/stores/downloading.js'
 import BackgroundHeader from '@/components/GameDetails/BackgroundHeader.vue'
@@ -37,11 +37,11 @@ const emitter = inject('emitter')
 async function searchRomIGDB() {
     searching.value = true
     dialogSearchRom.value = true
-    await axios.put('/api/search/roms/igdb?search_term='+searchTerm.value+'&search_by='+searchBy.value, {
-        rom: rom.value
-    }).then((response) => {
+    await searchRomApi(searchTerm.value, searchBy.value, rom.value)
+    .then((response) => {
         matchedRoms.value = response.data.data
-    }).catch((error) => {console.log(error)})
+    })
+    .catch((error) => {console.log(error)})
     searching.value = false
 }
 
@@ -55,11 +55,12 @@ async function updateRom(updatedData={...updatedRom.value}) {
     updatedRom.value.url_screenshots = updatedData.url_screenshots
     updatedRom.value.r_name = updatedData.r_name
     if (renameAsIGDB.value) { updatedRom.value.file_name = updatedRom.value.file_name.replace(updatedRom.value.file_name_no_tags, updatedData.r_name) }
-    await axios.patch('/api/platforms/'+rom.value.p_slug+'/roms/'+rom.value.id, { updatedRom: updatedRom.value }).then((response) => {
+    await updateRomApi(rom.value, updatedRom.value)
+    .then((response) => {
         rom.value = response.data.data
         updatedRom.value = {...response.data.data}
         emitter.emit('snackbarScan', {'msg': response.data.msg, 'icon': 'mdi-check-bold', 'color': 'green'})
-        router.push('/platform/'+rom.value.p_slug+'/'+rom.value.id)
+        emitter.emit('refreshGallery')
     }).catch((error) => {
         emitter.emit('snackbarScan', {'msg': error.response.data.detail, 'icon': 'mdi-close-circle', 'color': 'red'})
     })
@@ -69,22 +70,22 @@ async function updateRom(updatedData={...updatedRom.value}) {
 }
 
 async function deleteRom() {
-    await axios.delete('/api/platforms/'+rom.value.p_slug+'/roms/'+rom.value.id+'?filesystem='+deleteFromFs.value)
+    await deleteRomApi(rom.value.p_slug, deleteFromFs.value)
     .then((response) => {
         emitter.emit('snackbarScan', {'msg': response.data.msg, 'icon': 'mdi-check-bold', 'color': 'green'})
-        router.push('/platform/'+rom.value.p_slug)
+        router.push(`/platform/${rom.value.p_slug}`)
     }).catch((error) => {
         console.log(error)
         emitter.emit('snackbarScan', {'msg': error.response.data.detail, 'icon': 'mdi-close-circle', 'color': 'red'})
-        if (error.response.status == 404) { router.push('/platform/'+rom.value.p_slug) }
+        if (error.response.status == 404) { router.push(`/platform/${rom.value.p_slug}`) }
     })
     dialogDeleteRom.value = false
 }
 
-async function rescan() { console.log("rescan "+rom.value.id) }
 
 onMounted(() => {
-    axios.get(`/api/platforms/${route.params.platform}/roms/${route.params.rom}`).then(response => {
+    fetchRomApi(route.params.platform, route.params.rom)
+    .then(response => {
         rom.value = response.data.data
         updatedRom.value = {...response.data.data}
         loading.value = false
@@ -102,7 +103,7 @@ onMounted(() => {
                 <v-row>
                     <v-col>
                         <v-card elevation="2" :loading="downloading.value.includes(rom.file_name) ? 'rommAccent1': null">
-                            <v-img :src="'/assets/romm/resources/'+rom.path_cover_l" :lazy-src="'/assets/romm/resources/'+rom.path_cover_s" cover>
+                            <v-img :src="`/assets/romm/resources/${rom.path_cover_l}?reload=${Date.now()}`" :lazy-src="`/assets/romm/resources/${rom.path_cover_s}?reload=${Date.now()}`" cover>
                                 <template v-slot:placeholder>
                                     <div class="d-flex align-center justify-center fill-height">
                                         <v-progress-circular color="rommAccent1" :width="2" :size="20" indeterminate/>
@@ -183,7 +184,7 @@ onMounted(() => {
                             <v-row v-if="rom.r_igdb_id!=''" class="d-flex align-center text-body-1 mt-0">
                                 <v-col cols="3" xs="3" sm="2" md="2" lg="2" class="font-weight-medium"><span>IGDB</span></v-col>
                                 <v-col>
-                                    <v-chip variant="outlined" :href="'https://www.igdb.com/games/'+rom.r_slug" label>{{ rom.r_igdb_id }}</v-chip>
+                                    <v-chip variant="outlined" :href="`https://www.igdb.com/games/${rom.r_slug}`" label>{{ rom.r_igdb_id }}</v-chip>
                                 </v-col>
                             </v-row>
                             <v-row v-if="rom.tags.length>0" class="d-flex align-center text-body-1 mt-0">
@@ -197,7 +198,7 @@ onMounted(() => {
                         <v-window-item value="screenshots">
                             <v-row class="d-flex mt-2">
                                 <v-carousel hide-delimiter-background delimiter-icon="mdi-square" class="bg-rommBlack" show-arrows="hover" height="400">
-                                    <v-carousel-item v-for="screenshot in rom.path_screenshots" :src="'/assets/romm/resources/'+screenshot"/>
+                                    <v-carousel-item v-for="screenshot in rom.path_screenshots" :src="`/assets/romm/resources/${screenshot}`"/>
                                 </v-carousel>
                             </v-row>
                         </v-window-item>