Added ability to set/unset pattern for a theme

client/preview.js

@@ -99,6 +99,11 @@ function redraw() {
     frame: 0
   });
 
+  if (location.pathname === "/theme") {
+    const tf = (theme.noPattern === undefined) ? false : theme.noPattern;
+    d3.select("#chkNoPattern").property("checked", tf);
+  }
+
 }
 
 function loadAudio(f, cb) {

client/theme-editor.js

@@ -7,6 +7,8 @@ function _initialize() {
   	d3.select("#input-new-theme").on("change", updateNewThemeFile).each(updateNewThemeFile);
   	d3.select("#input-new-caption").on("change keyup", updateNewCaption).each(updateNewCaption);
   	d3.select("#btn-delete-theme").on("click", deleteTheme);
+    d3.select("#btn-save-theme").on("click", saveTheme);
+    d3.select("#chkNoPattern").on("change", setNoPattern);
 }
 
 function setClass(cl, msg) {
@@ -114,6 +116,42 @@ function deleteTheme() {
 
 }
 
+function saveTheme() {
+  if(!confirm($("#btn-save-theme").data("confirm"))){
+      d3.event.stopImmediatePropagation();
+      d3.event.preventDefault();
+      return;
+  }
+
+  $.ajax({
+    url: "/theme/save",
+    type: "POST",
+    data: JSON.stringify({theme: theme}),
+    dataType: "json",
+    contentType: "application/json",
+    cache: false,
+    success: function () {
+      preview.theme(theme);
+    },
+    error: function (error) {
+      console.log('error', error);
+    }
+  });
+
+}
+
+function setNoPattern() {
+  if (!theme) {
+    return;
+  }
+  const checked = d3.select("#chkNoPattern").property("checked");
+  if (!theme.noPattern) {
+    theme['noPattern'] = checked;
+  } else {
+    theme.noPattern = checked;
+  }
+}
+
 module.exports = {
 	initialize: _initialize
 };

editor/theme.html

@@ -36,6 +36,7 @@
 
         <div class="row form-row" style="padding-bottom: 40px">
           <button type="button" id="btn-delete-theme" class="left" data-confirm="Are you sure you want to delete this theme?"><i class="fa fa-trash"></i>Delete</button>
+          <button type="button" id="btn-save-theme" class="left" data-confirm="Are you sure you want to save changes?"><i class="fa fa-save"></i>Save</button>
         </div>
 
         <div id="preview">
@@ -85,10 +86,17 @@
           </label>
           <input id="input-new-caption" name="new-caption" type="text" autocomplete="off" placeholder="Add a new theme name" />
         </div>
+
+        <div class="row form-row">
+          <input type="checkbox" class="form-check-input" id="chkNoPattern">
+          <label class="form-check-label" for="chkNoPattern">No pattern</label>
+        </div>
+
         <div class="row form-row">
           <button type="button" id="btn-new-theme" class="left"><i class="fa fa-arrow-circle-up"></i>Add</button>
         </div>
         
+        
 
       </div>
 

renderer/index.js

@@ -1,5 +1,5 @@
-var d3 = require("d3"),
-    patterns = require("./patterns.js"),
+// var d3 = require("d3"),
+var patterns = require("./patterns.js"),
     textWrapper = require("./text-wrapper.js");
 
 module.exports = function(t) {
@@ -31,6 +31,11 @@ module.exports = function(t) {
     if (typeof theme.waveLeft !== "number") theme.waveLeft = 0;
     if (typeof theme.waveRight !== "number") theme.waveRight = theme.width;
 
+    /*if (location.pathname === "/theme") {
+      const tf = (theme.noPattern === undefined) ? false : theme.noPattern;
+      d3.select("#chkNoPattern").property("checked", tf);
+    }*/
+
     wrapText = textWrapper(theme);
 
     return this;
@@ -51,7 +56,9 @@ module.exports = function(t) {
       context.drawImage(backgroundImage, 0, 0, theme.width, theme.height);
     }
 
-    patterns[theme.pattern || "wave"](context, options.waveform, theme);
+    if (!theme.noPattern) {
+      patterns[theme.pattern || "wave"](context, options.waveform, theme);
+    }
 
     // Write the caption
     if (options.caption) {

server/index.js

@@ -141,6 +141,30 @@ app.post("/theme/delete/", jsonParser, function (req, res) {
   });
 });
 
+// Save theme
+app.post("/theme/save/", jsonParser, function (req, res) {
+  var themesFile = path.join(serverSettings.settingsPath, "themes.json");
+  fs.readFile(themesFile, "utf8", function readFileCallback(err, data) {
+    if (err) {
+      console.log('err', err);
+      res.send(JSON.stringify({status: 500, error: err}));
+    } else {
+      var theme = req.body.theme;
+      var themes = JSON.parse(data);
+      themes[theme.name] = theme;
+      var jt = JSON.stringify(themes);
+      fs.writeFile(themesFile, jt, "utf8", function (err) {
+        if (err) {
+          console.log(err);
+          res.send(JSON.stringify({status: 500, error: err}));
+        }
+        res.send(JSON.stringify({status: 200, success: "success"}));
+      });
+    }
+  });
+  
+});
+
 // Theme editor
 app.use("/theme/", express.static(path.join(__dirname, "..", "editor/theme.html")));