vue formatting tweaks (#704)

* add .prettierrc

* apply formatting

ErsatzTV/client-app/.prettierrc

@@ -0,0 +1,5 @@
+{
+    "semi": true,
+    "singleQuote": true,
+    "trailingComma": "none"
+}

ErsatzTV/client-app/babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-    presets: ["@vue/cli-plugin-babel/preset"],
+    presets: ['@vue/cli-plugin-babel/preset']
 };

ErsatzTV/client-app/src/App.vue

@@ -14,13 +14,13 @@
 </template>
 
 <script>
-import Vue from "vue";
-import Toolbar from "@/components/Navigation/ToolBar.vue";
-import SnackBar from "@/components/PopUps/SnackBar";
+import Vue from 'vue';
+import Toolbar from '@/components/Navigation/ToolBar.vue';
+import SnackBar from '@/components/PopUps/SnackBar';
 export default Vue.extend({
-    name: "App",
+    name: 'App',
     components: { Toolbar, SnackBar },
-    data: () => ({}),
+    data: () => ({})
 });
 </script>
 <style>

ErsatzTV/client-app/src/components/Navigation/SideBarLogo.vue

@@ -15,13 +15,13 @@
 </template>
 
 <script>
-import { mapState } from "pinia";
-import { applicationState } from "@/stores/applicationState";
+import { mapState } from 'pinia';
+import { applicationState } from '@/stores/applicationState';
 
 export default {
-    name: "SideBarLogo",
+    name: 'SideBarLogo',
     computed: {
-        ...mapState(applicationState, ["isNavigationMini"]),
-    },
+        ...mapState(applicationState, ['isNavigationMini'])
+    }
 };
 </script>

ErsatzTV/client-app/src/components/Navigation/SideBarMenu.vue

@@ -21,23 +21,23 @@
 </template>
 
 <script>
-import SideBarMenuItem from "./SideBarMenuItem";
-import SideBarMenuItemExpandable from "./SideBarMenuItemExpandable";
-import { mapState } from "pinia";
-import { applicationState } from "@/stores/applicationState";
+import SideBarMenuItem from './SideBarMenuItem';
+import SideBarMenuItemExpandable from './SideBarMenuItemExpandable';
+import { mapState } from 'pinia';
+import { applicationState } from '@/stores/applicationState';
 
 export default {
-    name: "NavSidebar",
+    name: 'NavSidebar',
     components: { SideBarMenuItem, SideBarMenuItemExpandable },
     data: () => ({
-        navigation: null,
+        navigation: null
     }),
     computed: {
-        ...mapState(applicationState, ["disableMiniNavigation"]),
+        ...mapState(applicationState, ['disableMiniNavigation'])
     },
     beforeMount: function () {
         //Pull in navigation from routes and load into DOM
         this.navigation = this.$router.options.routes;
-    },
+    }
 };
 </script>

ErsatzTV/client-app/src/components/Navigation/SideBarMenuItem.vue

@@ -14,24 +14,24 @@
 
 <script>
 export default {
-    name: "SideBarMenuItem",
+    name: 'SideBarMenuItem',
     props: {
         name: {
             type: String,
-            required: true,
+            required: true
         },
         path: {
             type: String,
-            required: true,
+            required: true
         },
         icon: {
             type: String,
-            required: true,
+            required: true
         },
         disabled: {
             type: Boolean,
-            required: true,
-        },
-    },
+            required: true
+        }
+    }
 };
 </script>

ErsatzTV/client-app/src/components/Navigation/SideBarMenuItemExpandable.vue

@@ -33,27 +33,27 @@
 
 <script>
 export default {
-    name: "SideBarMenuItemExpandable",
+    name: 'SideBarMenuItemExpandable',
     props: {
         name: {
             type: String,
-            required: true,
+            required: true
         },
         icon: {
             type: String,
-            required: true,
+            required: true
         },
         disabled: {
             type: Boolean,
-            required: true,
+            required: true
         },
         children: {
             type: Array,
-            required: true,
-        },
+            required: true
+        }
     },
     data: () => ({
-        opened: false,
+        opened: false
     }),
     computed: {
         menuItemOpened: {
@@ -62,8 +62,8 @@ export default {
             },
             set: function () {
                 return !this.opened;
-            },
-        },
-    },
+            }
+        }
+    }
 };
 </script>

ErsatzTV/client-app/src/components/Navigation/SideBarVersion.vue

@@ -8,17 +8,17 @@
 </template>
 
 <script>
-import { mapState } from "pinia";
-import { applicationState } from "@/stores/applicationState";
+import { mapState } from 'pinia';
+import { applicationState } from '@/stores/applicationState';
 
 export default {
-    name: "SideBarVersion",
+    name: 'SideBarVersion',
     computed: {
         ...mapState(applicationState, [
-            "currentServerVersion",
-            "isNavigationMini",
-        ]),
-    },
+            'currentServerVersion',
+            'isNavigationMini'
+        ])
+    }
 };
 </script>
 

ErsatzTV/client-app/src/components/Navigation/ToolBar.vue

@@ -22,28 +22,28 @@
 </template>
 
 <script>
-import SideBarLogo from "./SideBarLogo.vue";
-import SideBarMenu from "./SideBarMenu.vue";
-import SideBarVersion from "./SideBarVersion";
-import ToolBarLinks from "./ToolBarLinks";
-import ToolBarSearch from "./ToolBarSearch";
-import { mapState } from "pinia";
-import { applicationState } from "@/stores/applicationState";
+import SideBarLogo from './SideBarLogo.vue';
+import SideBarMenu from './SideBarMenu.vue';
+import SideBarVersion from './SideBarVersion';
+import ToolBarLinks from './ToolBarLinks';
+import ToolBarSearch from './ToolBarSearch';
+import { mapState } from 'pinia';
+import { applicationState } from '@/stores/applicationState';
 
 export default {
-    name: "NavToolbar",
+    name: 'NavToolbar',
     components: {
         SideBarMenu,
         SideBarLogo,
         SideBarVersion,
         ToolBarLinks,
-        ToolBarSearch,
+        ToolBarSearch
     },
     computed: {
         ...mapState(applicationState, [
-            "isNavigationMini",
-            "toggleMiniNavigation",
-        ]),
-    },
+            'isNavigationMini',
+            'toggleMiniNavigation'
+        ])
+    }
 };
 </script>

ErsatzTV/client-app/src/components/Navigation/ToolBarLinks.vue

@@ -64,21 +64,21 @@
 </template>
 
 <script>
-import { mapState } from "pinia";
-import { applicationState } from "@/stores/applicationState";
-import { snackbarState } from "@/stores/snackbarState";
+import { mapState } from 'pinia';
+import { applicationState } from '@/stores/applicationState';
+import { snackbarState } from '@/stores/snackbarState';
 
 export default {
-    name: "ToolBarLinks.vue",
+    name: 'ToolBarLinks.vue',
     data: () => ({
         toast: false,
-        clickToCopyText: "Click to copy to clipboard!",
-        successCopyText: "Successfully copied text to clipboard!",
-        failedCopyText: "Failed to copy text to clipboard! Error: ",
+        clickToCopyText: 'Click to copy to clipboard!',
+        successCopyText: 'Successfully copied text to clipboard!',
+        failedCopyText: 'Failed to copy text to clipboard! Error: '
     }),
     computed: {
-        ...mapState(applicationState, ["navBarURLs"]),
-        ...mapState(snackbarState, ["showSnackbar"]),
+        ...mapState(applicationState, ['navBarURLs']),
+        ...mapState(snackbarState, ['showSnackbar'])
     },
     methods: {
         copyTextToClipboard(text) {
@@ -89,8 +89,8 @@ export default {
                 console.error(e);
                 this.showSnackbar(`${this.failedCopyText}${e}`);
             }
-        },
-    },
+        }
+    }
 };
 </script>
 

ErsatzTV/client-app/src/components/Navigation/ToolBarSearch.vue

@@ -11,7 +11,7 @@
 
 <script>
 export default {
-    name: "ToolBarSearch",
+    name: 'ToolBarSearch'
 };
 </script>
 

ErsatzTV/client-app/src/components/PopUps/SnackBar.vue

@@ -8,19 +8,19 @@
 </template>
 
 <script>
-import { mapState } from "pinia";
-import { snackbarState } from "@/stores/snackbarState";
+import { mapState } from 'pinia';
+import { snackbarState } from '@/stores/snackbarState';
 
 export default {
     data: () => ({
-        timeout: 4000,
+        timeout: 4000
     }),
     computed: {
         ...mapState(snackbarState, [
-            "currentMessage",
-            "isVisible",
-            "closeSnackbar",
-            "openSnackbar",
+            'currentMessage',
+            'isVisible',
+            'closeSnackbar',
+            'openSnackbar'
         ]),
         snackbar: {
             get() {
@@ -28,8 +28,8 @@ export default {
             },
             set() {
                 this.closeSnackbar();
-            },
-        },
-    },
+            }
+        }
+    }
 };
 </script>

ErsatzTV/client-app/src/main.js

@@ -1,11 +1,11 @@
-import Vue from "vue";
-import App from "./App.vue";
-import vuetify from "./plugins/vuetify";
-import router from "./router";
-import { createPinia, PiniaVuePlugin } from "pinia";
-import autoPageTitleMixin from "./mixins/autoPageTitle";
-import "roboto-fontface/css/roboto/roboto-fontface.css";
-import "@mdi/font/css/materialdesignicons.css";
+import Vue from 'vue';
+import App from './App.vue';
+import vuetify from './plugins/vuetify';
+import router from './router';
+import { createPinia, PiniaVuePlugin } from 'pinia';
+import autoPageTitleMixin from './mixins/autoPageTitle';
+import 'roboto-fontface/css/roboto/roboto-fontface.css';
+import '@mdi/font/css/materialdesignicons.css';
 
 Vue.config.productionTip = false;
 
@@ -19,5 +19,5 @@ new Vue({
     vuetify,
     router,
     pinia,
-    render: (h) => h(App),
-}).$mount("#app");
+    render: (h) => h(App)
+}).$mount('#app');

ErsatzTV/client-app/src/mixins/autoPageTitle.js

@@ -1,7 +1,7 @@
 function getTitle(vm) {
     const { title } = vm.$options;
     if (title) {
-        return typeof title === "function" ? title.call(vm) : title;
+        return typeof title === 'function' ? title.call(vm) : title;
     }
 }
 
@@ -11,5 +11,5 @@ export default {
         if (title) {
             document.title = `ErsatzTV | ${title}`;
         }
-    },
+    }
 };

ErsatzTV/client-app/src/plugins/vuetify.js

@@ -1,28 +1,28 @@
-import Vue from "vue";
-import Vuetify from "vuetify/lib/framework";
-import colors from "vuetify/lib/util/colors";
+import Vue from 'vue';
+import Vuetify from 'vuetify/lib/framework';
+import colors from 'vuetify/lib/util/colors';
 
 Vue.use(Vuetify);
 
 export default new Vuetify({
     icons: {
-        iconfont: "mdi", // default - only for display purposes
+        iconfont: 'mdi' // default - only for display purposes
     },
     theme: {
         themes: {
             dark: {
-                primary: "#c0c000",
-                secondary: "#00c0c0",
+                primary: '#c0c000',
+                secondary: '#00c0c0',
                 accent: colors.yellow.accent2,
                 error: colors.red,
                 warning: colors.orange,
                 info: colors.lightBlue,
-                success: colors.green,
-            },
+                success: colors.green
+            }
         },
         options: {
-            customProperties: true,
+            customProperties: true
         },
-        dark: true,
-    },
+        dark: true
+    }
 });

ErsatzTV/client-app/src/router/index.js

@@ -1,223 +1,223 @@
-import Vue from "vue";
-import VueRouter from "vue-router";
-import HomePage from "../views/HomePage.vue";
+import Vue from 'vue';
+import VueRouter from 'vue-router';
+import HomePage from '../views/HomePage.vue';
 
 Vue.use(VueRouter);
 
 const routes = [
     {
-        path: "/",
-        name: "Home",
+        path: '/',
+        name: 'Home',
         component: HomePage,
         meta: {
-            icon: "mdi-home",
-            disabled: false,
-        },
+            icon: 'mdi-home',
+            disabled: false
+        }
     },
     {
-        path: "/channels",
-        name: "Channels",
+        path: '/channels',
+        name: 'Channels',
         meta: {
-            icon: "mdi-broadcast",
-            disabled: true,
-        },
+            icon: 'mdi-broadcast',
+            disabled: true
+        }
     },
     {
-        path: "/ffmpeg-profiles",
-        name: "FFmpeg Profiles",
+        path: '/ffmpeg-profiles',
+        name: 'FFmpeg Profiles',
         meta: {
-            icon: "mdi-video-input-component",
-            disabled: true,
-        },
+            icon: 'mdi-video-input-component',
+            disabled: true
+        }
     },
     {
-        path: "/watermarks",
-        name: "Watermarks",
+        path: '/watermarks',
+        name: 'Watermarks',
         meta: {
-            icon: "mdi-watermark",
-            disabled: true,
-        },
+            icon: 'mdi-watermark',
+            disabled: true
+        }
     },
     {
-        path: "/sources",
-        name: "Media Sources",
+        path: '/sources',
+        name: 'Media Sources',
         meta: {
-            icon: "mdi-server-network",
-            disabled: false,
+            icon: 'mdi-server-network',
+            disabled: false
         },
         children: [
             {
-                path: "/sources/local",
-                name: "Local",
+                path: '/sources/local',
+                name: 'Local',
                 meta: {
-                    icon: "mdi-folder",
-                    disabled: true,
-                },
+                    icon: 'mdi-folder',
+                    disabled: true
+                }
             },
             {
-                path: "/sources/emby",
-                name: "Emby",
+                path: '/sources/emby',
+                name: 'Emby',
                 meta: {
-                    icon: "mdi-emby",
-                    disabled: true,
-                },
+                    icon: 'mdi-emby',
+                    disabled: true
+                }
             },
             {
-                path: "/sources/jellyfin",
-                name: "Jellyfin",
+                path: '/sources/jellyfin',
+                name: 'Jellyfin',
                 meta: {
-                    icon: "mdi-jellyfish",
-                    disabled: true,
-                },
+                    icon: 'mdi-jellyfish',
+                    disabled: true
+                }
             },
             {
-                path: "/sources/plex",
-                name: "Plex",
+                path: '/sources/plex',
+                name: 'Plex',
                 meta: {
-                    icon: "mdi-plex",
-                    disabled: true,
-                },
-            },
-        ],
+                    icon: 'mdi-plex',
+                    disabled: true
+                }
+            }
+        ]
     },
     {
-        path: "/media",
-        name: "Media",
+        path: '/media',
+        name: 'Media',
         meta: {
-            icon: "mdi-cog",
-            disabled: false,
+            icon: 'mdi-cog',
+            disabled: false
         },
         children: [
             {
-                path: "/media/libraries",
-                name: "Libraries",
+                path: '/media/libraries',
+                name: 'Libraries',
                 meta: {
-                    icon: "mdi-library",
-                    disabled: true,
-                },
+                    icon: 'mdi-library',
+                    disabled: true
+                }
             },
             {
-                path: "/media/trash",
-                name: "Trash",
+                path: '/media/trash',
+                name: 'Trash',
                 meta: {
-                    icon: "mdi-trash-can",
-                    disabled: true,
-                },
+                    icon: 'mdi-trash-can',
+                    disabled: true
+                }
             },
             {
-                path: "/media/tv-shows",
-                name: "TV Shows",
+                path: '/media/tv-shows',
+                name: 'TV Shows',
                 meta: {
-                    icon: "mdi-television-classic",
-                    disabled: true,
-                },
+                    icon: 'mdi-television-classic',
+                    disabled: true
+                }
             },
             {
-                path: "/media/movies",
-                name: "Movies",
+                path: '/media/movies',
+                name: 'Movies',
                 meta: {
-                    icon: "mdi-movie",
-                    disabled: true,
-                },
+                    icon: 'mdi-movie',
+                    disabled: true
+                }
             },
             {
-                path: "/media/music-videos",
-                name: "Music Videos",
+                path: '/media/music-videos',
+                name: 'Music Videos',
                 meta: {
-                    icon: "mdi-music-circle",
-                    disabled: true,
-                },
+                    icon: 'mdi-music-circle',
+                    disabled: true
+                }
             },
             {
-                path: "/media/other-videos",
-                name: "Other Videos",
+                path: '/media/other-videos',
+                name: 'Other Videos',
                 meta: {
-                    icon: "mdi-video",
-                    disabled: true,
-                },
+                    icon: 'mdi-video',
+                    disabled: true
+                }
             },
             {
-                path: "/media/songs",
-                name: "Songs",
+                path: '/media/songs',
+                name: 'Songs',
                 meta: {
-                    icon: "mdi-album",
-                    disabled: true,
-                },
-            },
-        ],
+                    icon: 'mdi-album',
+                    disabled: true
+                }
+            }
+        ]
     },
     {
-        path: "/lists",
-        name: "Lists",
+        path: '/lists',
+        name: 'Lists',
         meta: {
-            icon: "mdi-format-list-bulleted",
-            disabled: false,
+            icon: 'mdi-format-list-bulleted',
+            disabled: false
         },
         children: [
             {
-                path: "/lists/collections",
-                name: "Collections",
+                path: '/lists/collections',
+                name: 'Collections',
                 meta: {
-                    icon: "mdi-collage",
-                    disabled: true,
-                },
+                    icon: 'mdi-collage',
+                    disabled: true
+                }
             },
             {
-                path: "/lists/trakt-lists",
-                name: "Trakt Lists",
+                path: '/lists/trakt-lists',
+                name: 'Trakt Lists',
                 meta: {
-                    icon: "mdi-hammer",
-                    disabled: true,
-                },
+                    icon: 'mdi-hammer',
+                    disabled: true
+                }
             },
             {
-                path: "/lists/filler-presets",
-                name: "Filler Presets",
+                path: '/lists/filler-presets',
+                name: 'Filler Presets',
                 meta: {
-                    icon: "mdi-tune-vertical",
-                    disabled: true,
-                },
-            },
-        ],
+                    icon: 'mdi-tune-vertical',
+                    disabled: true
+                }
+            }
+        ]
     },
     {
-        path: "/schedules",
-        name: "Schedules",
+        path: '/schedules',
+        name: 'Schedules',
         meta: {
-            icon: "mdi-calendar",
-            disabled: true,
-        },
+            icon: 'mdi-calendar',
+            disabled: true
+        }
     },
     {
-        path: "/playouts",
-        name: "Playouts",
+        path: '/playouts',
+        name: 'Playouts',
         meta: {
-            icon: "mdi-clipboard-play-multiple",
-            disabled: true,
-        },
+            icon: 'mdi-clipboard-play-multiple',
+            disabled: true
+        }
     },
     {
-        path: "/settings",
-        name: "Settings",
+        path: '/settings',
+        name: 'Settings',
         meta: {
-            icon: "mdi-cog",
-            disabled: true,
-        },
+            icon: 'mdi-cog',
+            disabled: true
+        }
     },
     {
-        path: "/Logs",
-        name: "Logs",
+        path: '/Logs',
+        name: 'Logs',
         meta: {
-            icon: "mdi-card-text",
-            disabled: true,
-        },
-    },
+            icon: 'mdi-card-text',
+            disabled: true
+        }
+    }
 ];
 
 const router = new VueRouter({
-    mode: "history",
+    mode: 'history',
     base: process.env.BASE_URL,
-    routes,
+    routes
 });
 
 export default router;

ErsatzTV/client-app/src/stores/applicationState.js

@@ -1,17 +1,17 @@
-import { defineStore } from "pinia";
+import { defineStore } from 'pinia';
 
 const originURL = `${window.location.origin}`;
 
-export const applicationState = defineStore("appState", {
+export const applicationState = defineStore('appState', {
     state: () => {
         return {
             miniMenu: false,
-            currentVersion: "0.4.3-7cd2f9a-docker-nvidia", // Needs to be pulled from API with an action when ready
-            m3uURL: originURL + "/iptv/channels.m3u", // this will need to be fixed for reverse proxies
-            xmlURL: originURL + "/iptv/xmltv.xml", // this will need to be fixed for reverse proxies
-            documentationURL: "https://ersatztv.org/",
-            githubURL: "https://github.com/jasongdove/ErsatzTV",
-            discordURL: "https://discord.gg/hHaJm3yGy6",
+            currentVersion: '0.4.3-7cd2f9a-docker-nvidia', // Needs to be pulled from API with an action when ready
+            m3uURL: originURL + '/iptv/channels.m3u', // this will need to be fixed for reverse proxies
+            xmlURL: originURL + '/iptv/xmltv.xml', // this will need to be fixed for reverse proxies
+            documentationURL: 'https://ersatztv.org/',
+            githubURL: 'https://github.com/jasongdove/ErsatzTV',
+            discordURL: 'https://discord.gg/hHaJm3yGy6'
         };
     },
     getters: {
@@ -27,9 +27,9 @@ export const applicationState = defineStore("appState", {
                 xmlURL: state.xmlURL,
                 documentationURL: state.documentationURL,
                 githubURL: state.githubURL,
-                discordURL: state.discordURL,
+                discordURL: state.discordURL
             };
-        },
+        }
     },
     actions: {
         toggleMiniNavigation() {
@@ -37,6 +37,6 @@ export const applicationState = defineStore("appState", {
         },
         disableMiniNavigation() {
             this.miniMenu = false;
-        },
-    },
+        }
+    }
 });

ErsatzTV/client-app/src/stores/snackbarState.js

@@ -1,10 +1,10 @@
-import { defineStore } from "pinia";
+import { defineStore } from 'pinia';
 
-export const snackbarState = defineStore("snackbarState", {
+export const snackbarState = defineStore('snackbarState', {
     state: () => {
         return {
             visible: false,
-            message: "",
+            message: ''
         };
     },
     getters: {
@@ -13,7 +13,7 @@ export const snackbarState = defineStore("snackbarState", {
         },
         currentMessage(state) {
             return state.message;
-        },
+        }
     },
     actions: {
         showSnackbar(message) {
@@ -22,6 +22,6 @@ export const snackbarState = defineStore("snackbarState", {
         },
         closeSnackbar() {
             this.visible = false;
-        },
-    },
+        }
+    }
 });

ErsatzTV/client-app/src/views/HomePage.vue

@@ -8,6 +8,6 @@
 export default {
     title() {
         return `Home`;
-    },
+    }
 };
 </script>

ErsatzTV/client-app/vue.config.js

@@ -1,13 +1,13 @@
-const { defineConfig } = require("@vue/cli-service");
+const { defineConfig } = require('@vue/cli-service');
 
 module.exports = defineConfig({
-    transpileDependencies: ["vuetify"],
+    transpileDependencies: ['vuetify'],
     runtimeCompiler: true,
 
     pwa: {
-        name: "ErsatzTV",
+        name: 'ErsatzTV'
     },
-    publicPath: "/v2/",
-    outputDir: "../wwwroot/v2",
-    filenameHashing: false,
+    publicPath: '/v2/',
+    outputDir: '../wwwroot/v2',
+    filenameHashing: false
 });