Merge pull request #43 from Funtime60/36-database-colorgen-integration

everything?

colorGenerator.js

@@ -1,3 +1,6 @@
+let printMode = false;
+let localDB = [{ "name": "White", "color": "#ffffff" }];
+
 function selectLockHandler() {
 	const arr = $("table#table1 select").toArray();
 	var vals = []
@@ -17,9 +20,76 @@ function selectLockHandler() {
 	}
 };
 
-function convertColorToVal(color) {
-	// TODO: hook into DB
-	return color
+function selectPopHandler() {
+    const selects = $("select");
+    selects.empty();
+    const nameArr = localDB.map((x) => x.name);
+    selects.each(function(k, v) {
+        const select = $("#" + v.id);
+        let options = select[0].options;
+        for (let i = options.length - 1; i >= 0; i--) {
+            if (!nameArr.includes(options[i].value)) {
+                options.remove(i);
+            }
+        }
+       	localDB.forEach((x, i, a) => options.add(new Option(printMode ? x.name + " - " + x.color : x.name, x.name), i));
+    });
+	selects.each(function(k, v) {
+		const select = $("#" + v.id);
+		select.val(select[0][parseInt(select[0].id.substring(9,10))]?.value)
+		if(!select.val()) {
+			let msg = "Insufficient color options";
+			select[0].options.add(new Option(msg, msg), select[0].options.length);
+			select.val(msg);
+			select[0].nextElementSibling.disabled = true;
+			select[0].disabled = true;
+		}
+	});
+}
+
+async function getTable() {
+    let requestObj = { 'type': 'getTable' };
+    await APICall(requestObj)
+        .then(function (response) {
+            if (response.status === "error") {
+                setError(response.message);
+            }
+            else {
+                localDB = response.data;
+                selectPopHandler();
+            }
+        })
+        .catch(function (error) {
+            console.log("API call failed: ", error);
+        });
+}
+
+function APICall(data) {
+    return new Promise(function (resolve, reject) {
+        var jsonString = JSON.stringify(data);
+        var jsonString = JSON.stringify(data);
+        $.ajax({
+            type: "POST",
+            url: 'database.php',
+            data: jsonString,
+            contentType: 'application/json',
+            dataType: 'json',
+            success: function (retData) {
+                // console.log("APICALL SUCCESS");
+                // console.log(retData);
+                resolve(retData);
+            },
+            error: function (xhr, status, err) {
+                // console.log("fail");
+                // console.log(err);
+                reject(err);
+            },
+        });
+    });
+}
+
+function convertColorToVal(name) {
+	return localDB.find((x) => x?.name == name)?.color ?? "white"
 }
 
 function classColorHandler() {
@@ -52,10 +122,13 @@ function colorListHandler() {
 	otptList.forEach((x, i, a) => $("#"+x.id).attr("value", cellList[i].map((y, j) => y.id.substring(9).split("Col").map((z, k) => (k == 0)? parseInt(z) + 1 : String.fromCharCode(65 + parseInt(z))).reverse().join("")).toSorted().join(", ")));
 };
 
-$(document).ready(function() {
+$(document).ready(async function() {
+	printMode = $(".table2Cell").length <= 0;
+	await getTable();
+	selectPopHandler()
 	selectLockHandler();
 	classColorHandler();
-	colorListHandler();
+	if(!printMode) colorListHandler();
 	$("table#table1 select").on('change', selectLockHandler);
 	$("table#table1 select").on('change', classColorHandler);
 	$(".table2Cell").on('click', cellColorHandler);

colorGenerator.php

@@ -25,11 +25,7 @@
 			$asColorList = array("red", "brown", "orange", "yellow", "green", "teal", "blue", "purple", "gray", "black");
 		?>
 		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
-		<?php
-			if(!isset($_POST["printMode"])) {
-				echo "<script src=\"colorGenerator.js\"></script>\n";
-			}
-		?>
+		<script src="colorGenerator.js"></script>
 		<script src="validation.js"></script>
 		<style>
 			<?php
@@ -64,6 +60,11 @@
 			}
 			/**/
 		</style>
+		<style>
+			select#table1Row0Select::after {
+				content: var(--light_orange);
+			}
+		</style>
 		<style id="tableSiz">
 			:root {
 				--Table2Size: calc(var(--ContentWidth) / <?php echo ($iRowColumn + 1)?>);
@@ -177,7 +178,7 @@
 								echo "\n\t\t\t\t\t\t<tr id=\"table2Row" . $iI . "\" class=\"table2Row\">";
 								echo "\n\t\t\t\t\t\t\t<th id=\"table2Row" . $iI . "ColH\" class=\"table2Header\">" . ($iI + 1) . "</th>";
 								for($iJ = 0; $iJ < $iRowColumn; $iJ++) {
-									echo "\n\t\t\t\t\t\t\t<td id=\"table2Row" . $iI . "Col" . $iJ . "\" class=\"table2Cell\"></td>";
+									echo "\n\t\t\t\t\t\t\t<td id=\"table2Row" . $iI . "Col" . $iJ . "\" class=\"" . (isset($_POST["printMode"]) ? "" : "table2Cell") . "\"></td>";
 								}
 								echo "\n\t\t\t\t\t\t</tr>";
 							}

db_cred.php

@@ -9,6 +9,6 @@
 //
 //
 $servername = "faure";  // Dont touch!
-$username = "php_user"; 
+$username = "php_user";
 $database = "milestone";    // Should be same as your username
-$password = "supersecret";
+$password = "supersecret";

navbar.php

@@ -10,6 +10,7 @@
                 <li><a href="index.php">Home</a></li>
                 <li><a href="about.php">About</a></li>
                 <li><a href="colorGenerator.php">Color Generator</a></li>
+				<li><a href="APIPage.php">Color Database</a></li>
             </ul>
         </div>
     </nav>

rest.js

@@ -67,7 +67,7 @@ function selectPopHandler() {
     const selects = $("select");
     selects.empty();
     const nameArr = localDB.map((x) => x.name);
-    console.log(nameArr);
+    // console.log(nameArr);
     selects.each(function (k, v) {
         const select = $("#" + v.id);
         let options = select[0].options;
@@ -198,7 +198,7 @@ function deleteColor(ctx) {
 }
 
 function setError(strError) {
-    $(".ErrorRow > td").text(strError);
+    console.log($(".ErrorRow > td").text(strError).attr("err", ((strError == "") ? "" : "err")));
 }
 
 function clearError() {