Feature add template dropdown to frontend PG (#206)

openframeworks · Sep 12, 2019 · 550d746 · 550d746
1 parent 50a0ee2
commit 550d746
Show file tree

Hide file tree

Showing 4 changed files with 267 additions and 7 deletions.
diff --git a/frontend/app.js b/frontend/app.js
@@ -8,6 +8,7 @@ var fs = require('fs');
 
 
 var platforms;
+var templates;
 
 // var platforms = {
 //     "osx": "OS X (Xcode)",
@@ -204,9 +205,83 @@ ipc.on('setPlatforms', function(arg) {
 });
 
 
+ipc.on('setTemplates', function(arg) {
+    console.log("----------------");
+    console.log("got set templates");
+    console.log(arg);
+
+    templates = arg;
+
+    var select = document.getElementById("templateList");
+    var option, i;
+    for (var i in templates) {
+        console.log(i);
+        var myClass = 'template';
+
+        $('<div/>', {
+            "class": 'item',
+            "data-value": i
+        }).html(templates[i]).appendTo(select);
+    }
+
+    console.log(select);
+
+    // start the template drop down.
+    $('#templatesDropdown')
+    .dropdown({
+        allowAdditions: false,
+        fullTextSearch: 'exact',
+        match: "text",
+        maxSelections: 1
+    });
+
+    // // set the template to default
+    //$('#templatesDropdown').dropdown('set exactly', defaultSettings['defaultTemplate']);
+
+    // Multi
+    var select = document.getElementById("templateListMulti");
+    var option, i;
+    for (var i in templates) {
+        var myClass = 'template';
+
+        $('<div/>', {
+            "class": 'item',
+            "data-value": i
+        }).html(templates[i]).appendTo(select);        
+    }
+
+    // start the platform drop down.
+    $('#templatesDropdownMulti')
+        .dropdown({
+            allowAdditions: false,
+            maxSelections: 1
+        });
+
+    // // set the template to default
+    //$('#templatesDropdownMulti').dropdown('set exactly', defaultSettings['defaultTemplate']);
+});
+
 
+ipc.on('enableTemplate', function (arg) {
 
+    console.log('enableTemplate');
+    let items = arg.bMulti === false ? $('#templatesDropdown .menu .item') : $('#templatesDropdownMulti .menu .item');
 
+    // enable all first
+    for (let i = 0; i < items.length; i++) {
+        let item = $(items[i]);
+        item.removeClass("disabled");
+    }
+
+    for (let template of arg.invalidTemplateList) {
+        for (let i = 0; i < items.length; i++) {
+            let item = $(items[i]);
+            if (item.attr('data-value') === template) {
+                item.addClass("disabled");
+            }
+        }
+    }
+});
 
 //-------------------------------------------
 // select the list of addons and notify if some aren't installed
@@ -606,6 +681,7 @@ function setup() {
 
         // show default platform in GUI
         $("#defaultPlatform").html(defaultSettings['defaultPlatform']);
+        //$("#defaultTemplate").html(defaultSettings['defaultTemplate']);
 
         // Enable tooltips
         //$("[data-toggle='tooltip']").tooltip();
@@ -654,6 +730,29 @@ function setup() {
             $(this).removeClass("accept deny");
         });
 
+
+        // reflesh template dropdown list depends on selected platforms
+        $("#platformsDropdown").on('change', function () {
+            let selectedPlatforms = $("#platformsDropdown input").val();
+            let selectedPlatformArray = selectedPlatforms.trim().split(',');
+            let arg = {
+                ofPath: $("#ofPath").val(),
+                selectedPlatforms: selectedPlatformArray,
+                bMulti: false
+            }
+            ipc.send('refreshTemplateList', arg);
+        })
+        $("#platformsDropdownMulti").on('change', function () {
+            let selectedPlatforms = $("#platformsDropdownMulti input").val();
+            let selectedPlatformArray = selectedPlatforms.trim().split(',');
+            let arg = {
+                ofPath: $("#ofPath").val(),
+                selectedPlatforms: selectedPlatformArray,
+                bMulti: true
+            }
+            ipc.send('refreshTemplateList', arg);
+        })
+
     });
 }
 
@@ -797,6 +896,12 @@ function generate() {
     // let's get all the info:
     var platformValueArray = getPlatformList();
 
+    var templatePicked = $("#templatesDropdown .active");
+    var templateValueArray = [];
+    for (var i = 0; i < templatePicked.length; i++){
+        templateValueArray.push($(templatePicked[i]).attr("data-value"));
+    }
+
     var addonsPicked = $("#addonsDropdown  .active");
     var addonValueArray = [];
 
@@ -816,6 +921,7 @@ function generate() {
     gen['projectName'] = $("#projectName").val();
     gen['projectPath'] = $("#projectPath").val();
     gen['platformList'] = platformValueArray;
+    gen['templateList'] = templateValueArray;
     gen['addonList'] = addonValueArray; //$("#addonsDropdown").val();
     gen['ofPath'] = $("#ofPath").val();
     gen['verbose'] = bVerbose;
@@ -850,11 +956,16 @@ function updateRecursive() {
         platformValueArray.push($(platformsPicked[i]).attr("data-value"));
     }
 
-
+    var templatePicked = $("#templatesDropdownMulti .active");
+    var templateValueArray = [];
+    for (var i = 0; i < templatePicked.length; i++){
+        templateValueArray.push($(templatePicked[i]).attr("data-value"));
+    }
 
     var gen = {};
     gen['updatePath'] = $("#updateMultiplePath").val();
     gen['platformList'] = platformValueArray;
+    gen['templateList'] = templateValueArray;
     gen['updateRecursive'] = true;
     gen['ofPath'] = $("#ofPath").val();
     gen['verbose'] = bVerbose;
@@ -922,10 +1033,18 @@ function enableAdvancedMode(isAdvanced) {
         $("body").addClass('advanced');
         $('a.updateMultiMenuOption').show();
 
+        $('#templateSection').show();
+        $('#templateSectionMulti').show();
+
     } else {
         $('#platformsDropdown').addClass("disabled");
         $('#platformsDropdown').dropdown('set exactly', defaultSettings['defaultPlatform']);
 
+        $('#templateSection').hide();
+        $('#templateSectionMulti').hide();
+        $('#templateDropdown').dropdown('set exactly', '');
+        $('#templateDropdownMulti').dropdown('set exactly', '');
+
         $("body").removeClass('advanced');
         $('a.updateMultiMenuOption').hide();
 

diff --git a/frontend/index.html b/frontend/index.html
@@ -202,6 +202,18 @@
 						</div>
 						<div id="test"></div>
 					</div>
+					<div id="templateSection" class="field">
+						<label>Template:</label>
+						<div class="ui multiple search selection dropdown" id="templatesDropdown">
+							<input name="templates" type="hidden">
+							<i class="dropdown icon"></i>
+							<div class="default text">Template...</div>
+							<div class="menu" id="templateList">
+							</div>
+						</div>
+						<div id="test"></div>
+					</div>
+
 					<div class="ui hidden divider"></div>
 					<div class="field">
 						<div class="ui olive button" id="generateButton" onclick="generate()">Generate</div>
@@ -246,6 +258,17 @@
 							</div>
 						</div>
 					</div>
+					<div id="templateSectionMulti" class="field">
+						<label>Template:</label>
+						<div class="ui multiple search selection dropdown" id="templatesDropdownMulti">
+							<input name="templates" type="hidden">
+							<i class="dropdown icon"></i>
+							<div class="default text">Template...</div>
+							<div class="menu" id="templateListMulti">
+							</div>
+						</div>
+						<div id="test"></div>
+					</div>
 					<div class="ui hidden divider"></div>
 					<div class="field">
 						<div class="ui orange button" id="updateMultipleButton" onclick="updateRecursive()">Update multiple</div>