Rewrite of plugins page

stashr/templates/settings_page_plugins.html

@@ -8,7 +8,7 @@
 
 <div id="app">
     <plugins ref="plugins" v-bind:plugins="plugins"></plugins>
-    <modals></modals>
+    <modals v-bind:plugin="plugin"></modals>
 </div>
 
 {% endblock %}
@@ -16,7 +16,7 @@
 {% block script %}
 
 Vue.component('modals', {
-    props: [],
+    props: ['plugin'],
     template: `
     <div>
         <div class="modal" id="modalUpload" tabindex="-1" role="dialog" aria-labelledby="notesModal" aria-hidden="true">
@@ -40,8 +40,66 @@ Vue.component('modals', {
                     </div>
                 </div>
             </div>
+        </div>
+        <div class="modal" id="modalPlugin" tabindex="-1" role="dialog" aria-labelledby="notesModal" aria-hidden="true">
+            <div class="modal-dialog modal-dialog-centered" role="document">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title" id="notesModalTitle">
+                            [[ plugin.plugin_name ]]
+                        </h5>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                    </div>
+                    <div class="modal-body">
+                        <strong>Version:</strong> [[ plugin.plugin_version ]]<br />
+                        <strong>Author:</strong> [[ plugin.plugin_author ]]<br />
+                        [[ plugin.plugin_description ]]
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn" v-bind:class="pluginClass" data-bs-dismiss="modal" @click="togglePlugin">[[ pluginAction ]]</button>
+                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal" data-bs-toggle="modal" data-bs-target="#deletePlugin">Delete</button>
+                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="modal" id="deletePlugin" tabindex="-1" role="dialog" aria-labelledby="notesModal" aria-hidden="true">
+            <div class="modal-dialog modal-dialog-centered" role="document">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title" id="notesModalTitle">
+                            Delete Plugin
+                        </h5>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                    </div>
+                    <div class="modal-body">
+                        Are you sure you want to delete [[ plugin.plugin_name ]]
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal" @click="deletePlugin">Delete</button>
+                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
     `,
+    computed: {
+        pluginClass() {
+            let classname = 'btn-warning';
+            if(this.plugin.plugin_state == 'disabled') {
+                classname = 'btn-success';
+            };
+            return classname;
+        },
+        pluginAction() {
+            let text = 'Disable';
+            if(this.plugin.plugin_state == 'disabled') {
+                text = 'Enable';
+            };
+            return text;
+        }
+    },
     methods: {
         uploadFile() {
             let formData = new FormData();
@@ -62,42 +120,6 @@ Vue.component('modals', {
                     }
                 })
         },
-    },
-    delimiters: ["[[","]]"]
-})
-
-Vue.component('plugin',{
-    props:['plugin'],
-    template: `
-    <tr>
-        <th scope="row">[[ plugin.plugin_name ]]</th>
-        <td>[[ plugin.plugin_description ]]</td>
-        <td>[[ plugin.plugin_version ]]</td>
-        <td>[[ plugin.plugin_author ]]</td>
-        <td>[[ plugin.plugin_url ]]</td>
-        <td>[[ plugin.plugin_license ]]</td>
-        <td>[[ plugin.plugin_state ]]</td>
-        <td><button type="button" class="btn" v-bind:class="pluginClass" @click="togglePlugin">[[ pluginAction ]]</button>    </td>
-        <td><button typoe="button" class="btn btn-danger" @click="deletePlugin">Delete</td>
-    </tr>
-    `,
-    computed: {
-        pluginClass() {
-            let classname = 'btn-danger';
-            if(this.plugin.plugin_state == 'disabled') {
-                classname = 'btn-success';
-            };
-            return classname;
-        },
-        pluginAction() {
-            let text = 'Disable';
-            if(this.plugin.plugin_state == 'disabled') {
-                text = 'Enable';
-            };
-            return text;
-        }
-    },
-    methods: {
         togglePlugin() {
             if(this.plugin.plugin_state == 'disabled') {
                 console.log('Enabling')
@@ -131,47 +153,64 @@ Vue.component('plugin',{
     delimiters: ["[[","]]"]
 })
 
+Vue.component('plugin',{
+    props:['plugin'],
+    template: `
+    <li @click="changePlugin" role="button" class='col-12 col-md-3 m-1 p-1 border rounded text-center text-light' v-bind:class="pluginStatusBG" data-bs-toggle="modal" data-bs-target="#modalPlugin">
+        <strong>[[ plugin.plugin_name ]]</strong><br />
+        [[ plugin.plugin_version ]]<br />
+        [[ plugin.plugin_author ]]
+    </li>
+    `,
+    computed: {
+        pluginStatusBG() {
+            let classname = 'bg-danger';
+            if(this.plugin.plugin_state == 'enabled') {
+                classname = 'bg-success'
+            }
+            return classname;
+        },
+    },
+    methods: {
+        changePlugin() {
+            app.changePlugin(this.plugin)
+        }
+    },
+    delimiters: ["[[","]]"]
+})
+
 Vue.component('plugins',{
     props: ['plugins'],
     template: `
-    <div class="row r-10 m-2">
+    <div class="row w-100">
         <div class="col col-12">
-            <div class="row">
+            <div class="row w-100">
                 <div class="col-sm-12 col-md-6 text-center text-md-start">
                     <h2>Plugins</h2>
                 </div>
                 <div class="col-sm-12 col-md-6 text-center text-md-end">
+                    <button type="button" class="btn btn-warning" @click="restartServer">Restart Server</button>
                     <button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#modalUpload">Install Plugin</button>
                 </div>
             </div>
             <hr />
             <div class="row">
-                <table class="table">
+                <ul class="d-flex flex-wrap w-100 m-0 p-0 justify-content-center">
-                    <thead>
+                    <plugin
-                        <tr>
+                        v-for="plugin in plugins"
-                            <th scope="col">Name</th>
+                        v-bind:plugin="plugin"
-                            <th scope="col">Description</th>
+                        v-bind:key="plugin.plugin_name"
-                            <th scope="col">Version</th>
+                    ></plugin>
-                            <th scope="col">Author</th>
+                </ul>
-                            <th scope="col">URL</th>
-                            <th scope="col">License</th>
-                            <th scope="col">State</th>
-                            <th scope="col">Action</th>
-                            <th scope="col">Delete</th>
-                        </tr>
-                    </thead>
-                    <tbody class="tablebody">
-                        <plugin
-                            v-for="plugin in plugins"
-                            v-bind:plugin="plugin"
-                            v-bind:key="plugin.plugin_name"
-                        ></plugin>
-                    </tbody>
-                </table>
             </div>
         </div>
     </div>    
     `,
+    methods: {
+        restartServer() {
+            app.restartServer()
+        }
+    },
     delimiters: ["[[","]]"]
 })
 
@@ -179,6 +218,7 @@ var app = new Vue({
     el: '#app',
     data: {
         plugins: [],
+        plugin: []
     },
     created() {
         this.getPlugins()
@@ -188,8 +228,21 @@ var app = new Vue({
             axios.get('{{ url_for('api.api_get_plugins') }}')
             .then(res => {
                 this.plugins = res.data.results
+                this.plugin = this.plugins[0]
             })
         },
+        changePlugin(plugin) {
+            this.plugin = plugin
+        },
+        restartServer() {
+            axios.post('{{ url_for('api.restart_server') }}')
+                .then(res=>{
+                    if(res.data.status_code == 200) {
+                        stashrToast('Restarting Server', 'success')
+                    }
+                })
+                .catch()
+        },
     },
     delimiters: ["[[","]]"]
 })