From 1742a245acd15db2d017b5f443a316fc624d8868 Mon Sep 17 00:00:00 2001 From: Ian C Date: Mon, 30 Jul 2018 14:42:00 +0000 Subject: Changed to a single record display to remove the hideous problem with the page jumping. --- www/add.php | 1 + www/css/main.css | 47 ++++++-- www/index.html | 34 +++++- www/scripts/main.js | 329 +++++++++++++++++----------------------------------- 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 @@ Group: - @@ -50,14 +50,42 @@ - +
-
+ + + + + + + +
+ + + + + + + + + + +
+ + +
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 -- cgit v1.2.3