condense design to one panel

src/facilities/toyShop/toyShop.js

@@ -39,31 +39,72 @@ App.UI.toyShop = function() {
 		const el = new DocumentFragment();
 		let linkArray;
 		App.UI.DOM.appendNewElement("h2", el, "Buttplugs");
+		const select = App.UI.DOM.appendNewElement("div", el, App.UI.DOM.link("Start a new design", () => {
+			init();
+			refresh();
+		}));
+		if (V.customItem.buttPlugs.size > 0) {
+			select.append(selectDesign());
+		}
 		el.append(create());
 		return el;
 
 		function create() {
 			const el = new DocumentFragment();
+			const existingDesign = V.customItem.buttPlugs.get(buttPlugName);
+			if (existingDesign) {
+				el.append(descLocked());
+			} else {
+				el.append(desc());
+			}
 			el.append(
-				desc(),
 				title(),
 				width(),
 				length(),
-				apply(),
 			);
-			if (V.customItem.buttPlugs.size > 0) {
-				el.append(reviewDesigns());
+
+			if (existingDesign) {
+				const build = App.UI.DOM.appendNewElement("div", el, `Send updated design to production and make sure all appropriate slaves are updated `);
+				const linkArray = [];
+				linkArray.push(
+					App.UI.DOM.link(
+						"Update the mold",
+						() => { buildPlug(); }
+					)
+				);
+
+				linkArray.push(
+					App.UI.DOM.link(
+						`Recall "${buttPlugName}"`,
+						() => { deletePlug(); }
+					)
+				);
+				build.append(App.UI.DOM.generateLinksStrip(linkArray));
+			} else {
+				el.append(apply());
 			}
+
 			return el;
+
+			function descLocked() {
+				return App.UI.DOM.makeElement("div", `Description has already been selected for this model: "${buttPlugName}"`);
+			}
 		}
-		function reviewDesigns() {
-			const el = document.createElement("p");
-			App.UI.DOM.appendNewElement("h3", el, "Tweak existing design");
-			const choice = App.UI.DOM.appendNewElement("div", el, ` Choose an existing design to edit `);
+		function selectDesign() {
+			const el = new DocumentFragment();
+			const choice = App.UI.DOM.appendNewElement("span", el, ` or choose an existing design to edit `);
 			const select = App.UI.DOM.appendNewElement("select", choice);
+			let matchFound = false;
 			for (const [key, values] of V.customItem.buttPlugs) {
 				const option = App.UI.DOM.appendNewElement("option", select, values.name);
 				option.value = key;
+				if (option.value === buttPlugName) {
+					option.selected = true;
+					matchFound = true;
+				}
+			}
+			if (!matchFound) {
+				select.selectedIndex = -1;
 			}
 			select.onchange = () => {
 				const O = select.options[select.selectedIndex];
@@ -72,34 +113,7 @@ App.UI.toyShop = function() {
 				buttPlugData = V.customItem.buttPlugs.get(selectedPlug);
 				refresh();
 			};
-
-			el.append(
-				descLocked(),
-				title(),
-				width(),
-				length(),
-			);
-			const build = App.UI.DOM.appendNewElement("div", el, `Send updated design to production and make sure all appropriate slaves are updated `);
-			const linkArray = [];
-			linkArray.push(
-				App.UI.DOM.link(
-					"Update the mold",
-					() => { buildPlug(); }
-				)
-			);
-
-			linkArray.push(
-				App.UI.DOM.link(
-					`Recall "${buttPlugName}"`,
-					() => { deletePlug(); }
-				)
-			);
-			build.append(App.UI.DOM.generateLinksStrip(linkArray));
 			return el;
-
-			function descLocked() {
-				return App.UI.DOM.makeElement("div", `Description has already been selected for this model: "${buttPlugName}"`);
-			}
 		}
 
 		function desc() {
@@ -207,7 +221,6 @@ App.UI.toyShop = function() {
 			return build;
 		}
 
-
 		function deletePlug() {
 			V.customItem.buttPlugs.delete(buttPlugName);
 			for (const slave of V.slaves) {
@@ -219,7 +232,6 @@ App.UI.toyShop = function() {
 		}
 	}
 
-
 	function refresh() {
 		jQuery(container).empty().append(createPage());
 	}