RanchiMall/flologsheet
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v0.9.2

Browse Source 
Bugs Fixed:
- Fixed: sheet-view not cleared upon signout

Added:
- Added: Feature to sort the table contents (click on the column to sort)
- Added: Button to view the groupBy popup
- Added: Hovering on a log displays writer's floID and log time

Others:
- Hide sheet detail UI at startup
This commit is contained in:
sairajzero 2020-03-31 23:37:53 +05:30
parent 42f4e584cb
commit 3a24e78823
1 changed files with 90 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

112
FLO_LogSheet.html
View File

@ -514,13 +514,14 @@
margin: 0.5rem; margin: 0.5rem;
padding: 0 0.5rem; padding: 0 0.5rem;
overflow: hidden; overflow: hidden;
height: 3rem; height: 1.5rem;
display: inline-block;
} }
.table-container { .table-container {
margin: 0 1rem 1rem 1rem; margin: 0 1rem 1rem 1rem;
overflow: scroll; overflow: scroll;
max-height: 18rem; max-height: 19rem;
} }
table { table {
@ -657,6 +658,22 @@
margin: 0.5rem; margin: 0.5rem;
} }
#view-group-by {
float: right;
margin-right: 0.5rem;
height: 1.5rem;
width: 5rem;
background: var(--alt-light);
color: var(--alt-dark);
border: 0.1rem solid var(--alt-dark);
border-radius: 0.2rem;
}
#view-group-by:hover {
background: var(--alt-dark);
color: var(--alt-light);
}
#group-by>div:first-child { #group-by>div:first-child {
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
@ -744,8 +761,9 @@
clearElement(document.getElementById("startup-load-msg")) clearElement(document.getElementById("startup-load-msg"))
clearElement(document.getElementById('person-list')) clearElement(document.getElementById('person-list'))
clearElement(document.getElementById('sheet-list')) clearElement(document.getElementById('sheet-list'))
clearElement(document.getElementById('sheet-view'))
//set the custom Privkey input //set the custom Privkey input
floDapps.setCustomPrivKeyInput( () => { floDapps.setCustomPrivKeyInput(() => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let signInBox = document.getElementById("sign-in-box") let signInBox = document.getElementById("sign-in-box")
signInBox.classList.remove('hide') signInBox.classList.remove('hide')
@ -773,7 +791,7 @@
console.log(result) console.log(result)
document.getElementById("greet-tag").textContent = `Hi, ${myFloID}` document.getElementById("greet-tag").textContent = `Hi, ${myFloID}`
showMessage("SignIn Successful") showMessage("SignIn Successful")
reactor.dispatchEvent("startUpSuccessLog",`Downloading objectData! Please Wait...`) reactor.dispatchEvent("startUpSuccessLog", `Downloading objectData! Please Wait...`)
//request object data from Supernode //request object data from Supernode
logSheet.init().then(result => { logSheet.init().then(result => {
console.log(result) console.log(result)
@ -783,15 +801,16 @@
//hide loading screen //hide loading screen
document.getElementById("loading-screen").classList.add("hide") document.getElementById("loading-screen").classList.add("hide")
//display add buttons if subAdmin, else hide //display add buttons if subAdmin, else hide
if(floGlobals.subAdmins.includes(myFloID)){ if (floGlobals.subAdmins.includes(myFloID)) {
document.getElementById("add-person").classList.remove('hide') document.getElementById("add-person").classList.remove('hide')
document.getElementById("new-sheet").classList.remove('hide') document.getElementById("new-sheet").classList.remove('hide')
}else{ } else {
document.getElementById("add-person").classList.add('hide') document.getElementById("add-person").classList.add('hide')
document.getElementById("new-sheet").classList.add('hide') document.getElementById("new-sheet").classList.add('hide')
} }
document.getElementById("sheet-details").classList.add("hide")
}).catch(error => { }).catch(error => {
reactor.dispatchEvent("startUpErrorLog",`Failed to download objectData`) reactor.dispatchEvent("startUpErrorLog", `Failed to download objectData`)
showMessage(error, "error") showMessage(error, "error")
}) })
}).catch(error => showMessage(error, "error")) }).catch(error => showMessage(error, "error"))
@ -933,10 +952,11 @@
<div id="sheet-list"></div> <div id="sheet-list"></div>
</nav> </nav>
<div class="container"> <div class="container">
<div id="sheet-details"> <div id="sheet-details" class="hide">
<h4></h4> <h4></h4>
<h6></h6> <h6></h6>
<p></p> <p></p>
<button id="view-group-by">Groupby</button>
</div> </div>
<form class="table-container" id="sheet-view" onsubmit="enterLog(); return false;"></form> <form class="table-container" id="sheet-view" onsubmit="enterLog(); return false;"></form>
<button type="submit" form="sheet-view" style="display: none;"></button> <button type="submit" form="sheet-view" style="display: none;"></button>
@ -957,19 +977,19 @@
else if (e.target.parentNode.parentNode.classList.contains("person-card")) else if (e.target.parentNode.parentNode.classList.contains("person-card"))
copyToLogInput(e.target.parentNode.parentNode.children[1].children[0].textContent) copyToLogInput(e.target.parentNode.parentNode.children[1].children[0].textContent)
else if (e.target.tagName === "TD" && e.target.parentElement.parentElement.tagName === "THEAD") else if (e.target.tagName === "TD" && e.target.parentElement.parentElement.tagName === "THEAD")
document.getElementById("group-by").parentNode.classList.remove("hide") sortTable(e.target.parentElement.parentElement.parentElement, e.target.cellIndex)
} catch (error) { } catch (error) {
//do nothing //do nothing
} }
}; };
document.getElementById("sign-out").addEventListener('click', function(e){ document.getElementById("sign-out").addEventListener('click', function (e) {
getConfirmation('Are you sure you want to Sign out?').then(result => { getConfirmation('Are you sure you want to Sign out?').then(result => {
try{ try {
floDapps.clearCredentials(); floDapps.clearCredentials();
showMessage("Successfully Signed out") showMessage("Successfully Signed out")
setTimeout(onLoadStartUp, 2000) setTimeout(onLoadStartUp, 2000)
}catch(error){ } catch (error) {
showMessage(error, "error") showMessage(error, "error")
} }
}) })
@ -1012,6 +1032,10 @@
document.getElementById("additional-fields").appendChild(field) document.getElementById("additional-fields").appendChild(field)
}) })
document.getElementById('view-group-by').addEventListener("click", function (e) {
document.getElementById("group-by").parentNode.classList.remove("hide")
})
document.getElementById('group-by-menu').children[0].addEventListener("change", function (e) { document.getElementById('group-by-menu').children[0].addEventListener("change", function (e) {
try { try {
@ -1046,6 +1070,7 @@
} }
}) })
function removeElement(element) { function removeElement(element) {
element.parentNode.removeChild(element); element.parentNode.removeChild(element);
} }
@ -1055,13 +1080,13 @@
return element; return element;
} }
function getConfirmation(message){ function getConfirmation(message) {
let confirmation = document.getElementById("confirmation"); let confirmation = document.getElementById("confirmation");
confirmation.children[0].textContent = message; confirmation.children[0].textContent = message;
confirmation.parentNode.classList.remove("hide") confirmation.parentNode.classList.remove("hide")
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let interval = setInterval(()=>{ let interval = setInterval(() => {
if(confirmation.parentNode.classList.contains("hide")){ if (confirmation.parentNode.classList.contains("hide")) {
confirmation.children[1].children[0].onclick = null; confirmation.children[1].children[0].onclick = null;
confirmation.children[1].children[1].onclick = null; confirmation.children[1].children[1].onclick = null;
clearInterval(interval); clearInterval(interval);
@ -1140,7 +1165,6 @@
} catch (error) { } catch (error) {
showMessage(error, "error") showMessage(error, "error")
} }
} }
function createSheet() { function createSheet() {
@ -1174,18 +1198,18 @@
function enterLog() { function enterLog() {
let title = document.getElementById("sheet-details").children[0].textContent; let title = document.getElementById("sheet-details").children[0].textContent;
let form = document.forms['sheet-view'] let form = document.forms['sheet-view']
if (form[0].tagName === 'INPUT'){ if (form[0].tagName === 'INPUT') {
let floID = form[0].value; let floID = form[0].value;
let log = [] let log = []
for(let i=1;i<form.length-1;i++) for (let i = 1; i < form.length - 1; i++)
log.push(form[i].value) log.push(form[i].value)
logSheet.enterLog(title, floID, log).then(result => { logSheet.enterLog(title, floID, log).then(result => {
form.reset(); form.reset();
showMessage('Log Entry Successful') showMessage('Log Entry Successful')
let row = document.getElementById("sheet-view").getElementsByTagName("tbody")[0].insertRow(1) let row = document.getElementById("sheet-view").getElementsByTagName("tbody")[0].insertRow(1);
row.insertCell(0).textContent = floID row.insertCell(0).textContent = floID
for(let k = 0; k < log.length; k++) for (let k = 0; k < log.length; k++)
row.insertCell(k+1).textContent = log[k] row.insertCell(k + 1).textContent = log[k]
}).catch(error => showMessage(error, "error")) }).catch(error => showMessage(error, "error"))
} }
} }
@ -1237,8 +1261,16 @@
} }
function renderSheetView(title, description, editors, attributes, sheet, isWriteable) { function renderSheetView(title, description, editors, attributes, sheet, isWriteable) {
const parseVectorClock = (vc) => {
vc = vc.split('_')
console.log(vc)
let time = new Date(parseInt(vc[0])).toString().slice(4, 24);
let floID = vc[1]
return `by ${floID} (${time})`
}
//Add Sheet Details //Add Sheet Details
let sheetDetails = document.getElementById("sheet-details") let sheetDetails = document.getElementById("sheet-details")
sheetDetails.classList.remove("hide")
sheetDetails.children[0].textContent = title; sheetDetails.children[0].textContent = title;
sheetDetails.children[1].textContent = editors; sheetDetails.children[1].textContent = editors;
sheetDetails.children[2].textContent = description; sheetDetails.children[2].textContent = description;
@ -1251,6 +1283,7 @@
let tbody = document.createElement("tbody") let tbody = document.createElement("tbody")
sheet.forEach(data => { sheet.forEach(data => {
let row = tbody.insertRow(0); let row = tbody.insertRow(0);
row.setAttribute("title", parseVectorClock(data.vc))
row.insertCell(0).textContent = data.floID row.insertCell(0).textContent = data.floID
data.log.forEach(l => row.insertCell().textContent = l) data.log.forEach(l => row.insertCell().textContent = l)
}) })
@ -1264,7 +1297,8 @@
clearElement(document.getElementById("sheet-view")).appendChild(table); clearElement(document.getElementById("sheet-view")).appendChild(table);
//Add options for groupBy //Add options for groupBy
document.getElementById('group-by').children[0].textContent = `Group ${title} by`; document.getElementById('group-by').children[0].textContent = `Group ${title} by`;
document.getElementById('group-by-view').innerHTML = `<table><thead><tr><td>FLO ID</td><td><i>null</i></td></tr></thead></table>` document.getElementById('group-by-view').innerHTML =
`<table><thead><tr><td>FLO ID</td><td><i>null</i></td></tr></thead></table>`
let colSelect = clearElement(document.getElementById('group-by-menu').children[1]); let colSelect = clearElement(document.getElementById('group-by-menu').children[1]);
attributes.forEach(a => { attributes.forEach(a => {
let opt = document.createElement('option'); let opt = document.createElement('option');
@ -1288,6 +1322,40 @@
table.appendChild(tbody); table.appendChild(tbody);
clearElement(document.getElementById("group-by-view")).appendChild(table); clearElement(document.getElementById("group-by-view")).appendChild(table);
} }
function sortTable(table, n) {
console.log(table, n)
let dir = "DESC";
let flag = false;
let startRow = (table.getElementsByTagName("INPUT").length === 0) ? 1 : 2
while (true) {
let rows = table.rows;
let swapIndex = false;
console.log(rows)
for (let i = startRow; i < rows.length - 1; i++) {
let x = rows[i].getElementsByTagName("TD")[n].textContent;
let y = rows[i + 1].getElementsByTagName("TD")[n].textContent;
let x_ = parseFloat(x)
let y_ = parseFloat(y)
if (isNaN(x_) || isNaN(y_)) {
x_ = x.toLowerCase()
y_ = y.toLowerCase()
}
if ((dir == "DESC" && x_ < y_) || (dir == "ASC" && x_ > y_)) {
swapIndex = i;
break;
}
}
if (swapIndex !== false) {
rows[swapIndex].parentNode.insertBefore(rows[swapIndex + 1], rows[swapIndex]);
flag = true;
} else if (!flag && dir == 'DESC')
dir = "ASC";
else
break
}
}
</script> </script>
<script id="init_lib"> <script id="init_lib">