Added ability to add new pecs

README.md

@@ -18,6 +18,9 @@ A free open source Picture Exchange Communication System or PECS
 ### Initial goals
 
 - [x] Basic web app UI
-- [ ] Add/Remove custom PEC's
+- [x] Add custom PEC's
+- [ ] Remove custom PEC's
+- [ ] Persist data
+- [ ] Allow data backup/restore
 - [x] Multipul PEC boards
 - [ ] Convert to android app

main.js

@@ -95,7 +95,8 @@ function setPec(pecTemplate=null, targetIndex=null) {
 	targetPec.removeEventListener("click", invokeLibrary);
 	targetPec.innerHTML = "";
 	targetPec.classList.remove("empty");
-	targetPec.appendChild(pecTemplate.DOM);
+	var freshPec = new pec(pecTemplate.word, pecTemplate.image);
+	targetPec.appendChild(freshPec.DOM);
 }
 
 function repopBoards (current=0) {
@@ -163,13 +164,75 @@ function repopGrid (board=null) {
 function useThisPec (e) {
 	var sourceID = ((e.currentTarget.getAttribute("id")).split("lPec"))[1];
 	app.gui.library.root.classList.remove("focused");
-	app.gui.library.body.childNodes.entries().forEach(p=>{
+	app.currentBoard.pecs[app.targetPecIndex] = app.library.splice(sourceID,1)[0];
-		p[1].getAttribute("id") == "lPec"+sourceID ? p[1].style.display = "none" : null;
+	repopLibrary();
-	});
-	app.currentBoard.pecs[app.targetPecIndex] = app.library[sourceID];
 	repopGrid(app.currentBoard);
 }
 
+function createNewPec () {
+	var name = app.gui.newpec_name.value;
+	var image = app.gui.newpec_image.files[0];
+	app.library.push(new pec(name, URL.createObjectURL(image)));
+	repopLibrary();
+	app.gui.newpec.root.classList.remove("focused");
+}
+
+function updatePreview () {
+	var name = app.gui.newpec_name.value;
+	var image = app.gui.newpec_image.files[0];
+	app.gui.newpec_preview.innerHTML = "";
+	app.gui.newpec_preview.removeEventListener("click", createNewPec);
+	app.gui.newpec_status.innerText = "Create your new pec by naming it and providing an image.";
+	var correct = 0;
+	if (["image/png","image/jpeg","image/svg"].includes(image?.type)) {
+		var imageBox = document.createElement("img");
+		imageBox.src = URL.createObjectURL(image);
+		imageBox.classList.add("pecImage");
+		app.gui.newpec_preview.appendChild(imageBox);
+		correct++;
+	}
+	if ("" != name) {
+		var nameBox = document.createElement("div");
+		nameBox.innerText = name;
+		nameBox.classList.add("pecName");
+		app.gui.newpec_preview.appendChild(nameBox);
+		correct++;
+	}
+	if (1 < correct) {
+		app.gui.newpec_status.innerText = "Click/Tap the preview to save.";
+		app.gui.newpec_preview.addEventListener("click", createNewPec);
+	}
+}
+
+function addNewPec (e) {
+	// clear out any previous values in form.
+	app.gui.newpec_form.reset();
+	updatePreview();
+	// make form visible
+	app.gui.newpec.root.classList.add("focused");
+}
+
+function repopLibrary () {
+	// clear library
+	app.gui.library.body.innerHTML = "";
+	// recreate items from app.library
+	app.library.forEach((p,i)=>{
+		var newPec = document.createElement("span");
+		newPec.classList.add("libSlot");
+		newPec.innerText = p.word;
+		newPec.id = "lPec"+i;
+		newPec.addEventListener("click", useThisPec);
+		app.gui.library.body.appendChild(newPec);
+	});
+	// add new pec button at end of list
+	var newPec = document.createElement("span");
+	newPec.classList.add("libSlot");
+	newPec.innerText = " + ";
+	newPec.id = "lPec"+(app.library.length + 1);
+	newPec.addEventListener("click", addNewPec);
+	app.gui.library.body.appendChild(newPec);	
+}
+
 // Initialize gui
 
 window.app = {};
@@ -196,6 +259,10 @@ app.gui.options = new auxillery_dialog("Options");
 app.gui.options.body.classList.add("options_body");
 app.gui.main.append(app.gui.options.root);
 app.gui.optionsButton.addEventListener("click", ()=>{ app.gui.options.root.classList.add("focused") });
+// New Pec popup
+app.gui.newpec = new auxillery_dialog("Create New Pec");
+app.gui.newpec.body.classList.add("newpec_body");
+app.gui.main.append(app.gui.newpec.root);
 // pre-populate grid with emptys
 for (var x = 0; x < 16; x++) {
 	var name = "pec"+x;
@@ -216,15 +283,7 @@ repopGrid(app.currentBoard);
 // Populate Library
 import { library as library } from './library.js';
 app.library = library;
-// add more here
+repopLibrary();
-app.library.forEach((p,i)=>{
-	var newPec = document.createElement("span");
-	newPec.classList.add("libSlot");
-	newPec.innerText = p.word;
-	newPec.id = "lPec"+i;
-	newPec.addEventListener("click", useThisPec);
-	app.gui.library.body.appendChild(newPec);
-});
 
 // Populate Options
 app.options = {};
@@ -254,4 +313,15 @@ app.gui.options_feedbackTimeout.innerHTML = '<label for="flood-timeout">Audio Fl
 
 app.gui.options_about = document.createElement("div");
 app.gui.options.body.appendChild(app.gui.options_about);
-app.gui.options_about.innerHTML = 'App licenced <a href="LICENSE.txt" target="_blank"><img src="images/ui/gplv3-or-later.svg" height="30px" /></a><label>-</label> Cards from <a href="https://assistivecards.com" target="_blank"><img src="images/ui/ac.svg" height="30px" alt="Assistive Cards" /></a>';
+app.gui.options_about.innerHTML = 'App licenced <a href="LICENSE.txt" target="_blank"><img src="images/ui/gplv3-or-later.svg" height="30px" /></a><label>-</label> Cards from <a href="https://assistivecards.com" target="_blank"><img src="images/ui/ac.svg" height="30px" alt="Assistive Cards" /></a><label>-</label> Project Source <a href="https://labs.murkfall.net/bluesaxman/librePECS">labs.murkfall.net</a>';
+
+app.gui.newpec.body.innerHTML = '<form id="new-pec-form"><label for="new-pec-name">Name</label><input id="new-pec-name" type="text" value=""  /><br /><label for="new-pec-image">Picture</label><input id="new-pec-image" type="file" accept="image/png, image/jpeg, image/svg" value="" /><br /><div id="new-pec-preview"></div><br /><div id="new-pec-status">Create your new pec by naming it and providing an image.</div></form>';
+app.gui.newpec_form = document.getElementById("new-pec-form");
+app.gui.newpec_name = document.getElementById("new-pec-name");
+app.gui.newpec_image = document.getElementById("new-pec-image");
+app.gui.newpec_preview = document.getElementById("new-pec-preview");
+app.gui.newpec_status = document.getElementById("new-pec-status");
+app.gui.newpec_preview.classList.add("pecSlot");
+app.gui.newpec_name.addEventListener("change", updatePreview);
+app.gui.newpec_image.addEventListener("change", updatePreview);
+