Adding Simple UI
This commit is contained in:
sairajzero
parent
003973b526
commit
e7501916c8
@ -3,7 +3,22 @@
|
||||
|
||||
<head>
|
||||
<title>FLO SpreadSheet</title>
|
||||
|
||||
<style>
|
||||
section{
|
||||
align-self: center;
|
||||
border-style: solid;
|
||||
width: 1000px;
|
||||
}
|
||||
section>div{
|
||||
border-style: groove;
|
||||
width: 45%;
|
||||
display: inline-block;
|
||||
}
|
||||
ol li:hover{
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
<script id="floGlobals">
|
||||
/* Constants for FLO blockchain operations !!Make sure to add this at begining!! */
|
||||
const floGlobals = {
|
||||
@ -33,12 +48,215 @@
|
||||
generalVC: {}
|
||||
}
|
||||
</script>
|
||||
<script id="onLoadStartUp">
|
||||
function onLoadStartUp() {
|
||||
|
||||
//floDapps.addStartUpFunction('Sample', Promised Function)
|
||||
//floDapps.setAppObjectStores({sampleObs1:{}, sampleObs2:{options{autoIncrement:true, keyPath:'SampleKey'}, Indexes:{sampleIndex:{}}}})
|
||||
//floDapps.setCustomPrivKeyInput( () => { FUNCTION BODY *must return private key* } )
|
||||
|
||||
floDapps.launchStartUp().then(result => {
|
||||
console.log(result)
|
||||
spreadSheet.init().then(result => {
|
||||
console.log(result)
|
||||
alert(`Welcome FLO_ID: ${myFloID}`)
|
||||
renderPersonList(spreadSheet.listPersons())
|
||||
renderSheetList(spreadSheet.listSheets())
|
||||
if(floGlobals.subAdmins.includes(myFloID))
|
||||
document.getElementById("saveBtn").disabled = false
|
||||
})
|
||||
//App functions....
|
||||
}).catch(error => console.error(error))
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body onload="onLoadStartUp()">
|
||||
SpreadSheet_TEST_MODE
|
||||
(use console)
|
||||
<div>
|
||||
<button id="saveBtn" disable>Save</button>
|
||||
<section>
|
||||
<div>
|
||||
Persons:
|
||||
<ol id="personList"></ol>
|
||||
</div>
|
||||
<div>
|
||||
Person Details:
|
||||
<ul id="personDetails"></ul>
|
||||
</div>
|
||||
<div>
|
||||
Add Person: <br/>
|
||||
<form id="addPerson">
|
||||
FLO_ID: <input type="text" id="addPerson_floID"/><br/>
|
||||
name: <input type="text" id="addPerson_name"/><br/>
|
||||
</form>
|
||||
otherFields: <input type="number" id="addPerson_nFields"/><button>Go</button>
|
||||
<div id="otherFields"></div><br/>
|
||||
<button id="addPerson_submit">Add Person</button>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<div>
|
||||
Sheets:
|
||||
<ol id="sheetList"></ol>
|
||||
</div>
|
||||
<div>
|
||||
Create New Sheet: <br/>
|
||||
<form id="createSheet">
|
||||
Title: <input type="text" id="createSheet_title"/><br/>
|
||||
Description: <input type="text" id="createSheet_description"/><br/>
|
||||
<input type="checkbox" id="createSheet_customEditorCheck"/>Custom Editors(line seperate): <textarea type="text" id="createSheet_editors"></textarea><br/>
|
||||
Columns(line seperated): <textarea type="text" id="createSheet_columns"></textarea><br/>
|
||||
<button id="createSheet_submit">Create New Sheet</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
TITLE: <span id="viewSheet_title"></span><br/>
|
||||
Description: <span id="viewSheet_description"></span><br/>
|
||||
Editors: <span id="viewSheet_editors"></span><br/>
|
||||
<button id="enterLogBtn" disabled>Enter Log</button><br/>
|
||||
<span id="viewSheet_table"></span>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<script id="UI">
|
||||
|
||||
document.getElementById("saveBtn").addEventListener("click", () => {
|
||||
spreadSheet.commitUpdates().then(result=>{
|
||||
console.log("Save Successful", result)
|
||||
alert("Save Successful")
|
||||
})
|
||||
})
|
||||
|
||||
function renderPersonList(list){
|
||||
let display = document.getElementById("personList")
|
||||
for(p in list){
|
||||
let floID = p //need scope
|
||||
let element = document.createElement("li");
|
||||
element.textContent = list[floID].name;
|
||||
element.addEventListener("click", () => viewPersonDetails(floID))
|
||||
display.appendChild(element)
|
||||
}
|
||||
}
|
||||
|
||||
function viewPersonDetails(floID){
|
||||
let display = document.getElementById("personDetails")
|
||||
let details = spreadSheet.viewPerson(floID)
|
||||
display.innerHTML = `<li><b>FLO_ID: ${floID}</b></li> `
|
||||
for(d in details){
|
||||
let element = document.createElement("li");
|
||||
element.textContent = `${d}: ${details[d]}`
|
||||
display.appendChild(element)
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById("addPerson_nFields").nextSibling.addEventListener("click", () => {
|
||||
let n = document.getElementById("addPerson_nFields").value;
|
||||
console.log(n)
|
||||
let fields = document.getElementById("otherFields")
|
||||
for(i = 1; i <= n; i++){
|
||||
let element = document.createElement("p")
|
||||
element.innerHTML = `<input type="text">: <input type="text">`
|
||||
fields.appendChild(element)
|
||||
}
|
||||
})
|
||||
|
||||
document.getElementById("addPerson_submit").addEventListener("click", () => {
|
||||
let floID = document.getElementById("addPerson_floID").value;
|
||||
let name = document.getElementById("addPerson_name").value;
|
||||
var otherFields = document.getElementById("otherFields").children;
|
||||
let otherDetails = {}
|
||||
for (var i = 0; i < otherFields.length; i++)
|
||||
otherDetails[otherFields[i].children[0].value] = otherFields[i].children[1].value
|
||||
spreadSheet.addPerson(floID, name, otherDetails)
|
||||
renderPersonList({[floID]:spreadSheet.viewPerson(floID)})
|
||||
document.getElementById("addPerson").reset()
|
||||
})
|
||||
|
||||
function renderSheetList(list){
|
||||
let display = document.getElementById("sheetList")
|
||||
for(s in list){
|
||||
let title = s //need scope
|
||||
let element = document.createElement("li");
|
||||
element.textContent = title;
|
||||
element.addEventListener("click", () => viewSheet(title))
|
||||
display.appendChild(element)
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById("createSheet_submit").addEventListener("click", () => {
|
||||
let title = document.getElementById("createSheet_title").value;
|
||||
let description = document.getElementById("createSheet_description").value;
|
||||
let attributes = document.getElementById("createSheet_columns").value.split('\n')
|
||||
let customEditors = document.getElementById("createSheet_editors").value.split('\n')
|
||||
if(document.getElementById("createSheet_customEditorCheck").checked)
|
||||
spreadSheet.createNewSheet(title, description, attributes, customEditors)
|
||||
else
|
||||
spreadSheet.createNewSheet(title, description, attributes)
|
||||
renderSheetList({[title]: true})
|
||||
document.getElementById("createSheet").reset()
|
||||
})
|
||||
|
||||
function viewSheet(title){
|
||||
spreadSheet.refreshLogs(title).then(result => {
|
||||
let data = spreadSheet.viewLogs(title)
|
||||
console.log(data)
|
||||
document.getElementById("viewSheet_title").textContent = data.title
|
||||
document.getElementById("viewSheet_description").textContent = data.description
|
||||
document.getElementById("viewSheet_editors").textContent = data.editors.join(", ")
|
||||
document.getElementById("viewSheet_table").innerHTML = ""
|
||||
document.getElementById("enterLogBtn").disabled = true
|
||||
//Create Table
|
||||
let table = document.createElement("table")
|
||||
//Render Header and Input Row
|
||||
let header = table.insertRow(0);
|
||||
let inputRow = table.insertRow(1);
|
||||
header.insertCell(0).textContent = 'FLO_ID'
|
||||
inputRow.insertCell(0).innerHTML = `<input type="text">`
|
||||
for(let i = 0; i < data.attributes.length; i++){
|
||||
header.insertCell(i+1).textContent = data.attributes[i]
|
||||
inputRow.insertCell(i+1).innerHTML = `<input type="text">`
|
||||
}
|
||||
//Render all Log activities
|
||||
for(let j = 0; j < data.sheet.length; j++){
|
||||
let row = table.insertRow(2)
|
||||
row.insertCell(0).textContent = data.sheet[j].floID
|
||||
for(let k = 0; k< data.sheet[j].log.length; k++)
|
||||
row.insertCell(k+1).textContent = data.sheet[j].log[k]
|
||||
}
|
||||
document.getElementById("viewSheet_table").appendChild(table)
|
||||
//Enable Entry log button if user is editor
|
||||
if(data.editors.includes(myFloID))
|
||||
document.getElementById("enterLogBtn").disabled = false
|
||||
}).catch(error => {
|
||||
document.getElementById("viewSheet_title").textContent = "null"
|
||||
document.getElementById("viewSheet_description").textContent = "null"
|
||||
document.getElementById("viewSheet_editors").textContent = "null"
|
||||
document.getElementById("viewSheet_table").textContent = "ERROR"
|
||||
document.getElementById("enterLogBtn").disabled = true
|
||||
})
|
||||
}
|
||||
|
||||
document.getElementById("enterLogBtn").addEventListener("click", () => {
|
||||
let title = document.getElementById("viewSheet_title").textContent
|
||||
let inputs = document.getElementById("viewSheet_table").getElementsByTagName("input")
|
||||
let floID = inputs[0].value
|
||||
let log = []
|
||||
for(let i=1; i<inputs.length; i++){
|
||||
log.push(inputs[i].value)
|
||||
inputs[i].value = ''
|
||||
}
|
||||
spreadSheet.enterLog(title, floID, log).then(result => {
|
||||
let row = document.getElementById("viewSheet_table").getElementsByTagName("table")[0].insertRow(2)
|
||||
row.insertCell(0).textContent = floID
|
||||
for(let k = 0; k < log.length; k++)
|
||||
row.insertCell(k+1).textContent = log[k]
|
||||
}).catch(error => console.log(error))
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<script id="init_lib">
|
||||
//All util libraries required for Standard operations (DO NOT EDIT ANY)
|
||||
@ -8763,23 +8981,6 @@ Bitcoin.Util = {
|
||||
reactor.registerEvent("startUpErrorLog");
|
||||
reactor.addEventListener("startUpErrorLog", log => console.error(log))
|
||||
</script>
|
||||
<script id="onLoadStartUp">
|
||||
function onLoadStartUp() {
|
||||
|
||||
//floDapps.addStartUpFunction('Sample', Promised Function)
|
||||
//floDapps.setAppObjectStores({sampleObs1:{}, sampleObs2:{options{autoIncrement:true, keyPath:'SampleKey'}, Indexes:{sampleIndex:{}}}})
|
||||
//floDapps.setCustomPrivKeyInput( () => { FUNCTION BODY *must return private key* } )
|
||||
|
||||
floDapps.launchStartUp().then(result => {
|
||||
console.log(result)
|
||||
spreadSheet.init().then(result => {
|
||||
console.log(result)
|
||||
alert(`Welcome FLO_ID: ${myFloID}`)
|
||||
})
|
||||
//App functions....
|
||||
}).catch(error => console.error(error))
|
||||
}
|
||||
</script>
|
||||
|
||||
<script id="SpreadSheet">
|
||||
const spreadSheet = {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user