89 lines
2.4 KiB
HTML
89 lines
2.4 KiB
HTML
<html>
|
|
<header>
|
|
<meta charset="UTF-8">
|
|
<script>
|
|
function who(form) {
|
|
var items = {}
|
|
for (var i=0; i<form.length; i++) {
|
|
if (form[i].name)
|
|
items[form[i].name] = form[i].value
|
|
}
|
|
console.log(items)
|
|
return false;
|
|
}
|
|
|
|
function draw(one) {
|
|
var id = one.id
|
|
var meta = one.meta
|
|
var know = one.know
|
|
var html = "<div>\n"
|
|
html += '<h2>' + id + '</h2>\n'
|
|
html += '<ul>\n'
|
|
for(var k in meta) {
|
|
html += '<li>'
|
|
html += k + ': '
|
|
var lines = meta[k].split("\n")
|
|
if (lines.length == 1) {
|
|
html += lines[0]
|
|
} else {
|
|
html += "<ul>"
|
|
lines.forEach(function(e) {
|
|
html += "<li>" + e + "</li>"
|
|
})
|
|
html += "</ul>"
|
|
}
|
|
html += '</li>\n'
|
|
}
|
|
html += '</ul>\n'
|
|
html += '<h3>Knows</h3>\n'
|
|
html += '<ul>\n'
|
|
for(var k of know) {
|
|
html += '<li>\n'
|
|
var action = '\'who([{name: "id", value: "' + k.id + '"}])\''
|
|
html += "<a href='#' onclick=" + action + ">"
|
|
html += k.id + ", <i>" + k.relation + " </i>"
|
|
html += "</a>"
|
|
html += '</li>\n'
|
|
}
|
|
html += '</ul>\n'
|
|
html += "</div>\n"
|
|
document.getElementById("display").innerHTML += html
|
|
}
|
|
|
|
function draw_clear() {
|
|
document.getElementById("display").innerHTML = ""
|
|
}
|
|
</script>
|
|
</header>
|
|
<body>
|
|
<h1>Goodbye World</h1>
|
|
<form onsubmit="who(this); return false;">
|
|
<input name="id" type="text"/>
|
|
<input type="submit"/>
|
|
</form>
|
|
<div id="display">
|
|
</div>
|
|
</body>
|
|
<footer>
|
|
<script>
|
|
draw({
|
|
id: "id",
|
|
meta: {
|
|
"20200710": "hello",
|
|
"20200711": "world\n!",
|
|
},
|
|
know: [
|
|
{
|
|
id: "id0",
|
|
relation: ":)",
|
|
},
|
|
{
|
|
id: "id1",
|
|
relation: ":(",
|
|
},
|
|
]
|
|
})
|
|
</script>
|
|
</footer>
|
|
</html>
|