vue update

aircox/static/aircox/css/admin.css

@@ -1,24 +1,24 @@
-/*!**************************************************************************************************************************************************************************************************************************************!*\
+/*!*************************************************************************************************************************************************************************************************************************************!*\
-  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-24.use[1]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-24.use[2]!../node_modules/sass-loader/dist/cjs.js??clonedRuleSet-24.use[3]!./src/assets/admin.scss ***!
+  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-24.use[1]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-24.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-24.use[3]!./src/assets/admin.scss ***!
-  \**************************************************************************************************************************************************************************************************************************************/
+  \*************************************************************************************************************************************************************************************************************************************/
-#app.admin .navbar .navbar-brand {
+.admin .navbar .navbar-brand {
-  padding-right: 1em; }
+  padding-right: 1em;
-
+}
-#app.admin .navbar .navbar-brand img {
+.admin .navbar .navbar-brand img {
   margin: 0em 0.4em;
   margin-top: 0.3em;
-  max-height: 3em; }
+  max-height: 3em;
-
+}
-#app.admin .breadcrumbs {
+.admin .breadcrumbs {
-  margin-bottom: 1em; }
+  margin-bottom: 1em;
-
+}
-#app.admin .results > #result_list {
+.admin .results > #result_list {
   width: 100%;
-  margin: 1em 0em; }
+  margin: 1em 0em;
-
+}
-#app.admin ul.menu-list li {
+.admin ul.menu-list li {
-  list-style-type: none; }
+  list-style-type: none;
-
+}
-#app.admin .submit-row a.deletelink {
+.admin .submit-row a.deletelink {
-  height: 35px; }
+  height: 35px;
-
+}

aircox/static/aircox/js/admin.js

@@ -16,7 +16,7 @@
   \**********************/
 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _assets_admin_scss__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./assets/admin.scss */ \"./src/assets/admin.scss\");\n/* harmony import */ var _index_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./index.js */ \"./src/index.js\");\n/* harmony import */ var _app__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./app */ \"./src/app.js\");\n/* harmony import */ var _components__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./components */ \"./src/components/index.js\");\n\n\n\n\nconst AdminApp = { ..._app__WEBPACK_IMPORTED_MODULE_2__[\"default\"],\n  components: { ..._app__WEBPACK_IMPORTED_MODULE_2__[\"default\"].components,\n    ..._components__WEBPACK_IMPORTED_MODULE_3__.admin\n  }\n};\n/* harmony default export */ __webpack_exports__[\"default\"] = (AdminApp);\nwindow.App = AdminApp;\n\n//# sourceURL=webpack://aircox_assets/./src/admin.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _assets_styles_scss__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./assets/styles.scss */ \"./src/assets/styles.scss\");\n/* harmony import */ var _assets_admin_scss__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./assets/admin.scss */ \"./src/assets/admin.scss\");\n/* harmony import */ var _index_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./index.js */ \"./src/index.js\");\n/* harmony import */ var _app__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./app */ \"./src/app.js\");\n/* harmony import */ var _components__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./components */ \"./src/components/index.js\");\n\n\n\n\n\nconst AdminApp = { ..._app__WEBPACK_IMPORTED_MODULE_3__[\"default\"],\n  components: { ..._app__WEBPACK_IMPORTED_MODULE_3__[\"default\"].components,\n    ..._components__WEBPACK_IMPORTED_MODULE_4__.admin\n  }\n};\n/* harmony default export */ __webpack_exports__[\"default\"] = (AdminApp);\nwindow.App = AdminApp;\n\n//# sourceURL=webpack://aircox-assets/./src/admin.js?");
 
 /***/ }),
 
@@ -26,7 +26,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _ass
   \*******************************/
 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
-eval("__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-extract-plugin\n\n\n//# sourceURL=webpack://aircox_assets/./src/assets/admin.scss?");
+eval("__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-extract-plugin\n\n\n//# sourceURL=webpack://aircox-assets/./src/assets/admin.scss?");
 
 /***/ })
 

aircox/static/aircox/js/core.js

@@ -16,7 +16,7 @@
   \*********************/
 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _index_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./index.js */ \"./src/index.js\");\n/* harmony import */ var _app_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./app.js */ \"./src/app.js\");\n\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (_app_js__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\nwindow.App = _app_js__WEBPACK_IMPORTED_MODULE_1__[\"default\"];\n\n//# sourceURL=webpack://aircox_assets/./src/core.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _index_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./index.js */ \"./src/index.js\");\n/* harmony import */ var _app_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./app.js */ \"./src/app.js\");\n\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (_app_js__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\nwindow.App = _app_js__WEBPACK_IMPORTED_MODULE_1__[\"default\"];\n\n//# sourceURL=webpack://aircox-assets/./src/core.js?");
 
 /***/ })
 

aircox/templates/admin/base.html

@@ -8,6 +8,7 @@
     <link rel="stylesheet" type="text/css" href="{% static "admin/css/base.css" %}">
     <link rel="stylesheet" type="text/css" href="{% static "aircox/css/chunk-common.css" %}"/>
     <link rel="stylesheet" type="text/css" href="{% static "aircox/css/chunk-vendors.css" %}"/>
+    <link rel="stylesheet" type="text/css" href="{% static "aircox/css/admin.css" %}"/>
     <script src="{% static "aircox/js/chunk-common.js" %}"></script>
     <script src="{% static "aircox/js/chunk-vendors.js" %}"></script>
     <script src="{% static "aircox/js/admin.js" %}"></script>
@@ -29,20 +30,27 @@
 <body class="{% if is_popup %}popup {% endif %}{% block bodyclass %}{% endblock %}"
   data-admin-utc-offset="{% now "Z" %}">
     <script id="init-script">
-    window.addEventListener('load', function() {
+    function vuePre(selector) {
-        const elms = document.querySelectorAll('script')
+        const elms = document.querySelectorAll(selector)
         for(const elm of elms) {
             elm.setAttribute('v-pre', true)
         }
-        
+    }
+    
+    window.addEventListener('load', function() {
         {% block init-scripts %}
-        aircox.init(null, {hotReload: false})
+        aircox.init(null, {
+            hotReload: false,
+            {% if not init_app %}
+            initBuilder: false,
+            {% endif %}
+        })
         {% endblock %}
     })
     </script>
 
 <!-- Container -->
-<div id="app" class="admin">
+<div class="admin">
     {% if not is_popup %}
     <!-- Header -->
     <nav class="navbar is-dark has-shadow">
@@ -167,6 +175,7 @@
     {% endblock messages %}
 
     <!-- Content -->
+    <div id="app">
     <div id="content" class="{% block coltype %}colM{% endblock %}">
         {% block pretitle %}{% endblock %}
         {% block content_title %}{% if title %}<h1 class="title is-3">{{ title }}</h1>{% endif %}{% endblock %}
@@ -177,6 +186,7 @@
         {% block sidebar %}{% endblock %}
         <br class="clear">
     </div>
+    </div>
     <!-- END Content -->
 
     {% block footer %}<div id="footer"></div>{% endblock %}

aircox/views/admin.py

@@ -12,6 +12,8 @@ __all__ = ['AdminMixin', 'StatisticsView']
 
 class AdminMixin(LoginRequiredMixin, UserPassesTestMixin):
     title = ''
+    init_app = True
+    """ If true, create vue app. """
 
     @property
     def station(self):
@@ -24,6 +26,7 @@ class AdminMixin(LoginRequiredMixin, UserPassesTestMixin):
         kwargs.update(admin.site.each_context(self.request))
         kwargs.setdefault('title', self.title)
         kwargs.setdefault('station', self.station)
+        kwargs.setdefault('init_app', self.init_app)
         return super().get_context_data(**kwargs)
 
 

assets/package.json

@@ -19,10 +19,12 @@
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-eslint": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
+    "bulma": "^0.9.3",
     "eslint": "^7.32.0",
     "eslint-plugin-vue": "^8.0.3",
+    "sass": "^1.49.9",
     "sass-loader": "^12.6.0",
-    "bulma": "^0.9.3"
+    "vue-cli": "^2.9.6"
   },
   "eslintConfig": {
     "root": true,

assets/src/admin.js

@@ -1,3 +1,4 @@
+import './assets/styles.scss'
 import './assets/admin.scss'
 import './index.js'
 

assets/src/appBuilder.js

@@ -56,7 +56,7 @@ export default class Builder {
     createApp({el, title=null, content=null, ...config}, props) {
         const container = document.querySelector(el)
         if(!container)
-            throw `Error: can't get element ${el}`
+            return
         if(content)
             container.innerHTML = content
         if(title)

assets/src/assets/admin.scss

@@ -1,5 +1,5 @@
 
-#app.admin {
+.admin {
     .navbar .navbar-brand {
         padding-right: 1em;
     }

assets/src/assets/styles.scss

@@ -2,8 +2,6 @@
 @import "~bulma/sass/utilities/_all.sass";
 @import "~bulma/sass/components/dropdown.sass";
 
-@import './admin.scss';
-
 $body-background-color: $light;
 
 @import "~bulma";

assets/src/index.js

@@ -32,16 +32,20 @@ window.aircox = {
     /**
      * Initialize main application and player.
      */
-    init(props=null, {config=null, builder=null, initPlayer=true, hotReload=false}={}) {
+    init(props=null, {config=null, builder=null, initBuilder=true,
-        builder = builder || this.builder
+                      initPlayer=true, hotReload=false}={})
-        this.builder = builder
+    {
-        if(config || window.App)
+        if(initBuilder) {
-            builder.config = config || window.App
+            builder = builder || this.builder
-        builder.title = document.title
+            this.builder = builder
-        builder.mount({props})
+            if(config || window.App)
+                builder.config = config || window.App
+            builder.title = document.title
+            builder.mount({props})
 
-        if(hotReload)
+            if(hotReload)
-            builder.enableHotReload(hotReload)
+                builder.enableHotReload(hotReload)
+        }
 
         if(initPlayer) {
             let playerBuilder = this.playerBuilder

package.json

@@ -1,31 +0,0 @@
-{
-  "name": "aircox-assets",
-  "version": "0.0.0",
-  "description": "Assets for Aircox Web",
-  "main": "index.js",
-  "author": "bkfox",
-  "license": "AGPL",
-  "devDependencies": {
-    "@fortawesome/fontawesome-free": "^6.0.0",
-    "bulma": "^0.9.3",
-    "css-loader": "^6.7.1",
-    "file-loader": "^6.2.0",
-    "lodash": "^4.17.21",
-    "mini-css-extract-plugin": "^2.6.0",
-    "node-sass": "^7.0.1",
-    "sass-loader": "^12.6.0",
-    "style-loader": "^3.3.1",
-    "vue-loader": "^17.0.0",
-    "vue-style-loader": "^4.1.3",
-    "vue-template-compiler": "^2.6.14",
-    "webpack": "^5.70.0",
-    "webpack-cli": "^4.9.2"
-  },
-  "dependencies": {
-    "@vue/cli": "^5.0.3",
-    "vue": "^3.2.31"
-  },
-  "scripts": {
-    "build": "webpack --config webpack.config.js"
-  }
-}

webpack.config.js

@@ -1,103 +0,0 @@
-const path = require('path');
-const webpack = require('webpack');
-
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-// const { createLodashAliases } = require('lodash-loader');
-const { VueLoaderPlugin } = require('vue-loader');
-
-
-new webpack.DefinePlugin({
-    __VUE_OPTIONS_API__: true,
-    __VUE_PROD_DEVTOOLS__: false,
-})
-
-module.exports = (env, argv) => Object({
-    context: __dirname,
-    entry: {
-        main: './assets/public/index',
-        admin: './assets/admin/index',
-        streamer: './assets/streamer/index',
-    },
-
-    output: {
-        path: path.resolve('aircox/static/aircox'),
-        filename: '[name].js',
-        chunkFilename: '[name].js',
-    },
-
-    optimization: {
-        //usedExports: true,
-        // concatenateModules: argv.mode == 'production' ? true : false,
-
-        splitChunks: {
-            cacheGroups: {
-                vendor: {
-                    name: 'vendor',
-                    chunks: 'initial',
-                    enforce: true,
-
-                    test: /[\\/]node_modules[\\/]/,
-                },
-                /*admin: {
-                    name: 'admin',
-                    chunks: 'initial',
-                    enforce: false,
-                    test: /assets[\\/]admin[\\/]/,
-                },*/
-
-                /*noscript: {
-                    name: 'noscript',
-                    chunks: 'initial',
-                    enforce: true,
-                    test: /noscript/,
-                }*/
-            }
-        }
-    },
-
-    plugins: [
-        new MiniCssExtractPlugin({
-            filename: "[name].css",
-            chunkFilename: "[id].css"
-        }),
-        new VueLoaderPlugin(),
-    ],
-
-    module: {
-        rules: [
-            { test: /\.vue$/, loader: 'vue-loader' },
-            {
-                test: /\/node_modules\//,
-                sideEffects: false
-            },
-            {
-                test: /\.s?css$/,
-                use: [ { loader: MiniCssExtractPlugin.loader },
-                       { loader: 'css-loader' },
-                       { loader: 'sass-loader' , options: { sourceMap: true }} ],
-            },
-            {
-                test: /\.(ttf|eot|svg|woff2?)$/,
-                use: [{
-                    loader: 'file-loader',
-                    options: {
-                        name: '[name].[ext]',
-                        outputPath: 'fonts/',
-                    }
-                }],
-            },
-        ],
-    },
-
-    resolve: {
-        alias: {
-            vue: 'vue/dist/vue.esm-browser.js',
-        },
-        modules: [
-            './assets',
-            './node_modules',
-        ],
-        extensions: ['.js', '.vue', '.css', '.scss', '.styl', '.ttf']
-    },
-})
-