-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
145 lines (139 loc) · 6.27 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<html>
<head>
<meta charset="utf-8"/>
<title>SimpleSQL SDK for disposbale HTTP accessible databases</title>
<script type="text/javascript" src="https://unpkg.com/@redbeardlab/simplesql@>=1.0.8"></script>
</head>
<body>
<h1> TODO App with SimpleSQL </h1>
<div>
<h2> Intro </h2>
<p> <a href="https://simplesql.redbeardlab.com/">SimpleSQL</a> is an API that allow to interact with disposable databases using HTTP calls. </p>
<p> We provide a small Javascript SDK to simplify developement of static web sites. </p>
<p> The main documentation of the SDK is the <a href="https://github.com/RedBeardLab/SimpleSQLSDK">github page</a>. </p>
<p> The REST API is <a href="https://app.swaggerhub.com/apis-docs/redbeardlab/simplesql.redbeardlab.com/">documented on swagger</a>, that also allow to test the API live. </p>
<h2> What I am looking at </h2>
<p> This page is a completely static page made of HTML and JS (not even CSS), that implements a simple TODO app using SimpleSQL. </p>
<p> There is not a backend but we only use the SimpleSQL API. Directly from the frontend we can create databases and interact with them, executing whatever SQL command we want. </p>
<h2> An overview </h2>
<p> SimpleSQL rotate around the concept of database, with a simple call you can create a new database and the API will give you back the ID of the database. You need the ID to access the database.</p>
<p> Once you get the database, you can do whatever you want with it. Create table, insert values, delete values or tables. The databases, of course, keep their state. </P>
<p> Authentication is provided with the use of tokens, but for this I suggest to refer to the documentation. </p>
<h2> The TODO App </h2>
<p> The TODO app is an execuse to test and use the API, it quickly guide you on a standard workflow with SimpleSQL. </p>
<p> The first step one a frontend app will be to import the SDK, and this page already does so. </p>
<p> Then the user need to access one database, it can create a new one (like in this case), read the ID of the database from a cookie or from local storage, or even read the ID from a central database. </p>
<p> The last step is to interact with the database, and this can be done using standard SQL commands and queries. The SQL dialect is SQLite. </p>
<br>
<p> The following steps guide you through it. Of course it is a limited example, but you can build very complex static page on top of this. </p>
</div>
<div>
<h2>1. Import the SKD </h2>
<pre><code><script type="text/javascript" src="https://unpkg.com/@redbeardlab/simplesql@>=1.0.8"></script></code></pre>
</div>
<div>
<h2>2. Create a new database </h2>
<pre><code>const new_database = await SimpleSQL.newDatabase();</code></pre>
<button onclick="createNewDatabase()"> Create a new database </button>
<div id="feedback_2"></div>
</div>
<div>
<h2>3. Create the table </h2>
<pre><code>const done = await SimpleSQL.command(new_database, "CREATE TABLE todo(item TEXT, done INT);");</code></pre>
<button onclick="createTable()"> Create table </button>
<div id="feedback_3"></div>
</div>
<div>
<h2>4. Insert elements </h2>
<pre><code>const done = await SimpleSQL.command(new_database, "INSERT INTO todo VALUES('buy the milk', 0);");</code></pre>
<select id="to_insert_select">
<option value="1">'buy the milk'</option>
<option value="2">'go running'</option>
<option value="3">'walk the dog'</option>
</select>
<button onclick="insertElement()"> Insert </button>
<div id="feedback_4"></div>
</div>
<div style="padding-top=2rem;">
<table id="list" style="border: 1px solid black; border-collapse: collapse;"></table>
</div>
<script>
var db = "";
var table_created = false;
async function createNewDatabase() {
db = await SimpleSQL.newDatabase();
document.getElementById('feedback_2').innerHTML = 'Created new database with ID: ' + db;
};
async function createTable() {
if (db == "") {
document.getElementById('feedback_3').innerHTML = 'First you need to create a new database';
return;
}
try {
await SimpleSQL.command(db, 'CREATE TABLE todo(item TEXT, done INT);');
document.getElementById('feedback_3').innerHTML = 'Table created!';
table_created = true;
renderTable();
} catch (e) {
document.getElementById('feedback_3').innerHTML = 'Error in creating the table: ' + e;
}
};
async function insertElement() {
if (!table_created) {
document.getElementById('feedback_4').innerHTML = 'First you need to create the table';
return;
}
var to_insert = document.getElementById('to_insert_select').value;
const options = {
'1': "INSERT INTO todo VALUES('buy the milk', 0);",
'2': "INSERT INTO todo VALUES('go running', 0);",
'3': "INSERT INTO todo VALUES('walk the dog', 0);"
};
query = options[to_insert];
try {
await SimpleSQL.command(db, query);
document.getElementById('feedback_4').innerHTML = 'Inserted!';
renderTable();
} catch (e) {
document.getElementById('feedback_4').innerHTML = 'Error in inserting the element: ' + e;
}
};
function createRemoveItem(id) {
let f = async function (_e) {
let cmd = "DELETE FROM todo WHERE oid = " + id + ";";
console.log(cmd);
await SimpleSQL.command(db, cmd);
console.log('DONE');
renderTable();
};
return f;
}
async function renderTable() {
if (!table_created) {
return;
}
let result = await SimpleSQL.command(db, "SELECT oid, item, done FROM todo;");
let t = document.getElementById('list');
t.innerHTML = "";
var header = t.createTHead();
var hrow = header.insertRow(0);
hrow.insertCell(0).innerHTML = "I did it!";
hrow.insertCell(1).innerHTML = "Item to do";
console.log(result);
for (rows in result['values']) {
oid = result['values'][rows][0];
var row = t.insertRow(-1);
var doneButton = row.insertCell(0);
var btn = document.createElement("button");
btn.innerHTML = "DONE";
btn.onclick = createRemoveItem(oid);
doneButton.appendChild(btn);
doneButton.style = "border: 1px solid black;"
var item = row.insertCell(1);
item.style = "border: 1px solid black;"
item.innerHTML = result['values'][rows][1];
}
}
</script>
</body>
</html>