Adding Simple UI
This commit is contained in:
sairajzero
parent
003973b526
commit
e7501916c8
@ -3,7 +3,22 @@
|
|||||||
|
|
||||||
<head>
|
<head>
|
||||||
<title>FLO SpreadSheet</title>
|
<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">
|
<script id="floGlobals">
|
||||||
/* Constants for FLO blockchain operations !!Make sure to add this at begining!! */
|
/* Constants for FLO blockchain operations !!Make sure to add this at begining!! */
|
||||||
const floGlobals = {
|
const floGlobals = {
|
||||||
@ -33,12 +48,215 @@
|
|||||||
generalVC: {}
|
generalVC: {}
|
||||||
}
|
}
|
||||||
</script>
|
</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>
|
</head>
|
||||||
|
|
||||||
<body onload="onLoadStartUp()">
|
<body onload="onLoadStartUp()">
|
||||||
SpreadSheet_TEST_MODE
|
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">
|
<script id="init_lib">
|
||||||
//All util libraries required for Standard operations (DO NOT EDIT ANY)
|
//All util libraries required for Standard operations (DO NOT EDIT ANY)
|
||||||
@ -8763,23 +8981,6 @@ Bitcoin.Util = {
|
|||||||
reactor.registerEvent("startUpErrorLog");
|
reactor.registerEvent("startUpErrorLog");
|
||||||
reactor.addEventListener("startUpErrorLog", log => console.error(log))
|
reactor.addEventListener("startUpErrorLog", log => console.error(log))
|
||||||
</script>
|
</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">
|
<script id="SpreadSheet">
|
||||||
const spreadSheet = {
|
const spreadSheet = {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user