g2
This commit is contained in:
Turtle committed
1 parent
75e445ef91
commit
c84cd0f9f2
6 files changed
+338
-67
No files matched your search
@@ -0,0 +1,4 @@
|
||||
const couchdb_username = "admin";
|
||||
const couchdb_password = "admin";
|
||||
|
||||
const couchdb_name = "sassy";
|
||||
@@ -1,59 +0,0 @@
|
||||
const getId = (id) => document.getElementById(id);
|
||||
|
||||
function showOverlay(id) {
|
||||
const elm = getId(id);
|
||||
const overlay = document.createElement("div");
|
||||
overlay.classList.add("overlay");
|
||||
overlay.setAttribute("name", id);
|
||||
overlay.innerHTML = `
|
||||
<div onclick="_onOverlayDestroy(this.parentElement);"></div>
|
||||
<div>
|
||||
<button class="close" onclick="_onOverlayDestroy(this.parentElement.parentElement);">X</button>
|
||||
${elm.innerHTML}
|
||||
</div>
|
||||
`;
|
||||
document.body.appendChild(overlay);
|
||||
}
|
||||
function _onOverlayDestroy(elm) {
|
||||
const ori_elm = getId(elm.getAttribute("name"));
|
||||
if (ori_elm) {
|
||||
const cb = ori_elm.getAttribute("onclose");
|
||||
if (typeof(cb) == "string") {
|
||||
try { eval(cb); } catch(err) { console.error(err); }
|
||||
}
|
||||
}
|
||||
elm.remove();
|
||||
}
|
||||
function hideOverlay(id) {
|
||||
const elms = document.getElementsByName(id);
|
||||
for (var i of elms) _onOverlayDestroy(i);
|
||||
}
|
||||
|
||||
|
||||
function _main_events() {
|
||||
const header_bar_1 = document.querySelector(".header_bar_1");
|
||||
if (header_bar_1 != null) {
|
||||
let isFloating = false;
|
||||
window.addEventListener("load", function () {
|
||||
if (window.pageYOffset > 0) {
|
||||
header_bar_1.style.animationDuration = "0s";
|
||||
header_bar_1.classList.add("header_bar_1_undocked");
|
||||
isFloating = true;
|
||||
}
|
||||
});
|
||||
window.addEventListener("scroll", function() {
|
||||
if (window.pageYOffset > 0 && !isFloating) {
|
||||
header_bar_1.style.animationDuration = "0.5s";
|
||||
header_bar_1.classList.remove("header_bar_1_docked");
|
||||
header_bar_1.classList.add("header_bar_1_undocked");
|
||||
isFloating = true;
|
||||
} else if (window.pageYOffset === 0 && isFloating) {
|
||||
header_bar_1.style.animationDuration = "0.5s";
|
||||
header_bar_1.classList.remove("header_bar_1_undocked");
|
||||
header_bar_1.classList.add("header_bar_1_docked");
|
||||
isFloating = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
_main_events();
|
||||
@@ -1,7 +1,7 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="./basic.css">
|
||||
<link rel="stylesheet" href="../lib/basic.css">
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
</head>
|
||||
@@ -9,11 +9,19 @@
|
||||
<overlay onclose="alert('hello');" id="overlay1">test</overlay>
|
||||
|
||||
<div class="header_bar_1">
|
||||
<div>test1</div><div>test2</div><div>test3</div>
|
||||
<div>
|
||||
test1
|
||||
</div>
|
||||
<div>
|
||||
test2
|
||||
</div>
|
||||
<div>
|
||||
<button class="profile"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header_bar_1_placeholder"></div>
|
||||
|
||||
<span>
|
||||
<content>
|
||||
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
|
||||
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
|
||||
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test
|
||||
@@ -22,16 +30,29 @@ test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
|
||||
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
|
||||
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
|
||||
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
|
||||
</span>
|
||||
</content>
|
||||
|
||||
|
||||
<script src="./basic.js"></script>
|
||||
<script src="../auth.js"></script>
|
||||
<script src="../lib/basic.js"></script>
|
||||
<script>
|
||||
|
||||
showOverlay("overlay1");
|
||||
|
||||
//setTimeout(() => hideOverlay("overlay1"), 3000);
|
||||
|
||||
async function main() {
|
||||
const couchDB = new CouchDB();
|
||||
await couchDB.set("login", {
|
||||
"username": "bla",
|
||||
"password": "bla"
|
||||
});
|
||||
|
||||
const data = await couchDB.get("login");
|
||||
console.log(JSON.stringify(data));
|
||||
//Gibt { "username": "bla", "password": "bla" } wieder
|
||||
}
|
||||
main();
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
@@ -0,0 +1,51 @@
|
||||
##How to import
|
||||
|
||||
<link rel="stylesheet" href="./lib/basic.css">
|
||||
<script src="./auth.js"></script>
|
||||
<script src="./lib/basic.js"></script>
|
||||
|
||||
##Overlays
|
||||
|
||||
[Erstelle ein element mit <overlay></overla> in html und vergebe eine id. Um das overlay anzuzeigen, rufe showOverlay mit der id auf]
|
||||
function showOverlay(string id);
|
||||
|
||||
[Schließe das overlay mit der id]
|
||||
function hideOverlay(string id);
|
||||
|
||||
##CouchDB
|
||||
|
||||
//Klasse zum Interagieren mit CouchDB
|
||||
//Erstelle eine neue CouchDB-Klasse mit new CouchDB();
|
||||
class CouchDB {
|
||||
[Überprüfe, ob CouchDB online ist. (Wird sowieso automatisch gemacht, wenn get, set oder createDB verwendet wird)]
|
||||
async checkOnlineStatus();
|
||||
|
||||
[Erstellt die Datenbank. (Wird auch automatisch gemacht, wenn man get oder set verwendet)]
|
||||
async createDB();
|
||||
|
||||
[Bekomme das Objekt, was in der Datenbank unter der id gespeichert wurde]
|
||||
async get(string id);
|
||||
[Setze ein Objekt, was in der Datenbank gespeichert wird (Bedenke: Du musst ein Objekt angeben, alles andere (string, array) wird nicht genommen)]
|
||||
async set(string id, object content, boolean replace = true);
|
||||
}
|
||||
|
||||
Hinweise:
|
||||
- Du brauchst eigentlich nur get oder set (weil alles andere automatisch gemacht wird)
|
||||
- Wenn CouchDB offline oder online geht, während das html file läuft, musst du manuell checkOnlineStatus() aufrufen, um den Status zu aktualisieren
|
||||
-> Oder einfach die Seite neuladen :/
|
||||
- Vergiss nicht auth.js einzubinden!!! sonst 💥
|
||||
|
||||
**Beispiel:**
|
||||
async function main() {
|
||||
const couchDB = new CouchDB();
|
||||
await couchDB.set("login", {
|
||||
"username": "bla",
|
||||
"password": "bla"
|
||||
});
|
||||
|
||||
const data = await couchDB.get("login");
|
||||
console.log(JSON.stringify(data));
|
||||
//Gibt { "username": "bla", "password": "bla" } wieder
|
||||
}
|
||||
main();
|
||||
|
||||
@@ -27,6 +27,22 @@ body, html {
|
||||
background-color: var(--accent_color_fg);
|
||||
color: black;
|
||||
}
|
||||
selectable {
|
||||
-webkit-user-select: text;
|
||||
-moz-user-select: text;
|
||||
-ms-user-select: text;
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
/* ----------- elements ----------- */
|
||||
|
||||
.profile {
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent_color_bg);
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* ----------- overlay ----------- */
|
||||
|
||||
@@ -75,6 +91,8 @@ overlay {
|
||||
background: var(--accent_color_bg);
|
||||
border-radius: var(--border-radius);
|
||||
border: none;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ----------- headerbar ----------- */
|
||||
@@ -89,7 +107,7 @@ overlay {
|
||||
backdrop-filter: blur(10px);
|
||||
padding: 15px;
|
||||
box-shadow: var(--def-shadow);
|
||||
height: 70px;
|
||||
height: 75px;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@@ -109,7 +127,7 @@ overlay {
|
||||
}
|
||||
|
||||
.header_bar_1_placeholder {
|
||||
height: 70px;
|
||||
height: 75px;
|
||||
}
|
||||
.header_bar_1_undocked {
|
||||
width: 96%;
|
||||
@@ -121,6 +139,12 @@ overlay {
|
||||
width: 100%;
|
||||
animation: header_bar_1_docked_ani 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
content {
|
||||
display: block;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
@keyframes header_bar_1_undocked_ani {
|
||||
from {
|
||||
width: 100%;
|
||||
+230
@@ -0,0 +1,230 @@
|
||||
const getId = (id) => document.getElementById(id);
|
||||
|
||||
function showOverlay(id) {
|
||||
const elm = getId(id);
|
||||
const overlay = document.createElement("div");
|
||||
overlay.classList.add("overlay");
|
||||
overlay.setAttribute("name", id);
|
||||
overlay.innerHTML = `
|
||||
<div onclick="_onOverlayDestroy(this.parentElement);"></div>
|
||||
<div>
|
||||
<button class="close" onclick="_onOverlayDestroy(this.parentElement.parentElement);">x</button>
|
||||
${elm.innerHTML}
|
||||
</div>
|
||||
`;
|
||||
document.body.appendChild(overlay);
|
||||
}
|
||||
function _onOverlayDestroy(elm) {
|
||||
const ori_elm = getId(elm.getAttribute("name"));
|
||||
if (ori_elm) {
|
||||
const cb = ori_elm.getAttribute("onclose");
|
||||
if (typeof(cb) == "string") {
|
||||
try { eval(cb); } catch(err) { console.error(err); }
|
||||
}
|
||||
}
|
||||
elm.remove();
|
||||
}
|
||||
function hideOverlay(id) {
|
||||
const elms = document.getElementsByName(id);
|
||||
for (var i of elms) _onOverlayDestroy(i);
|
||||
}
|
||||
|
||||
|
||||
function _main_events() {
|
||||
const header_bar_1 = document.querySelector(".header_bar_1");
|
||||
if (header_bar_1 != null) {
|
||||
let isFloating = false;
|
||||
window.addEventListener("load", function () {
|
||||
if (window.pageYOffset > 0) {
|
||||
header_bar_1.style.animationDuration = "0s";
|
||||
header_bar_1.classList.add("header_bar_1_undocked");
|
||||
isFloating = true;
|
||||
}
|
||||
});
|
||||
window.addEventListener("scroll", function() {
|
||||
if (window.pageYOffset > 0 && !isFloating) {
|
||||
header_bar_1.style.animationDuration = "0.5s";
|
||||
header_bar_1.classList.remove("header_bar_1_docked");
|
||||
header_bar_1.classList.add("header_bar_1_undocked");
|
||||
isFloating = true;
|
||||
} else if (window.pageYOffset === 0 && isFloating) {
|
||||
header_bar_1.style.animationDuration = "0.5s";
|
||||
header_bar_1.classList.remove("header_bar_1_undocked");
|
||||
header_bar_1.classList.add("header_bar_1_docked");
|
||||
isFloating = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
_main_events();
|
||||
|
||||
|
||||
|
||||
/* ----------- couch db ----------- */
|
||||
|
||||
//http://127.0.0.1:5984/_utils/#_config/couchdb@127.0.0.1
|
||||
class CouchDB {
|
||||
static _default_url = "http://127.0.0.1:5984/";
|
||||
|
||||
constructor() {
|
||||
this._does_auth_exists_err();
|
||||
this.request = new XMLHttpRequest();
|
||||
this.db_name = couchdb_name;
|
||||
this.is_online = 2;
|
||||
}
|
||||
|
||||
//private methods
|
||||
|
||||
_does_auth_exists() {
|
||||
return (
|
||||
typeof(couchdb_username) == "string" &&
|
||||
typeof(couchdb_password) == "string" &&
|
||||
typeof(couchdb_name) == "string"
|
||||
);
|
||||
}
|
||||
_does_auth_exists_err() {
|
||||
if (!this._does_auth_exists()) throw 'Keine Auth vorhanden. Digga, mach mal <script src="./auth.js"></script>';
|
||||
}
|
||||
_is_error_missing_database(errReason) {
|
||||
return errReason === "no_db_file" || errReason === "Database does not exist.";
|
||||
}
|
||||
_is_error_missing_data(errReason) {
|
||||
return errReason === "missing";
|
||||
}
|
||||
async _ping() {
|
||||
try {
|
||||
const response = await fetch(CouchDB._default_url, {
|
||||
method: "GET"
|
||||
});
|
||||
|
||||
return response.ok;
|
||||
} catch(err) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
_send_db_request(method, url, body = null, errorHandling = true) {
|
||||
return new Promise(async (resolve, reject) => {
|
||||
if (this.is_online == 2) {
|
||||
await this.checkOnlineStatus();
|
||||
}
|
||||
if (this.is_online != 1) {
|
||||
reject("CouchDB is not online!");
|
||||
return;
|
||||
}
|
||||
|
||||
const dburl = CouchDB._default_url + this.db_name + "/" + url;
|
||||
const request = this.request;
|
||||
|
||||
this.request.onreadystatechange = () => {
|
||||
if (request.readyState != 4) return;
|
||||
|
||||
try {
|
||||
if (request.status == 200 || request.status == 201) {
|
||||
var response = JSON.parse(request.responseText);
|
||||
resolve(response);
|
||||
}
|
||||
//errors
|
||||
else if (request.status == 404) {
|
||||
var json = JSON.parse(request.responseText);
|
||||
if (this._is_error_missing_data(json.reason)) {
|
||||
resolve(null);
|
||||
} else if (errorHandling && this._is_error_missing_database(json.reason)) {
|
||||
this.createDB().then((value) => {
|
||||
this._send_db_request(method, url, body, false).then((value) => {
|
||||
resolve(value);
|
||||
}).catch((err) => {
|
||||
reject(err);
|
||||
});
|
||||
}).catch((err) => {
|
||||
reject(err);
|
||||
});
|
||||
} else {
|
||||
reject(`Database not found: ${request.status} (Reason: ${reason.json})`);
|
||||
}
|
||||
} else {
|
||||
reject(`Unexpected status: ${request.status} (Response: ${
|
||||
request.responseText
|
||||
})`);
|
||||
}
|
||||
} catch(err) {
|
||||
reject("Unexpected error: " + err);
|
||||
}
|
||||
};
|
||||
|
||||
this.request.open(method, dburl, true);
|
||||
|
||||
this.request.setRequestHeader("Authorization", "Basic " + btoa(
|
||||
couchdb_username + ":" + couchdb_password
|
||||
));
|
||||
this.request.setRequestHeader("Content-type", "application/json");
|
||||
|
||||
this.request.send(body);
|
||||
});
|
||||
}
|
||||
async _get_db_data(id) {
|
||||
return await this._send_db_request("GET", id);
|
||||
}
|
||||
|
||||
//public methods
|
||||
|
||||
async checkOnlineStatus() {
|
||||
const res = await this._ping();
|
||||
|
||||
if (res === true) {
|
||||
this.is_online = 1;
|
||||
} else {
|
||||
this.is_online = 0;
|
||||
}
|
||||
|
||||
return res;
|
||||
}
|
||||
async createDB() {
|
||||
await this._send_db_request("PUT", "", null, false);
|
||||
}
|
||||
async get(id) {
|
||||
const res = await this._get_db_data(id);
|
||||
delete res["_id"];
|
||||
delete res["_rev"];
|
||||
return res;
|
||||
}
|
||||
async set(id, content, replace = true) {
|
||||
try {
|
||||
if (typeof (content) != "object") throw "basic.js - CouchDB->set: content is not from type object (type = " + typeof(content) + ")";
|
||||
|
||||
let existingDoc;
|
||||
try {
|
||||
existingDoc = await this._get_db_data(id);
|
||||
} catch (err) {
|
||||
existingDoc = null;
|
||||
}
|
||||
|
||||
if (existingDoc) {
|
||||
if (replace) {
|
||||
content = {
|
||||
...content,
|
||||
_id: existingDoc._id,
|
||||
_rev: existingDoc._rev
|
||||
};
|
||||
} else {
|
||||
content = {
|
||||
...existingDoc,
|
||||
...content,
|
||||
_rev: existingDoc._rev
|
||||
};
|
||||
}
|
||||
}
|
||||
const res = await this._send_db_request("PUT", id, JSON.stringify(content));
|
||||
return {
|
||||
"type": "success",
|
||||
"message": res
|
||||
};
|
||||
} catch(err) {
|
||||
console.error(err);
|
||||
return {
|
||||
"type": "error",
|
||||
"message": err
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user