Changed to a single record display to remove the hideous problem with the page

jumping.

4 files changed, 181 insertions, 230 deletions

diff --git a/www/add.php b/www/add.php
index 2ecff7b..8525781 100644
--- a/www/add.php
+++ b/www/add.php
@@ -45,6 +45,7 @@ try
     $id = $db->lastInsertId();
 
     $result["id"] = $id;
+    $result["group"] = $group;
 
     $update = $db->prepare("UPDATE pm_store SET display = :id WHERE id = :id");
     $update->bindParam(":id", $id);
diff --git a/www/css/main.css b/www/css/main.css
index 3e98b16..64c46f8 100644
--- a/www/css/main.css
+++ b/www/css/main.css
@@ -9,20 +9,49 @@ body
 	font-size: x-small;
 }
 
-input.fill
+.fill
 {
 	box-sizing: border-box;
 	display: block;
 	width: 100%;
 }
 
-tr.style1
+.fillabs
 {
-	background-color: #ddddff;
+	box-sizing: border-box;
+	display: block;
+	width: 99%;
+	position: absolute;
+	left: 1px;
+	top: 11px;
+}
+
+.fill_0_0_lower
+{
+	box-sizing: border-box;
+	display: block;
+	width: 99%;
+	position: absolute;
+	z-index: 0;
+	left: 1px;
+	top: 11px;
 }
 
-tr.style2
+.fill_0_0_higher
 {
+	box-sizing: border-box;
+	display: block;
+	width: 94%;
+	position: absolute;
+	z-index: 100;
+	left: 1px;
+	top: 11px;
+}
+
+tr.datatable
+{
+	height: 30px;
+	position: relative;
 	background-color: #ccccff;
 }
 
@@ -43,9 +72,10 @@ td.headerbutton
 
 td.description
 {
-	width: 40%;
-	min-width: 100px;
+	width: 35%;
+	min-width: 300px;
 	max-width: 500px;
+	position: relative;
 }
 
 td.username
@@ -53,6 +83,7 @@ td.username
 	width: 20%;
 	min-width: 50px;
 	max-width: 200px;
+	position: relative;
 }
 
 td.password
@@ -60,13 +91,15 @@ td.password
 	width: 20%;
 	min-width: 50px;
 	max-width: 200px;
+	position: relative;
 }
 
 td.commands
 {
-	width: 20%;
+	width: 25%;
 	min-width: 50px;
 	max-width: 100px;
+	position: relative;
 }
 
 table.datatable
diff --git a/www/index.html b/www/index.html
index ce53bb4..db66991 100644
--- a/www/index.html
+++ b/www/index.html
@@ -26,7 +26,7 @@
 <tr>
 <td class="headertext">Group:</td>
 <td class="headerinput">
-<select id="Group" onchange="DoSelectGroup()">
+<select id="Group" onchange="DoSelectGroup()" class="fill">
 </select>
 </td>
 <td class="headerbutton"></td>
@@ -50,14 +50,42 @@
 <input type="password" id="NewPassPhrase" maxlength="512" class="fill">
 </td>
 <td class="headerbutton">
-<input id="ChangePassphrase" type="button" value="Change" onclick="DoChangePassphrase()" class="fill" disabled>
+<input id="ChangePassphrase" type="button" value="Change"
+ onclick="DoChangePassphrase()" class="fill" disabled>
 </td>
 </tr>
 </table>
 
 <hr>
 
-<table id="DataTable" class="datatable"></table>
+<table id="DataTable" class="datatable">
+<tr class="datatable">
+<td class="description">
+<select id="DescriptionSelect" class="fill_0_0_lower"
+ onchange="DoSelectDescription()">
+</select>
+<input type="text" maxlength="1024" class="fill_0_0_higher" id="Description">
+</td>
+<td class="username">
+<input type="text" maxlength="64" class="fillabs" id="Username">
+</td>
+<td class="password">
+<input type="password" maxlength="64" class="fillabs" id="Password">
+</td>
+<td class="commands">
+<input type="button" id="Edit" value="Edit" onclick="DoEdit()"
+ class="smalltext" disabled>
+<input type="button" id="Delete" value="Delete" onclick="DoDelete()"
+ class="smalltext" disabled>
+<input type="button" id="Add" value="Add" onclick="DoAdd()" class="smalltext">
+<br>
+<input type="button" id="CopyUsername" value="Copy Username"
+ onclick="DoCopyUsername()" class="smalltext" disabled>
+<input type="button" id="CopyPassword" value="Copy Password"
+ onclick="DoCopyPassword()" class="smalltext" disabled>
+</td>
+</tr>
+</table>
 
 </body>
 </html>
diff --git a/www/scripts/main.js b/www/scripts/main.js
index 4323680..93c3c83 100644
--- a/www/scripts/main.js
+++ b/www/scripts/main.js
@@ -2,28 +2,13 @@
 var globalDb = [];
 var globalGroups = [];
 var globalCurrentGroup = "";
-
-var globalScrollY = 0;
+var globalCurrentSelection = -1;
 
 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);
@@ -122,6 +107,43 @@ 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 SetButtonState()
+{
+	SetEnable("Add", true);
+	SetEnable("Edit", globalCurrentSelection != -1);
+	SetEnable("Delete", globalCurrentSelection != -1);
+	SetEnable("CopyUsername", globalCurrentSelection != -1);
+	SetEnable("CopyPassword", globalCurrentSelection != -1);
+}
+
 function LoadGroups(keep_selection)
 {
 	globalGroups = [];
@@ -173,211 +195,82 @@ function LoadGroups(keep_selection)
 	elem.value = globalCurrentGroup;
 }
 
-function AddTableInputCell(id, text, name, maxlen, classname, type, node)
-{
-	var td = document.createElement("td");
-	var input = document.createElement("input");
-
-	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 AddSmallLink(node, text, func, id)
-{
-	var anchor = document.createElement("a");
-
-	anchor.href = "#";
-	anchor.onclick = func;
-	anchor.text = text;
-	anchor.className = "smalltext";
-	anchor.dataset.pmId = id;
-
-	node.appendChild(anchor);
-}
-
-function AddSmallLinkPrevNext(node, text, func, id, prev, next)
-{
-	var anchor = document.createElement("a");
-
-	anchor.href = "#";
-	anchor.onclick = func;
-	anchor.text = text;
-	anchor.className = "smalltext";
-	anchor.dataset.pmId = id;
-	anchor.dataset.pmPrevId = prev;
-	anchor.dataset.pmNextId = next;
-
-	node.appendChild(anchor);
-}
-
-function AddSmallLinkUpDown(node, text, down_func, up_func, id)
-{
-	var anchor = document.createElement("a");
-
-	anchor.href = "#";
-	anchor.onmousedown = down_func;
-	anchor.onmouseup = up_func;
-	anchor.text = text;
-	anchor.className = "smalltext";
-	anchor.dataset.pmId = id;
-
-	node.appendChild(anchor);
-}
-
-function AddText(node, text)
-{
-	var t = document.createTextNode(text);
-	node.appendChild(t);
-}
-
-function AddElement(node, elementname)
+function LoadDescriptions(keep_selection)
 {
-	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");
+	var rows = GetGroupRows();
+	var elem = document.getElementById("DescriptionSelect");
+	var f;
 
-	if ((rowcount % 2) == 1)
-	{
-		tr.className = "style1";
-	}
-	else
+	if (!keep_selection)
 	{
-		tr.className = "style2";
+		globalCurrentSelection = -1;
 	}
 
-	AddTableInputCell(id, desc, "Description", 1024, "description", "text", tr);
-	AddTableInputCell(id, username, "Username", 256, "username", "text", tr); 
-
-	if (ShowPasswords())
-	{
-		AddTableInputCell(id, password, "Password", 256,
-							"password", "text", tr); 
-	}
-	else
+	while(elem.length > 0)
 	{
-		AddTableInputCell(id, password, "Password", 256,
-							"password", "password", tr); 
+		elem.remove(0);
 	}
 
-	var td = document.createElement("td");
+	var firstid = -1;
+	var selected = false;
 
-	td.className = "commands";
-
-	if (id == -1)
-	{
-		AddSmallLink(td, "Add", DoAdd, id);
-	}
-	else
+	for(f = 0; f < rows.length; f++)
 	{
-		AddSmallLink(td, "Edit", DoEdit, id);
-		AddText(td, "\u00a0");
-		AddText(td, "\u00a0");
-		AddSmallLink(td, "Delete", DoDelete, id);
-		AddText(td, "\u00a0");
-		AddText(td, "\u00a0");
-		AddSmallLinkUpDown(td, "Show", DoShow, DoHide, id);
+		var option = document.createElement("option");
+
+		option.text = rows[f].description;
+		option.value = rows[f].id;
 
-		if (next_id != -1 || prev_id != -1)
+		if (firstid == -1)
 		{
-			if (prev_id != -1)
-			{
-				AddText(td, "\u00a0");
-				AddText(td, "\u00a0");
-				AddSmallLinkPrevNext(td, "Up", DoUp, id, prev_id, next_id);
-			}
-
-			if (next_id != -1)
-			{
-				AddText(td, "\u00a0");
-				AddText(td, "\u00a0");
-				AddSmallLinkPrevNext(td, "Down", DoDown, id, prev_id, next_id);
-			}
+			firstid = rows[f].id;
 		}
 
-		AddElement(td, "br");
+		if (globalCurrentSelection == rows[f].id)
+		{
+			selected = true;
+		}
 
-		AddSmallLink(td, "Copy Username", DoCopyUsername, id);
-		AddText(td, "\u00a0");
-		AddText(td, "\u00a0");
-		AddSmallLink(td, "Copy Password", DoCopyPassword, id);
+		elem.add(option);
 	}
 
-	tr.appendChild(td);
-
-	table.appendChild(tr);
-}
-
-function GetGroupRows()
-{
-	var result = [];
-
-	for(var f = 0; f < globalDb.length; f++)
+	if (!selected)
 	{
-		if (globalDb[f].group == globalCurrentGroup)
-		{
-			result.push(globalDb[f]);
-		}
+		globalCurrentSelection = firstid;
 	}
 
-	return result;
+	if (globalCurrentSelection != -1)
+	{
+		elem.value = globalCurrentSelection;
+	}
 }
 
 function LoadTable()
 {
-	var table = document.getElementById("DataTable");
-
-	table.innerHTML = "";
+	var record = GetData(globalCurrentSelection);
 
-	var rowcount = 0;
-
-	var rows = GetGroupRows();
-
-	for(var f = 0; f < rows.length; f++)
+	if (record != null)
 	{
-		var prevId = -1;
-		var nextId = -1;
+		var elem;
 
-		if (f > 0)
-		{
-			prevId = rows[f-1].id;
-		}
+		elem = document.getElementById("Description");
+		elem.value = record.description;
 
-		if (f < rows.length - 1)
-		{
-			nextId = rows[f+1].id;
-		}
+		elem = document.getElementById("Username");
+		elem.value = record.username;
 
-		AddRow(table,
-			   rows[f].id,
-			   prevId,
-			   nextId,
-			   rows[f].description,
-			   rows[f].username,
-			   Decrypt(rows[f].password),
-			   rowcount++);
+		elem = document.getElementById("Password");
+		elem.value = Decrypt(record.password);
 	}
-
-	AddRow(table, -1, -1, -1, "", "", "", rowcount++);
 }
 
 function RefreshDataAsync()
 {
 	globalDb = JSON.parse(this.responseText);
 	LoadGroups(true);
+	LoadDescriptions(true);
 	LoadTable();
+	SetButtonState();
 }
 
 function RefreshData()
@@ -388,6 +281,7 @@ function RefreshData()
 function LoadInitialData()
 {
 	LoadGroups(false);
+	LoadDescriptions(false);
 	LoadTable();
 }
 
@@ -403,6 +297,7 @@ function DoLoadAsync()
 	else
 	{
 		LoadInitialData();
+		SetButtonState();
 		SetEnable("ChangePassphrase", true);
 	}
 }
@@ -416,6 +311,7 @@ function DoLoad()
 	}
 
 	WebRequest("get.php", DoLoadAsync, []);
+	LoadInitialData();
 }
 
 function DoChangePassphraseAsync()
@@ -470,6 +366,15 @@ function DoSelectGroup()
 
 	globalCurrentGroup = elem.value;
 	document.getElementById("NewGroup").value = "";
+	LoadDescriptions(false);
+	LoadTable();
+}
+
+function DoSelectDescription()
+{
+	var elem = document.getElementById("DescriptionSelect");
+
+	globalCurrentSelection = elem.value;
 	LoadTable();
 }
 
@@ -483,22 +388,29 @@ 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 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 description = document.getElementById("Description").value;
+	var username = document.getElementById("Username").value;
+	var password = document.getElementById("Password").value;
 	var group;
 
 	if (description == "" || username == "" | password == "")
@@ -543,10 +455,9 @@ function DoEditAsync()
 
 function DoEdit()
 {
-	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 description = document.getElementById("Description").value;
+	var username = document.getElementById("Username").value;
+	var password = document.getElementById("Password").value;
 	var group;
 
 	if (description == "" || username == "" | password == "")
@@ -567,7 +478,7 @@ function DoEdit()
 
 	WebRequest("edit.php", DoEditAsync,
 	[
-		"id", id,
+		"id", globalCurrentSelection,
 		"description", description,
 		"group", group,
 		"username", username,
@@ -592,26 +503,21 @@ function DoDeleteAsync()
 
 function DoDelete()
 {
-	var id = this.dataset.pmId;
-
 	WebRequest("delete.php", DoDeleteAsync,
 	[
-		"id", id
+		"id", globalCurrentSelection
 	]
 	);
 }
 
 function DoCopyUsername()
 {
-	var id = "Username" + this.dataset.pmId;
-	Copy(id);
+	Copy("Username");
 }
 
 function DoCopyPassword()
 {
-	var id = "Password" + this.dataset.pmId;
-
-	SaveScroll();
+	var id = "Password";
 
 	if (!ShowPasswords())
 	{
@@ -624,15 +530,12 @@ function DoCopyPassword()
 	{
 		SetInputType(id, "password");
 	}
-
-	RestoreScroll();
 }
 
 function DoShow()
 {
 	if (!ShowPasswords())
 	{
-		SaveScroll();
 		SetInputType("Password" + this.dataset.pmId, "text");
 	}
 }
@@ -642,7 +545,6 @@ function DoHide()
 	if (!ShowPasswords())
 	{
 		SetInputType("Password" + this.dataset.pmId, "password");
-		setTimeout(RestoreScroll, 0);
 	}
 }
 
@@ -657,7 +559,6 @@ function DoReorderAsync()
 	else
 	{
 		RefreshData();
-		RestoreScroll();
 	}
 }
 
@@ -666,8 +567,6 @@ function DoUp()
 	var id = this.dataset.pmId;
 	var prev = this.dataset.pmPrevId;
 
-	SaveScroll();
-
 	WebRequest("reorder.php", DoReorderAsync,
 	[
 		"from_id", id,
@@ -681,8 +580,6 @@ function DoDown()
 	var id = this.dataset.pmId;
 	var next = this.dataset.pmNextId;
 
-	SaveScroll();
-
 	WebRequest("reorder.php", DoReorderAsync,
 	[
 		"from_id", id,
@@ -706,16 +603,8 @@ function DoShowPasswords()
 
 	SetInputType("PassPhrase", type);
 	SetInputType("NewPassPhrase", 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);
-	}
+	SetInputType("Password", type);
+	SetInputType("NewPassword", type);
 }
 
 // vim: sw=4 ts=4