Reverted back to multi-line display. Found out it was using hyperlinks as

buttons that was causing the jumping.

1 files changed, 232 insertions, 156 deletions

diff --git a/www/scripts/main.js b/www/scripts/main.js
index 36ac5f3..f75f23c 100644
--- a/www/scripts/main.js
+++ b/www/scripts/main.js
@@ -2,13 +2,28 @@
 var globalDb = [];
 var globalGroups = [];
 var globalCurrentGroup = "";
-var globalCurrentSelection = -1;
+
+var globalScrollY = 0;
 
 function Error(message)
 {
 	alert(message);
 }
 
+function SaveScroll()
+{
+	globalScrollY = window.pageYOffset;
+}
+
+function RestoreScroll()
+{
+	if (globalScrollY > 0)
+	{
+		window.scroll(0, globalScrollY);
+		globalScrollY = 0;
+	}
+}
+
 function SetEnable(id, enabled)
 {
 	var elem = document.getElementById(id);
@@ -107,70 +122,6 @@ function SetInputType(id, type)
 	document.getElementById(id).type = type;
 }
 
-function GetGroupRows()
-{
-	var result = [];
-
-	for(var f = 0; f < globalDb.length; f++)
-	{
-		if (globalDb[f].group == globalCurrentGroup)
-		{
-			result.push(globalDb[f]);
-		}
-	}
-
-	return result;
-}
-
-function GetData(id)
-{
-	for(var f = 0; f < globalDb.length; f++)
-	{
-		if (globalDb[f].id == id)
-		{
-			return globalDb[f];
-		}
-	}
-
-	return null;
-}
-
-function FindNextPrevious()
-{
-	var rows = GetGroupRows();
-	var f;
-	var ret = {prev: -1, next: -1};
-	var prev = -1;
-
-	for(f = 0; f < rows.length; f++)
-	{
-		if (rows[f].id == globalCurrentSelection)
-		{
-			ret.prev = prev;
-
-			if (f < rows.length - 1)
-			{
-				ret.next = rows[f + 1].id;
-			}
-		}
-
-		prev = rows[f].id;
-	}
-
-	return ret;
-}
-
-function SetButtonState()
-{
-	SetEnable("Add", true);
-	SetEnable("Edit", globalCurrentSelection != -1);
-	SetEnable("Delete", globalCurrentSelection != -1);
-	SetEnable("CopyUsername", globalCurrentSelection != -1);
-	SetEnable("CopyPassword", globalCurrentSelection != -1);
-	SetEnable("Up", globalCurrentSelection != -1);
-	SetEnable("Down", globalCurrentSelection != -1);
-}
-
 function LoadGroups(keep_selection)
 {
 	globalGroups = [];
@@ -222,82 +173,207 @@ function LoadGroups(keep_selection)
 	elem.value = globalCurrentGroup;
 }
 
-function LoadDescriptions(keep_selection)
+function AddTableInputCell(id, text, name, maxlen, classname, type, node)
 {
-	var rows = GetGroupRows();
-	var elem = document.getElementById("DescriptionSelect");
-	var f;
+	var td = document.createElement("td");
+	var input = document.createElement("input");
 
-	if (!keep_selection)
+	input.value = text;
+	input.id = name + id;
+	input.type = type;
+	input.maxLength = maxlen;
+	input.className = "fill";
+
+	td.className = classname;
+
+	td.appendChild(input);
+	node.appendChild(td);
+}
+
+function AddSmallButton(node, text, func, id)
+{
+	var button = document.createElement("input");
+
+	button.type = "button";
+	button.onclick = func;
+	button.value = text;
+	button.className = "smalltext";
+	button.dataset.pmId = id;
+
+	node.appendChild(button);
+}
+
+function AddSmallButtonPrevNext(node, text, func, id, prev, next)
+{
+	var button = document.createElement("input");
+
+	button.type = "button";
+	button.onclick = func;
+	button.value = text;
+	button.className = "smalltext";
+	button.dataset.pmId = id;
+	button.dataset.pmPrevId = prev;
+	button.dataset.pmNextId = next;
+
+	node.appendChild(button);
+}
+
+function AddSmallButtonUpDown(node, text, down_func, up_func, id)
+{
+	var button = document.createElement("input");
+
+	button.type = "button";
+	button.onmousedown = down_func;
+	button.onmouseup = up_func;
+	button.value = text;
+	button.className = "smalltext";
+	button.dataset.pmId = id;
+
+	node.appendChild(button);
+}
+
+function AddText(node, text)
+{
+	var t = document.createTextNode(text);
+	node.appendChild(t);
+}
+
+function AddElement(node, elementname)
+{
+	var elem = document.createElement(elementname);
+
+	node.appendChild(elem);
+}
+
+function AddRow(table, id, prev_id, next_id, desc, username, password, rowcount)
+{
+	var tr = document.createElement("tr");
+
+	if ((rowcount % 2) == 1)
 	{
-		globalCurrentSelection = -1;
+		tr.className = "style1";
 	}
-
-	while(elem.length > 0)
+	else
 	{
-		elem.remove(0);
+		tr.className = "style2";
 	}
 
-	var firstid = -1;
-	var selected = false;
+	AddTableInputCell(id, desc, "Description", 1024, "description", "text", tr);
+	AddTableInputCell(id, username, "Username", 256, "username", "text", tr); 
 
-	for(f = 0; f < rows.length; f++)
+	if (ShowPasswords())
 	{
-		var option = document.createElement("option");
+		AddTableInputCell(id, password, "Password", 256,
+							"password", "text", tr); 
+	}
+	else
+	{
+		AddTableInputCell(id, password, "Password", 256,
+							"password", "password", tr); 
+	}
 
-		option.text = rows[f].description;
-		option.value = rows[f].id;
+	var td = document.createElement("td");
 
-		if (firstid == -1)
-		{
-			firstid = rows[f].id;
-		}
+	td.className = "commands";
+
+	if (id == -1)
+	{
+		AddSmallButton(td, "Add", DoAdd, id);
+	}
+	else
+	{
+		AddSmallButton(td, "Edit", DoEdit, id);
+		AddText(td, "\u00a0");
+		AddSmallButton(td, "Delete", DoDelete, id);
+		AddText(td, "\u00a0");
+		AddSmallButtonUpDown(td, "Show", DoShow, DoHide, id);
 
-		if (globalCurrentSelection == rows[f].id)
+		if (next_id != -1 || prev_id != -1)
 		{
-			selected = true;
+			if (prev_id != -1)
+			{
+				AddText(td, "\u00a0");
+				AddSmallButtonPrevNext(td, "Up", DoUp, id, prev_id, next_id);
+			}
+
+			if (next_id != -1)
+			{
+				AddText(td, "\u00a0");
+				AddSmallButtonPrevNext
+					(td, "Down", DoDown, id, prev_id, next_id);
+			}
 		}
 
-		elem.add(option);
-	}
+		AddElement(td, "br");
 
-	if (!selected)
-	{
-		globalCurrentSelection = firstid;
+		AddSmallButton(td, "Copy Username", DoCopyUsername, id);
+		AddText(td, "\u00a0");
+		AddSmallButton(td, "Copy Password", DoCopyPassword, id);
 	}
 
-	if (globalCurrentSelection != -1)
+	tr.appendChild(td);
+
+	table.appendChild(tr);
+}
+
+function GetGroupRows()
+{
+	var result = [];
+
+	for(var f = 0; f < globalDb.length; f++)
 	{
-		elem.value = globalCurrentSelection;
+		if (globalDb[f].group == globalCurrentGroup)
+		{
+			result.push(globalDb[f]);
+		}
 	}
+
+	return result;
 }
 
 function LoadTable()
 {
-	var record = GetData(globalCurrentSelection);
+	var table = document.getElementById("DataTable");
+
+	table.innerHTML = "";
+
+	var rowcount = 0;
 
-	if (record != null)
+	var rows = GetGroupRows();
+
+	for(var f = 0; f < rows.length; f++)
 	{
-		var elem;
+		var prevId = -1;
+		var nextId = -1;
 
-		elem = document.getElementById("Description");
-		elem.value = record.description;
+		if (f > 0)
+		{
+			prevId = rows[f-1].id;
+		}
 
-		elem = document.getElementById("Username");
-		elem.value = record.username;
+		if (f < rows.length - 1)
+		{
+			nextId = rows[f+1].id;
+		}
 
-		elem = document.getElementById("Password");
-		elem.value = Decrypt(record.password);
+		AddRow(table,
+			   rows[f].id,
+			   prevId,
+			   nextId,
+			   rows[f].description,
+			   rows[f].username,
+			   Decrypt(rows[f].password),
+			   rowcount++);
 	}
+
+	AddRow(table, -1, -1, -1, "", "", "", rowcount++);
 }
 
 function RefreshDataAsync()
 {
 	globalDb = JSON.parse(this.responseText);
 	LoadGroups(true);
-	LoadDescriptions(true);
 	LoadTable();
-	SetButtonState();
 }
 
 function RefreshData()
@@ -308,7 +384,6 @@ function RefreshData()
 function LoadInitialData()
 {
 	LoadGroups(false);
-	LoadDescriptions(false);
 	LoadTable();
 }
 
@@ -324,7 +399,6 @@ function DoLoadAsync()
 	else
 	{
 		LoadInitialData();
-		SetButtonState();
 		SetEnable("ChangePassphrase", true);
 	}
 }
@@ -338,7 +412,6 @@ function DoLoad()
 	}
 
 	WebRequest("get.php", DoLoadAsync, []);
-	LoadInitialData();
 }
 
 function DoChangePassphraseAsync()
@@ -383,7 +456,6 @@ function DoChangePassphrase()
 			);
 		}
 
-		document.getElementById("PassPhrase").value = newphrase;
 		document.getElementById("NewPassPhrase").value = "";
 	}
 }
@@ -394,15 +466,6 @@ function DoSelectGroup()
 
 	globalCurrentGroup = elem.value;
 	document.getElementById("NewGroup").value = "";
-	LoadDescriptions(false);
-	LoadTable();
-}
-
-function DoSelectDescription()
-{
-	var elem = document.getElementById("DescriptionSelect");
-
-	globalCurrentSelection = elem.value;
 	LoadTable();
 }
 
@@ -417,28 +480,22 @@ function DoAddAsync()
 	else
 	{
 		globalCurrentGroup = response.group;
-		globalCurrentSelection = response.id;
 		RefreshData();
 	}
 }
 
 function DoAdd()
 {
-	if (IsEmpty("PassPhrase"))
-	{
-		Error("Passphrase empty");
-		return;
-	}
-
 	if (IsEmpty("Group") && IsEmpty("NewGroup"))
 	{
 		Error("No groups defined -- please enter a group name");
 		return;
 	}
 
-	var description = document.getElementById("Description").value;
-	var username = document.getElementById("Username").value;
-	var password = document.getElementById("Password").value;
+	var id = this.dataset.pmId;
+	var description = document.getElementById("Description" + id).value;
+	var username = document.getElementById("Username" + id).value;
+	var password = document.getElementById("Password" + id).value;
 	var group;
 
 	if (description == "" || username == "" | password == "")
@@ -478,16 +535,16 @@ function DoEditAsync()
 	else
 	{
 		globalCurrentGroup = response.group;
-		globalCurrentSelection = response.id;
 		RefreshData();
 	}
 }
 
 function DoEdit()
 {
-	var description = document.getElementById("Description").value;
-	var username = document.getElementById("Username").value;
-	var password = document.getElementById("Password").value;
+	var id = this.dataset.pmId;
+	var description = document.getElementById("Description" + id).value;
+	var username = document.getElementById("Username" + id).value;
+	var password = document.getElementById("Password" + id).value;
 	var group;
 
 	if (description == "" || username == "" | password == "")
@@ -508,7 +565,7 @@ function DoEdit()
 
 	WebRequest("edit.php", DoEditAsync,
 	[
-		"id", globalCurrentSelection,
+		"id", id,
 		"description", description,
 		"group", group,
 		"username", username,
@@ -533,21 +590,26 @@ function DoDeleteAsync()
 
 function DoDelete()
 {
+	var id = this.dataset.pmId;
+
 	WebRequest("delete.php", DoDeleteAsync,
 	[
-		"id", globalCurrentSelection
+		"id", id
 	]
 	);
 }
 
 function DoCopyUsername()
 {
-	Copy("Username");
+	var id = "Username" + this.dataset.pmId;
+	Copy(id);
 }
 
 function DoCopyPassword()
 {
-	var id = "Password";
+	var id = "Password" + this.dataset.pmId;
+
+	SaveScroll();
 
 	if (!ShowPasswords())
 	{
@@ -560,12 +622,15 @@ function DoCopyPassword()
 	{
 		SetInputType(id, "password");
 	}
+
+	RestoreScroll();
 }
 
 function DoShow()
 {
 	if (!ShowPasswords())
 	{
+		SaveScroll();
 		SetInputType("Password" + this.dataset.pmId, "text");
 	}
 }
@@ -575,6 +640,7 @@ function DoHide()
 	if (!ShowPasswords())
 	{
 		SetInputType("Password" + this.dataset.pmId, "password");
+		setTimeout(RestoreScroll, 0);
 	}
 }
 
@@ -589,37 +655,38 @@ function DoReorderAsync()
 	else
 	{
 		RefreshData();
+		RestoreScroll();
 	}
 }
 
 function DoUp()
 {
-	var rec = FindNextPrevious();
+	var id = this.dataset.pmId;
+	var prev = this.dataset.pmPrevId;
 
-	if (rec.prev != -1)
-	{
-		WebRequest("reorder.php", DoReorderAsync,
-		[
-			"from_id", globalCurrentSelection,
-			"to_id", rec.prev
-		]
-		);
-	}
+	SaveScroll();
+
+	WebRequest("reorder.php", DoReorderAsync,
+	[
+		"from_id", id,
+		"to_id", prev
+	]
+	);
 }
 
 function DoDown()
 {
-	var rec = FindNextPrevious();
+	var id = this.dataset.pmId;
+	var next = this.dataset.pmNextId;
 
-	if (rec.next != -1)
-	{
-		WebRequest("reorder.php", DoReorderAsync,
-		[
-			"from_id", globalCurrentSelection,
-			"to_id", rec.next
-		]
-		);
-	}
+	SaveScroll();
+
+	WebRequest("reorder.php", DoReorderAsync,
+	[
+		"from_id", id,
+		"to_id", next
+	]
+	);
 }
 
 function DoShowPasswords()
@@ -637,7 +704,16 @@ function DoShowPasswords()
 
 	SetInputType("PassPhrase", type);
 	SetInputType("NewPassPhrase", type);
-	SetInputType("Password", type);
+	SetInputType("Password-1", type);
+
+	var rows = GetGroupRows();
+	var f;
+
+	for(f = 0; f < rows.length;f++)
+	{
+		var id = "Password" + rows[f].id;
+		SetInputType(id, type);
+	}
 }
 
 // vim: sw=4 ts=4