implement create bundle, implement text alignement

locales/en/translation.json

@@ -29,6 +29,7 @@
   "admin": {
     "dashboard": {
       "allBundles": "Available Bundles",
+      "bundleName": "Directory Name",
       "slidesInRotation": "Slides in rotation",
       "preview": "Preview",
       "program": "Program"

locales/fi/translation.json

@@ -14,7 +14,7 @@
     "displayTime": "Näytä aika",
     "startStream": "Aloita suoratoisto",
     "forceReload": "Lataa uudelleen",
-    "createNew": "Luo Uusi dia",
+    "createNew": "Luo Uusi",
     "createNewSlide": "Luo uusi dia",
     "addWebPage": "Lisää Web-sivu",
     "announce": "Ilmoita"
@@ -29,6 +29,7 @@
   "admin": {
     "dashboard": {
       "allBundles": "DiaPaketit",
+      "bundleName": "Hakemiston Nimi",
       "slidesInRotation": "Diakierto",
       "preview": "Esikatselu",
       "program": "Ohjelma"

modules/admin.js

@@ -271,8 +271,39 @@ class admin {
                 }
             });
 
-            /** edit web links **/
 
+            socket.on("admin.createBundle", function (data) {
+                cli.info("@ create Bundle");
+                console.log(data);
+
+                try {
+                    if (!fs.existsSync("data/" + data.bundle)) {
+                        fs.mkdirSync("data/" + data.bundle);
+                        fs.mkdirSync("data/" + data.bundle + "/backgrounds");
+                        fs.mkdirSync("data/" + data.bundle + "/images");
+                        fs.mkdirSync("data/" + data.bundle + "/render");
+                        fs.mkdirSync("data/" + data.bundle + "/slides");
+
+                        var tempData =JSON.parse(fs.readFileSync("templates/bundle/bundle.json").toString());
+                        tempData.displayName = data.bundle;
+                        fs.writeFileSync("data/" + data.bundle + "/bundle.json", JSON.stringify(tempData));
+
+                        fs.copyFileSync("templates/bundle/slides.json", "data/" + data.bundle + "/slides.json");
+                        fs.copyFileSync("templates/bundle/backgrounds/bg.jpg", "data/" + data.bundle + "/backgrounds/bg.jpg");
+                        bundleManager.getBundle(data.bundle);
+                        syncDashboard(io, data.displayId);
+                    } else {
+                        socket.emit("callback.error", "Error: bundle already exists.");
+                        syncDashboard(io, data.displayId);
+                    }
+                } catch (err) {
+                    cli.error(err, "Error while creating new bundle");
+                    socket.emit("callback.error", "Error: " + err);
+                }
+            });
+
+
+            /** edit web links **/
             socket.on('admin.editLink', function (data) {
                 let bundle = self.bundleManager.getBundle(data.bundleName);
                 let bundleData = bundle.getBundleData();

modules/bundleManager.js

@@ -10,8 +10,13 @@ let cli = require("./cli.js");
 class bundleManager {
 
     constructor() {
+        this.syncBundles();
+    }
+
+    syncBundles() {
         this.bundles = {};
         let dirs = getDirectories("./data");
+        dirs.sort();
 
         for (let name of dirs) {
             let data = getJson("./data/" + name + "/bundle.json");

public/js/dashboard.js

@@ -19,6 +19,9 @@ socket.on("callback.update", function (data) {
     }
 });
 
+socket.on("callback.error", function (data) {
+    alert(data);
+});
 
 socket.on("callback.dashboard.sync", function (data) {
     displayId = parseInt(data.displayId);
@@ -209,6 +212,23 @@ function editSlide(name, type) {
     }
 }
 
+function createNewBundle() {
+    $('#newBundle')
+        .modal({
+            closable: true,
+            onDeny: function () {
+                $('#newBundle').modal("hide");
+                return false;
+            },
+            onApprove: function () {
+                emit("admin.createBundle", {"bundle": $("#newBundleDirName").val()})
+                $("#newBundleDirName").val("");
+                $('#newBundle').modal("hide");
+            }
+        })
+        .modal('show');
+}
+
 function editBundle(bundleName) {
     window.open("/admin/edit/bundleProperties?bundle=" + bundleName, '_blank', 'location=no,height=500,width=700,scrollbars=yes,status=no');
 }

public/js/edit.js

@@ -122,6 +122,14 @@ function displayTime() {
     $('#time2').html(time);
 }
 
+function setAlign(align) {
+        var object = canvas.getActiveObject();
+        if (object.type === "i-text") {
+            object.textAlign = align;
+        }
+        canvas.renderAll();
+}
+
 
 function setZindex(value) {
     switch (value) {
@@ -169,7 +177,6 @@ socket.on('callback.save', function (data) {
 
 socket.on('callback.edit.updateFileList', function (data) {
     if (data.error) {
-        console.log(data);
         alert(data.error);
     } else {
         openImageBrowser();
@@ -177,17 +184,14 @@ socket.on('callback.edit.updateFileList', function (data) {
 });
 
 socket.on('callback.edit', function (data) {
+    bundleData = data.bundleData;
     canvas.clear();
-    console.log(data);
     if (data.slideData.name != null) {
         slideName = data.slideData.name;
     }
 
     $("#duration").val(data.slideData.duration + "");
 
-    console.log(data.slideData.displayTime);
-
-
     if (data.slideData.displayTime !== null) {
         $("#override").checkbox('set checked');
         if (data.slideData.displayTime) {
@@ -243,7 +247,6 @@ socket.on('callback.edit', function (data) {
         nextSlide(data, true);
     }
 
-    bundleData = data.bundleData;
     setBackground(bundleData.background);
 });
 
@@ -276,9 +279,7 @@ function parseUrl(url) {
 }
 
 function nextSlide(data) {
-    canvas.loadFromJSON(data.json, function () {
-        canvas.renderAll();
-    }, function (o, object) {
+    canvas.loadFromJSON(data.json, canvas.renderAll.bind(canvas), function (o, object) {
 
         if (object.type === "i-text") {
             object.setOptions(bundleData.styleText);

routes/index.js

@@ -1,4 +1,5 @@
 let express = require('express');
+let authMiddleWare = require('../modules/auth.js');
 let router = express.Router();
 let fs = require("fs");
 let config = require("../config.js");
@@ -7,6 +8,8 @@ const cli = require('../modules/cli.js');
 
 module.exports = function (websocket) {
 
+    router.use(authMiddleWare);
+
     router.get('/', function (req, res, next) {
         res.header('Access-Control-Allow-Origin', '*');
         res.render('index', {config: config});

templates/bundle/bundle.json

@@ -7,11 +7,11 @@
     "fill": "#f90",
     "fontSize": 56,
     "fontWeight": 900,
-    "fontFamily": "Arial Black"
+    "fontFamily": "Arial"
   },
   "styleText": {
     "fill": "#fff",
-    "fontFamily": "Arial Black",
+    "fontFamily": "Arial",
     "fontSize": 42,
     "fontWeight": 900
   }

views/admin/dashboard.twig

@@ -88,6 +88,7 @@
                     <h1 class="ui inverted header">
                         {{ t("admin.dashboard.allBundles") }}
                     </h1>
+                    <button class="ui basic inverted button" onclick="createNewBundle();">  {{ t("actions.createNew") }}</button>
 
                     <div id="allBundles" class="ui list">
                     </div>
@@ -130,6 +131,22 @@
         </div>
     </div>
 
+<!-- modal -->
+    <div id="newBundle" class="ui modal">
+        <div class="header">{{ t("actions.createNew") }}</div>
+        <div class="ui scrolling content form">
+
+
+                <label>{{ t("admin.dashboard.bundleName") }}</label>
+                <input class="ui input" type="text" id="newBundleDirName" value="" required/>
+
+        </div>
+        <div class="actions">
+            <div class="ui ok button">{{ t("actions.save") }}</div>
+            <div class="ui cancel button">{{ t("actions.cancel") }}</div>
+        </div>
+    </div>
+
     <script>
         var socket = io.connect("{{ config.serverUrl }}:{{ config.serverListenPort }}/admin");
     </script>

views/admin/editSlide.twig

@@ -54,7 +54,7 @@
                             class="ui remove icon"></i></a>
             </div>
         </div>
-        <div class="item">
+        <!--  <div class="item">
             <div id="order" class="ui dropdown basic button">
                 <div class="default text">{{ t("admin.editSlide.order") }} <i class="dropdown icon"></i></div>
                 <div class="menu">
@@ -64,7 +64,21 @@
                     <div class="item" data-value="sendToBack">{{ t("admin.editSlide.sendToBack") }}</div>
                 </div>
             </div>
+        </div> -->
+
+        <div class="item">
+            <div class="ui inverted buttons">
+                <a href="#" onclick="setAlign('left')" class="ui basic icon button"><i
+                            class="ui align left icon"></i></a>
+                <a href="#" onclick="setAlign('center')" class="ui basic icon button"><i
+                            class="ui align center icon"></i></a>
+                <a href="#" onclick="setAlign('right')" class="ui basic icon button"><i
+                            class="ui align right icon"></i></a>
+                <a href="#" onclick="setAlign('justify')" class="ui basic icon button"><i
+                            class="ui align justify icon"></i></a>
+            </div>
         </div>
+
         <div class="item">
             <div class="ui input">
                 <input type="number" id="duration" placeholder="{{ t("navs.duration") }}" min="5"/>
@@ -152,7 +166,7 @@
                         // check file type
                         var imageType = /image.(jpeg|png)/;
                         if (!file.type.match(imageType)) {
-                          //  alert("File \"" + file.name + "\" is not a valid image file, only jpeg and png are supported");
+                            //  alert("File \"" + file.name + "\" is not a valid image file, only jpeg and png are supported");
                             return false;
                         }