Added some initial display code. Call to get stubbed out with test data.

3 files changed, 207 insertions, 3 deletions

diff --git a/www/css/main.css b/www/css/main.css
index 558da6c..22284e4 100644
--- a/www/css/main.css
+++ b/www/css/main.css
@@ -9,5 +9,42 @@ body
 	font-size: small;
 }
 
+td input
+{
+	box-sizing: border-box;
+	display: block;
+	width: 100%;
+}
+
+tr.style1
+{
+	background-color: #aaaaff;
+}
+
+tr.style2
+{
+	background-color: #8888ff;
+}
+
+a:link
+{
+	color: black;
+}
+
+a:visited
+{
+	color: black;
+}
+
+a:hover
+{
+	color: red;
+}
+
+a:active
+{
+	color: red;
+}
+
 /* vim: sw=4 ts=4
 */
diff --git a/www/index.html b/www/index.html
index 512ac8f..9c2474c 100644
--- a/www/index.html
+++ b/www/index.html
@@ -16,7 +16,7 @@ Passphrase: <input type="password" id="PassPhrase">
 <input type="button" id="LoadButton" value="Load" onclick="DoLoad()">
 <br>
 Group:
-<select id="Group">
+<select id="Group" onchange="DoSelectGroup()">
 </select>
 &nbsp;&nbsp;
 <input type="text" id="NewGroup" maxlength="512">
diff --git a/www/scripts/main.js b/www/scripts/main.js
index d8f03ca..900357b 100644
--- a/www/scripts/main.js
+++ b/www/scripts/main.js
@@ -1,5 +1,7 @@
 
-var globalDb;
+var globalDb = [{"id":"3","description":"TestDescription2","group":"TestGroup","username":"TestUser2","password":"TestPass2"},{"id":"4","description":"TestDescription3","group":"TestGroup","username":"TestUser3","password":"TestPass3"}];
+var globalGroups = []
+var globalCurrentGroup = ""
 
 function AESEncrypt(source, phrase)
 {
@@ -15,6 +17,20 @@ function AESDecrypt(source, phrase)
 	return decryptedBytes.toString(CryptoJS.enc.Latin1);
 }
 
+function Decrypt(val)
+{
+	var phrase = document.getElementById("PassPhrase").value;
+
+	return AESDecrypt(val, phrase);
+}
+
+function Encrypt(val)
+{
+	var phrase = document.getElementById("PassPhrase").value;
+
+	return AESEncrypt(val, phrase);
+}
+
 function WebRequest(url, func, args)
 {
 	var f;
@@ -41,14 +57,165 @@ function WebRequest(url, func, args)
 	req.send();
 }
 
+function ArrayContains(haystack, needle)
+{
+	for(var f = 0; f < haystack.length; f++)
+	{
+		if (haystack[f] === needle)
+		{
+			return true;
+		}
+	}
+
+	return false;
+}
+
+function LoadGroups(keep_selection)
+{
+	globalGroups = [];
+
+	for(var f = 0; f < globalDb.length; f++)
+	{
+		var group = globalDb[f].group;
+
+		if (!ArrayContains(globalGroups, group))
+		{
+			globalGroups.push(group);
+		}
+	}
+
+	if (!keep_selection)
+	{
+		globalCurrentGroup = "";
+	}
+
+	if (!ArrayContains(globalGroups, globalCurrentGroup))
+	{
+		if (globalGroups.length > 0)
+		{
+			globalCurrentGroup = globalGroups[0];
+		}
+		else
+		{
+			globalCurrentGroup = "";
+		}
+	}
+
+	var elem = document.getElementById("Group");
+
+	while(elem.length > 0)
+	{
+		elem.remove(0);
+	}
+
+	for(var f = 0; f < globalGroups.length; f++)
+	{
+		var option = document.createElement("option");
+
+		option.text = globalGroups[f];
+		option.value = globalGroups[f];
+
+		elem.add(option);
+	}
+
+	alert(globalCurrentGroup);
+	elem.value = globalCurrentGroup;
+}
+
+function AddTableInputCell(id, text, name, tr)
+{
+	var td = document.createElement("td");
+	var input = document.createElement("input");
+
+	input.value = text;
+	input.id = name + id;
+	input.type = "text";
+
+	td.appendChild(input);
+	tr.appendChild(td);
+}
+
+function AddRow(table, id, desc, username, password, rowcount)
+{
+	var tr = document.createElement("tr");
+
+	if ((rowcount % 2) == 1)
+	{
+		tr.style = "style1";
+	}
+	else
+	{
+		tr.style = "style2";
+	}
+
+	AddTableInputCell(id, desc, "Description", tr); 
+	AddTableInputCell(id, username, "Username", tr); 
+	AddTableInputCell(id, password, "Password", tr); 
+
+	var td = document.createElement("td");
+
+	if (id == -1)
+	{
+		td.innerText = "Stuff for new entry";
+	}
+	else
+	{
+		td.innerText = "Stuff for existing entry";
+	}
+
+	tr.appendChild(td);
+
+	table.appendChild(tr);
+}
+
+function LoadTable()
+{
+	var table = document.getElementById("DataTable");
+
+	table.innerHTML = "";
+
+	var rowcount = 0;
+
+	for(var f = 0; f < globalDb.length; f++)
+	{
+		if (globalDb[f].group == globalCurrentGroup)
+		{
+			AddRow(table,
+				   globalDb[f].id,
+				   globalDb[f].description,
+				   globalDb[f].username,
+				   Decrypt(globalDb[f].password),
+				   rowcount++);
+		}
+	}
+
+	AddRow(table, -1, "", "", "", rowcount++);
+}
+
+function LoadInitialData()
+{
+	LoadGroups(false);
+	LoadTable();
+}
+
 function DoLoadAsync()
 {
 	globalDb = JSON.parse(this.responseText);
+	LoadInitialData();
 }
 
 function DoLoad()
 {
-	WebRequest("get.php", DoLoadAsync, []);
+	// WebRequest("get.php", DoLoadAsync, []);
+	LoadInitialData();
+}
+
+function DoSelectGroup()
+{
+	var elem = document.getElementById("Group");
+
+	globalCurrentGroup = elem.value;
+	LoadTable();
 }
 
 // vim: sw=4 ts=4