Vueify restart, move js files to vue, add state-switch & more

CHANGELOG.md

@@ -9,6 +9,7 @@
 - Converted "Add Show" options into a Vue SFC ([#4848](https://github.com/pymedusa/Medusa/pull/4848))
 - Added publishing date to Speed.CD provider ([#5190](https://github.com/pymedusa/Medusa/pull/5190))
 - Converted the "quality pill" into a Vue SFC ([#5103](https://github.com/pymedusa/Medusa/pull/5103))
+- Vueify restart page, move JS files to Vue, add `state-switch` component and misc changes ([#5159](https://github.com/pymedusa/Medusa/pull/5159))
 
 #### Fixes
 - Fixed many release name parsing issues as a result of updating `guessit` ([#4244](https://github.com/pymedusa/Medusa/pull/4244))

medusa/server/web/home/handler.py

@@ -248,23 +248,13 @@ def show_statistics():
         return show_stat, max_download_count
 
     def is_alive(self, *args, **kwargs):
-        if 'callback' in kwargs and '_' in kwargs:
-            callback, _ = kwargs['callback'], kwargs['_']
-        else:
-            return 'Error: Unsupported Request. Send jsonp request with \'callback\' variable in the query string.'
-
-        # self.set_header('Cache-Control', 'max-age=0,no-cache,no-store')
-        self.set_header('Content-Type', 'text/javascript')
+        self.set_header('Content-Type', 'application/json; charset=UTF-8')
         self.set_header('Access-Control-Allow-Origin', '*')
         self.set_header('Access-Control-Allow-Headers', 'x-requested-with')
 
-        return '{callback}({msg});'.format(
-            callback=callback,
-            msg=json.dumps({
-                'msg': '{pid}'.format(
-                    pid=app.PID if app.started else 'nope')
-            })
-        )
+        return json.dumps({
+            'pid': app.PID if app.started else ''
+        })
 
     @staticmethod
     # @TODO: Replace with /api/v2/config/kodi, check if enabled === true

themes-default/slim/src/app.js

@@ -15,14 +15,14 @@ import {
     Asset,
     Backstretch,
     Config,
-    DisplayShow,
     FileBrowser,
     LanguageSelect,
     NamePattern,
     PlotInfo,
     RootDirs,
     ScrollButtons,
     SelectList,
+    Show,
     ShowSelector
 } from './components';
 
@@ -51,14 +51,14 @@ const globalComponents = [
     Asset,
     Backstretch,
     Config,
-    DisplayShow,
     FileBrowser,
     LanguageSelect,
     NamePattern,
     PlotInfo,
     RootDirs,
     ScrollButtons,
     SelectList,
+    Show,
     ShowSelector
 ];
 

themes-default/slim/src/components/index.js

@@ -11,7 +11,6 @@ export { default as ConfigPostProcessing } from './config-post-processing.vue';
 export { default as ConfigTextbox } from './config-textbox.vue';
 export { default as ConfigTextboxNumber } from './config-textbox-number.vue';
 export { default as ConfigToggleSlider } from './config-toggle-slider.vue';
-export { default as DisplayShow } from './display-show.vue';
 export { default as FileBrowser } from './file-browser.vue';
 export { default as Home } from './home.vue';
 export { default as IRC } from './irc.vue';
@@ -24,7 +23,9 @@ export { default as QualityPill } from './quality-pill.vue';
 export { default as RootDirs } from './root-dirs.vue';
 export { default as ScrollButtons } from './scroll-buttons.vue';
 export { default as SelectList } from './select-list.vue';
+export { default as Show } from './show.vue';
 export { default as ShowSelector } from './show-selector.vue';
 export { default as SnatchSelection } from './snatch-selection.vue';
+export { default as StateSwitch } from './state-switch.vue';
 export { default as Status } from './status.vue';
 export { NotFound } from './http';

themes-default/slim/src/components/display-show.vue → themes-default/slim/src/components/show.vue

@@ -7,8 +7,8 @@ import AppLink from './app-link.vue';
 import PlotInfo from './plot-info.vue';
 
 export default {
-    name: 'displayShow',
-    template: '#display-show-template',
+    name: 'show',
+    template: '#show-template',
     components: {
         AppLink,
         PlotInfo

themes-default/slim/src/components/state-switch.vue

@@ -0,0 +1,60 @@
+<template>
+    <img v-bind="{ src, alt }" height="16" width="16" />
+</template>
+<script>
+export default {
+    name: 'state-switch',
+    props: {
+        /**
+         * Theme for loading spinner
+         */
+        theme: {
+            type: String,
+            default: 'dark',
+            validator: theme => [
+                'dark',
+                'light'
+            ].includes(theme)
+        },
+        /**
+         * Loading, yes or no
+         * null, true or false
+         */
+        state: {
+            required: true,
+            validator: state => [
+                'yes',
+                'no',
+                'loading',
+                'true',
+                'false',
+                'null'
+            ].includes(String(state))
+        }
+    },
+    computed: {
+        src() {
+            const { theme, realState: state } = this;
+            return state === 'loading' ? `images/loading16-${theme}.gif` : `images/${state}16.png`;
+        },
+        alt() {
+            const { realState: state } = this;
+            return state.charAt(0).toUpperCase() + state.substr(1);
+        },
+        realState() {
+            const { state } = this;
+            if (['null', 'true', 'false'].includes(String(state))) {
+                return {
+                    null: 'loading',
+                    true: 'yes',
+                    false: 'no'
+                }[String(state)];
+            }
+            return state;
+        }
+    }
+};
+</script>
+<style>
+/* placeholder */
+</style>

themes-default/slim/src/index.js

@@ -28,7 +28,6 @@ import {
     AppLink,
     Asset,
     Backstretch,
-    DisplayShow,
     FileBrowser,
     Home,
     LanguageSelect,
@@ -39,8 +38,10 @@ import {
     RootDirs,
     ScrollButtons,
     SelectList,
+    Show,
     ShowSelector,
     SnatchSelection,
+    StateSwitch,
     Status
 } from './components';
 
@@ -71,7 +72,6 @@ if (window) {
         common: {},
         config: {},
         home: {},
-        manage: {},
         addShows: {}
     };
     window.webRoot = webRoot;
@@ -86,7 +86,6 @@ if (window) {
     window.components.push(AppLink);
     window.components.push(Asset);
     window.components.push(Backstretch);
-    window.components.push(DisplayShow);
     window.components.push(FileBrowser);
     window.components.push(Home);
     window.components.push(LanguageSelect);
@@ -97,8 +96,10 @@ if (window) {
     window.components.push(RootDirs);
     window.components.push(ScrollButtons);
     window.components.push(SelectList);
+    window.components.push(Show);
     window.components.push(ShowSelector);
     window.components.push(SnatchSelection);
+    window.components.push(StateSwitch);
     window.components.push(Status);
 }
 

themes-default/slim/src/router.js

@@ -21,7 +21,7 @@ const homeRoutes = [{
     name: 'editShow'
 }, {
     path: '/home/displayShow',
-    name: 'displayShow'
+    name: 'show'
 }, {
     path: '/home/snatchSelection',
     name: 'snatchSelection'