confugured webpack

.gitignore

@@ -10,4 +10,5 @@ __pycache__
 node_modules/
 package-lock.json
 *.pyc
-
+/warp/templates/headers/
+/warp/static/js/

js/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "warp_js",
+  "version": "1.0.0",
+  "description": "",
+  "main": "none",
+  "scripts": {
+    "build": "webpack-cli"
+  },
+  "author": "Sebastian Baberowski <sebastian@baberowski.com>",
+  "license": "UNLICENSED",
+  "private": true,
+  "dependencies": {
+    "@babel/core": "^7.16.0",
+    "@babel/preset-env": "^7.16.4",
+    "babel-loader": "^8.2.3",
+    "core-js": "^3.19.1",
+    "html-webpack-plugin": "^5.5.0",
+    "tabulator-tables": "^5.0.7",
+    "terser-webpack-plugin": "^5.2.5",
+    "webpack": "^5.64.2",
+    "webpack-cli": "^4.9.1"
+  }
+}

warp/static/bookings.js → js/views/bookings.js

@@ -1,4 +1,7 @@
 
+import Utils from './modules/utils.js';
+import WarpModal from './modules/modal.js';
+
 document.addEventListener("DOMContentLoaded", function(e) {
 
     var dateFilterEditor = function(cell, onRendered, success, cancel, editorParams){

warp/static/group_assign.js → js/views/groupAssign.js

@@ -1,5 +1,8 @@
 "use strict";
 
+import Utils from './modules/utils.js';
+import WarpModal from './modules/modal.js';
+
 document.addEventListener("DOMContentLoaded", function(e) {
 
     var table;

warp/static/groups.js → js/views/groups.js

@@ -1,5 +1,8 @@
 "use strict";
 
+import Utils from './modules/utils.js';
+import WarpModal from './modules/modal.js';
+
 document.addEventListener("DOMContentLoaded", function(e) {
 
     var iconFormater = function(cell, formatterParams, onRendered) {

warp/static/bookas.js → js/views/modules/bookas.js

@@ -1,9 +1,8 @@
 'use strict';
 
-if (typeof(ZoneUserData) === 'undefined')
-    throw Error('bookas requires ZoneUserData module');
+import ZoneUserData from "./zoneuserdata";
 
-function BookAs() {
+export default function BookAs() {
 
     if (typeof(BookAs.instance) !== 'undefined')
         throw Error('BookAs is a singleton');
@@ -56,7 +55,7 @@ BookAs.prototype._setSelectedLogin = function(login) {
     if (!('selectedLogin' in this))
         throw Error("BookAs not initialized")
 
-    if (!(login in this.zoneUserData.getData()))
+    if (!(login in this.zoneUserData.data))
         login = this.zoneUserData.whoami();
 
     if (this.selectedLogin !== login) {

warp/static/modal.js → js/views/modules/modal.js

@@ -1,6 +1,6 @@
 "use strict";
 
-function WarpModal() {
+export default function WarpModal() {
 
     var modalElement =  document.createElement("div");
     modalElement.className = "modal";

warp/static/seat.js → js/views/modules/seat.js

@@ -508,4 +508,6 @@ WarpSeat.prototype._createDiv = function(rootDiv, spriteURL) {
     this.seatDiv.addEventListener('mouseout',this);
 
     rootDiv.appendChild(this.seatDiv);
-};
+};
+
+export { WarpSeatFactory, WarpSeat };

warp/static/utils.js → js/views/modules/utils.js

@@ -1,6 +1,6 @@
 'use strict';
 
-function Utils() {
+export default function Utils() {
 }
 
 //TODO_X: remove the same from ZoneUserData
@@ -179,4 +179,5 @@ Utils.Listeners = function(types, async = true) {
         }
     }
 
-}
+}
+

warp/static/zone_modify_seat.js → js/views/modules/zoneModify_seat.js

@@ -1,5 +1,8 @@
 "use strict";
 
+import Utils from './utils.js';
+
+// TODO: make a base Seat class and merge it with Seat in Zone
 function Seat(id, data, overlay, parentDiv) {
 
     this.id = id;
@@ -519,3 +522,6 @@ SeatFactory.prototype._createSeat = function(sid,data) {
 
     return seat;
 }
+
+export const spriteSize = Seat.CONFIG.spriteSize;
+export { SeatFactory as default, SeatFactory };

warp/static/zoneuserdata.js → js/views/modules/zoneuserdata.js

@@ -1,12 +1,36 @@
 'use strict';
 
-function ZoneUserData() {
+import Utils from "./utils";
 
+export default function ZoneUserData() {
+
+    this.__data = null;
     this.listeners = {
         load: new Set()
     };
 }
 
+Object.defineProperty(ZoneUserData.prototype, "data", {
+    get: function() {
+
+        if (!this.__data)
+            throw Error("UserData not initialized.");
+
+        return this.__data;
+    },
+    set: function(v) {
+
+        if (this.__data)
+            throw Error("UserData already initialized.");
+
+        this.__data = v;
+        for (let l of this.listeners['load'])
+            l.call(this,this);
+    }
+});
+
+
+
 ZoneUserData.makeUserStr = function(login,name) {
     return  name + " ["+login+"]";
 };
@@ -33,17 +57,11 @@ ZoneUserData.getInstance = function() {
 
 ZoneUserData.prototype.getData = function() {
 
-    if (!this.data)
-        throw Error("UserData not initialized.");
-
     return this.data;
 }
 
 ZoneUserData.prototype.formatedIterator = function*() {
 
-    if (!this.data)
-        throw Error("UserData not initialized.");
-
     for (let login in this.data) {
         yield ZoneUserData.makeUserStr(login, this.data[login]);
     }
@@ -60,9 +78,6 @@ ZoneUserData.prototype.whoami = function() {
 
 ZoneUserData.prototype.makeUserStr = function(login) {
 
-    if (!(login in this.data))
-        throw Error('Unknown login');
-
     return ZoneUserData.makeUserStr( login, this.data[login]);
 }
 
@@ -75,31 +90,26 @@ ZoneUserData.prototype.makeUserStrRev = function (str) {
     return login;
 }
 
+// TODO switch to Utils.listeners
 ZoneUserData.prototype.on = function (type,listener) {
 
     if (type in this.listeners && typeof(listener) === 'function') {
         this.listeners[type].add(listener);
 
         // in case we finish loading before other modules register for load
         // we must fire listeners immediately
-        if (type === "load" && typeof(this.data) !== 'undefined') {
+        if (type === "load" && this.__data) {
             listener.call(this,this);
         }
     }
 }
 
-ZoneUserData.prototype._init = function() {
+ZoneUserData.init = function() {
 
     Utils.xhr.get(
         window.warpGlobals.URLs['zoneGetUsers'],
         {toastOnSuccess:false})
     .then( (e) => {
-        this.data = e.response;
-        for (let l of this.listeners['load']) {
-            l.call(this,this);
-        }
+        ZoneUserData.getInstance().data = e.response;
     })
 }
-
-
-document.addEventListener("DOMContentLoaded", function() { ZoneUserData.getInstance()._init(); } );

warp/static/users.js → js/views/users.js

@@ -1,5 +1,8 @@
 "use strict";
 
+import Utils from './modules/utils.js';
+import WarpModal from './modules/modal.js';
+
 document.addEventListener("DOMContentLoaded", function(e) {
 
     let accountTypes = [

warp/static/zone.js → js/views/zone.js

@@ -1,5 +1,11 @@
 "use strict";
 
+import Utils from './modules/utils.js';
+import WarpModal from './modules/modal.js';
+import {WarpSeatFactory,WarpSeat} from './modules/seat.js';
+import ZoneUserData from './modules/zoneuserdata.js';
+import BookAs from './modules/bookas.js';
+
 function downloadSeatData(seatFactory) {
 
     var url = window.warpGlobals.URLs['getSeat'];
@@ -606,7 +612,9 @@ function initBookAs(seatFactory) {
 
 }
 
-function initZone() {
+document.addEventListener("DOMContentLoaded", function() {
+
+    ZoneUserData.init();
 
     initSlider();
     initDateSelectorStorage();
@@ -623,6 +631,4 @@ function initZone() {
     if (window.warpGlobals.isZoneAdmin) {
         initBookAs(seatFactory);
     }
-}
-
-window.addEventListener("load",initZone);
+});

warp/static/zone_assign.js → js/views/zoneAssign.js

@@ -1,5 +1,8 @@
 "use strict";
 
+import Utils from './modules/utils.js';
+import WarpModal from './modules/modal.js';
+
 document.addEventListener("DOMContentLoaded", function(e) {
 
     var table;

warp/static/zone_modify.js → js/views/zoneModify.js

@@ -1,5 +1,9 @@
 "use strict";
 
+import Utils from './modules/utils.js';
+import WarpModal from './modules/modal.js';
+import { SeatFactory, spriteSize} from './modules/zoneModify_seat.js';
+
 document.addEventListener("DOMContentLoaded", function(e) {
 
     let chooseImgBtn = document.getElementById('chooseImgBtn');
@@ -261,8 +265,8 @@ document.addEventListener("DOMContentLoaded", function(e) {
     seatYEl.addEventListener('input', changeFactory('y'));
 
     var seatXYMax = function() {
-        seatXEl.max = zoneMapImg.width - Seat.CONFIG.spriteSize;
-        seatYEl.max = zoneMapImg.height - Seat.CONFIG.spriteSize;
+        seatXEl.max = zoneMapImg.width - spriteSize;
+        seatYEl.max = zoneMapImg.height - spriteSize;
     }
 
     if (zoneMapImg.complete)

warp/static/zones.js → js/views/zones.js

@@ -1,5 +1,8 @@
 "use strict";
 
+import Utils from './modules/utils.js';
+import WarpModal from './modules/modal.js';
+
 document.addEventListener("DOMContentLoaded", function(e) {
 
     var iconFormater = function(cell, formatterParams, onRendered) {

js/webpack.config.js

@@ -0,0 +1,65 @@
+
+const path = require('path');
+const fs = require('fs');
+
+const TerserPlugin = require("terser-webpack-plugin");
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+const warpDir = path.resolve(__dirname, '../warp');
+
+let config = [
+  {
+    entry: {},
+    mode: 'production',
+    output: {
+      path: path.join(warpDir,'static/js'),
+      filename: '[name].[contenthash].js',
+      clean: true,
+    },
+    optimization: {
+      moduleIds: 'deterministic',
+      runtimeChunk: {
+        name: 'webpack_runtime',
+      },
+      minimize: true,
+      minimizer: [new TerserPlugin()],
+      splitChunks: {
+        chunks: 'all',
+        minChunks: 2,
+        minSize: 0,
+        minSizeReduction: 0,
+      },
+    },
+    plugins: [],
+  },
+]
+
+function fillConfig(config,directory) {
+
+  directory = path.resolve(directory);
+  const outputDir = path.join(warpDir,'templates/headers');
+
+  fs.readdirSync(directory,{withFileTypes:true}).forEach( (e) => {
+
+    if (e.isFile() && e.name.endsWith('.js')) {
+
+      let chunk = e.name.slice(0,-3);
+
+      config.entry[chunk] = path.join(directory, e.name);
+      config.plugins.push(
+        new HtmlWebpackPlugin({
+          filename: path.join(outputDir, chunk+'.html'),
+          publicPath: '/static/js',
+          minify: false,
+          chunks: [chunk],
+          inject: false,
+          templateContent: (v) => v.htmlWebpackPlugin.tags.headTags.toString(),
+        }),
+      )
+    }
+  });
+};
+
+fillConfig(config[0],'views');
+
+module.exports = config;

warp/templates/base.html

@@ -46,7 +46,5 @@
     </div>
 
     <script type="text/javascript" src="{{ url_for('static', filename='materialize/materialize.min.js') }}"></script>
-    <script type="text/javascript" src="{{ url_for('static', filename='modal.js') }}"></script>
-    <script type="text/javascript" src="{{ url_for('static', filename='utils.js') }}"></script>
 </body>
 </html>

warp/templates/base_logged.html

@@ -7,6 +7,8 @@
         window.warpGlobals.login = "{{ g.login }}";
     </script>
 
+    {% include 'headers/' ~ (request.endpoint|replace('view.','',1)) ~ '.html' ignore missing %}
+
 {% endblock %}
 
 {% block overlays %}