trimill.xyz/flaskr/templates/projects/tagpost/index.html

103 lines
4.0 KiB
HTML

{% set meta={"title": "Tagpost", "desc": "The next great social media platform"} %}
{% extends "/_base.html" %}
{% block head%}
<script>
const e_content = document.getElementById("content");
const e_tagname = document.getElementById("tagname");
const e_edittime = document.getElementById("edittime");
const e_introtext = document.getElementById("introtext");
const e_errortext = document.getElementById("errortext");
const e_charcount = document.getElementById("charcount");
e_content.addEventListener("input", contentInput);
async function contentInput() {
e_charcount.textContent = e_content.value.length;
}
async function go() {
const tag = document.getElementById("taginput").value;
try {
const data = await loadtag(tag);
window.tag = tag;
document.getElementById("tagname").textContent = tag;
if(data.found) {
document.getElementById("content").value = data.post.contents;
date = new Date(data.post.time)
document.getElementById("edittime").textContent = "Last modified " + (date.toLocaleString());
} else {
document.getElementById("content").value = "";
document.getElementById("edittime").textContent = "Never modified before";
}
document.getElementById("introtext").hidden = true;
document.getElementById("errortext").hidden = true;
document.getElementById("ui").hidden = false;
} catch(e) {
document.getElementById("errortext").textContent = "Error: " + e.toString();
document.getElementById("errortext").hidden = false;
document.getElementById("ui").hidden = true;
}
contentInput();
}
async function save() {
const data = document.getElementById("content").value;
let res;
try {
res = await savetag(window.tag, data);
} catch(e) {
document.getElementById("errortext").textContent = "Error: " + e.toString();
document.getElementById("errortext").hidden = false;
return;
}
if(res.ok) {
document.getElementById("errortext").hidden = true;
// TODO visual success
} else {
const text = await res.text();
document.getElementById("errortext").textContent = "Error: " + text;
document.getElementById("errortext").hidden = false;
}
}
async function loadtag(tag) {
if(typeof(tag) !== "string" || tag.match(/^[a-z]{4}$/) === null) {
throw "Invalid tag";
}
const url = "https://api.trimill.xyz/tagpost?tag=" + tag;
//const url = "https://localhost:12321/tagpost?tag=" + tag;
const res = await fetch(url);
return await res.json();
}
async function savetag(tag, data) {
if(typeof(tag) !== "string" || typeof(data) !== "string" || tag.match(/^[a-z]{4}$/) === null || data.length > 128) {
throw "Invalid tag or data";
}
const url = "https://api.trimill.xyz/tagpost?tag=" + tag;
//const url = "https://localhost:12321/tagpost?tag=" + tag;
return await fetch(url, {
method: "POST",
headers: {"Content-Type": "application/json"},
body: JSON.stringify({post: data})
});
}
</script>
{% endblock %}
{% block content %}
<span><input type="text" id="taginput" /> <input type="button" id="searchbutton" value="Go" onclick="go();" /></span>
<p id="errortext" style="color: #cc5c5c;" hidden>Error:</p>
<p id="introtext">Enter any lowercase four-letter word (or not word) above and click "Go".</p>
<div id="ui" hidden>
<span>&gt; <span id="tagname"></span></span>
<div>
<textarea id="content" rows=5 cols=30></textarea>
<span><span id="charcount">0</span>/128</span>
</div>
<div>
<input type="button" id="submit" value="Save" onclick="save();" />
</div>
<div>
<span id="edittime"></span>
</div>
</div>
{% endblock %}