Migrated /plugin/<pluginName> route

platypush/backend/http/app/routes/plugin.py

@@ -1,12 +1,9 @@
-import os
-
 from flask import Blueprint, render_template
 
-from platypush.backend.http.app import template_folder, static_folder
-from platypush.backend.http.app.utils import authenticate, get_websocket_port
+from platypush.backend.http.app import template_folder
+from platypush.backend.http.app.utils import authenticate
 
 from platypush.backend.http.utils import HttpUtils
-from platypush.config import Config
 
 panel = Blueprint('plugin', __name__, template_folder=template_folder)
 
@@ -19,36 +16,8 @@ __routes__ = [
 @panel.route('/plugin/<plugin>', methods=['GET'])
 @authenticate()
 def plugin_route(plugin):
-    """ Route to the plugin pane template """
-    js_folder = os.path.abspath(os.path.join(template_folder, '..', 'static', 'js'))
-    style_folder = os.path.abspath(os.path.join(template_folder, '..', 'static', 'css', 'dist'))
-    template_file = os.path.join(template_folder, 'plugins', plugin, 'index.html')
-    script_file = os.path.join(js_folder, 'plugins', plugin, 'index.js')
-    style_file = os.path.join(style_folder, 'webpanel', 'plugins', plugin+'.css')
-
-    conf = Config.get(plugin) or {}
-    if os.path.isfile(template_file):
-        conf['_template_file'] = '/' + '/'.join(template_file.split(os.sep)[-3:])
-
-    if os.path.isfile(script_file):
-        conf['_script_file'] = '/'.join(script_file.split(os.sep)[-4:])
-
-    if os.path.isfile(style_file):
-        conf['_style_file'] = 'css/dist/' + style_file[len(style_folder)+1:]
-
-    http_conf = Config.get('backend.http')
-    return render_template('plugin.html',
-                           plugin=plugin,
-                           conf=conf,
-                           template=conf.get('_template_file', {}),
-                           script=conf.get('_script_file', {}),
-                           style=conf.get('_style_file', {}),
-                           utils=HttpUtils,
-                           token=Config.get('token'),
-                           websocket_port=get_websocket_port(),
-                           template_folder=template_folder,
-                           static_folder=static_folder,
-                           has_ssl=http_conf.get('ssl_cert') is not None)
+    """ Route to the plugin panel template """
+    return render_template('index.html', plugin=plugin, utils=HttpUtils)
 
 
 # vim:sw=4:ts=4:et:

platypush/backend/http/app/routes/plugins/media/__init__.py

@@ -127,20 +127,11 @@ def stream_media(media_id, req):
 
     headers['Content-Length'] = content_length
 
-    if 'webplayer' in req.args:
-        return render_template('webplayer.html',
-                               media_url=media_hndl.url.replace(
-                                   get_remote_base_url(), ''),
-                               media_type=media_hndl.mime_type,
-                               subtitles_url='/media/subtitles/{}.vtt'.
-                               format(media_id) if media_hndl.subtitles
-                               else None)
-    else:
-        return Response(media_hndl.get_data(
-            from_bytes=from_bytes, to_bytes=to_bytes,
-            chunk_size=STREAMING_CHUNK_SIZE),
-            status_code, headers=headers, mimetype=headers['Content-Type'],
-            direct_passthrough=True)
+    return Response(media_hndl.get_data(
+        from_bytes=from_bytes, to_bytes=to_bytes,
+        chunk_size=STREAMING_CHUNK_SIZE),
+        status_code, headers=headers, mimetype=headers['Content-Type'],
+        direct_passthrough=True)
 
 
 def add_subtitles(media_id, req):

platypush/backend/http/app/routes/settings.py

@@ -1,27 +0,0 @@
-from flask import Blueprint, request, render_template
-
-from platypush.backend.http.app import template_folder, static_folder
-from platypush.backend.http.app.utils import authenticate
-from platypush.backend.http.utils import HttpUtils
-from platypush.config import Config
-from platypush.user import UserManager
-
-settings = Blueprint('settings', __name__, template_folder=template_folder)
-
-# Declare routes list
-__routes__ = [
-    settings,
-]
-
-
-@settings.route('/settings', methods=['GET'])
-@authenticate()
-def settings():
-    """ Settings page """
-    user_manager = UserManager()
-    users = user_manager.get_users()
-    return render_template('settings/index.html', utils=HttpUtils, users=users,
-                           static_folder=static_folder, token=Config.get('token'))
-
-
-# vim:sw=4:ts=4:et:

platypush/backend/http/webapp/src/router/index.js

@@ -4,6 +4,7 @@ import NotFound from "@/views/NotFound";
 import Login from "@/views/Login";
 import Register from "@/views/Register";
 import Panel from "@/views/Panel";
+import Plugin from "@/views/Plugin";
 
 const routes = [
   {
@@ -18,6 +19,12 @@ const routes = [
     component: Dashboard,
   },
 
+  {
+    path: "/plugin/:plugin",
+    name: "Plugin",
+    component: Plugin,
+  },
+
   {
     path: "/login",
     name: "Login",

platypush/backend/http/webapp/src/views/Plugin.vue

@@ -0,0 +1,114 @@
+<template>
+  <main>
+    <Loading v-if="loading" />
+    <div class="canvas" v-else>
+      <component :is="component" :config="config" :plugin-name="pluginName" />
+    </div>
+  </main>
+</template>
+
+<script>
+import {defineAsyncComponent} from "vue";
+import Utils from '@/Utils'
+import Loading from "@/components/Loading";
+import Nav from "@/components/Nav";
+import Settings from "@/components/panels/Settings/Index";
+
+export default {
+  name: 'Panel',
+  mixins: [Utils],
+  components: {Settings, Nav, Loading},
+
+  data() {
+    return {
+      loading: false,
+      config: {},
+      plugins: {},
+      backends: {},
+      procedures: {},
+      component: undefined,
+      hostname: undefined,
+      selectedPanel: undefined,
+    }
+  },
+
+  computed: {
+    pluginName() {
+      return this.$route.params.plugin
+    },
+  },
+
+  methods: {
+    async initPanel() {
+      const componentName = this.pluginName.split('.').map((token) => token[0].toUpperCase() + token.slice(1)).join('')
+      let comp = null
+
+      try {
+        comp = await import(`@/components/panels/${componentName}/Index`)
+      } catch (e) {
+        console.error(e)
+        this.notify({
+          error: true,
+          title: `Cannot load plugin ${this.pluginName}`,
+          text: e.toString(),
+        })
+
+        return
+      }
+
+      this.component = defineAsyncComponent(async () => { return comp })
+      this.$options.components[name] = this.component
+    },
+
+    async initConfig() {
+      const config = await this.request('config.get')
+      this.config = config[this.pluginName] || {}
+      this.hostname = await this.request('config.get_device_id')
+    },
+  },
+
+  async mounted() {
+    this.loading = true
+
+    try {
+      await this.initConfig()
+      await this.initPanel()
+    } finally {
+      this.loading = false
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+main {
+  height: 100%;
+  display: flex;
+
+  @media screen and (max-width: $tablet) {
+    flex-direction: column;
+  }
+
+  .canvas {
+    display: flex;
+    flex-grow: 100;
+    background: $menu-panel-bg;
+    overflow: auto;
+
+    .panel {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      margin: 0 !important;
+      box-shadow: none !important;
+      overflow: auto;
+    }
+  }
+}
+</style>
+
+<style>
+html {
+  overflow: auto !important;
+}
+</style>