Skip to content

Instantly share code, notes, and snippets.

@WolvenSpirit

WolvenSpirit/gen.js

Created September 8, 2019 17:26
Show Gist options
  • Save WolvenSpirit/75ae7c3c0185f1c3c5e21d2c73c1db70 to your computer and use it in GitHub Desktop.
Save WolvenSpirit/75ae7c3c0185f1c3c5e21d2c73c1db70 to your computer and use it in GitHub Desktop.
Download ZIP
Generate html
Raw
gen.js
/* --- generate html from json ---
* ~ A lot of things are taken for granted here. ~
* - ajax has content-type hardcoded as json
* - div have bootstrap container class and schema section key as id
* - inputs have bootstrap form-control class
* - each content is a separate div container
* Limited custom behavior can be made by writing in custom
*/
var custom = ()=>{
document.getElementById("product").className="";
//console.log("nothing custom added")
};
var schema;
var root = document.getElementById("root");
var pageElements = new Object();
var send;
var inputData = new Object();
function load(dflt) {
if(dflt){Run()} else {root.innerHTML="";schema=JSON.parse(schema)}
var pages = Reflect.ownKeys(schema);
var d1; // schema
var d2; // login
pages.forEach(e=>{
d1 = e
var elements = Reflect.ownKeys(schema[d1])
elements.forEach(e=>{
d2 = e
var d3 = Reflect.ownKeys(schema[d1][d2])
d3.forEach(e=>{
pageElements[e] = schema[d1][d2][e];
})
container = document.createElement("div");
container.id=d2;
container.className = "container";
constructPage(container,pageElements);
root.appendChild(container);
pageElements = new Object();
})
})
custom()
}
function Run() {
root.innerHTML = `<div id="response" class="container"></div>`;
// mock a received schema as json
schema = "{\n \"schema\":{\n \"login\":{\n \"Login\":\"h3\",\n \"username\":\"input\",\n \"password\":\"input\",\n \"repeat_password\":\"input\",\n \"submit\":\"button\",\n \"http://localhost\":\"endpoint\" },\n \"content\":{\"some text\":\"p\", \"some text2\":\"p\", \"some text3 \":\"p\"} }\n }";
schema2 = `
{
"schema":{
"product":{
"Test article":"h3",
"https://picsum.photos/300/150":"image",
"some description":"p",
"99.99 Lei":"h3",
"Buy":"button"
}
}
}
`;
schema = JSON.parse(schema2);
}
function detectElement(c,key) {
switch(pageElements[key]){
case("input"):
c.innerHTML += `<input class="form-control" type='text' placeholder='${key.charAt(0).toUpperCase()}${key.slice(1)}' id='${key}'></br>`;
inputData[key] = ""; // prepare ajax form
break;
case("email"):
c.innerHTML += `<input class="form-control" type='email' placeholder='${key.charAt(0).toUpperCase()}${key.slice(1)}' id='${key}'></br>`;
inputData[key] = ""; // prepare ajax form
break;
case("password"):
c.innerHTML += `<input class="form-control" type='password' placeholder='${key.charAt(0).toUpperCase()}${key.slice(1)}' id='${key}'></br>`;
inputData[key] = ""; // prepare ajax form
break;
case("button"):
c.innerHTML += `<button class="form-control" type='text' id='${key}' onclick="send()">${key.charAt(0).toUpperCase()}${key.slice(1)}</button></br>`;
break;
case("endpoint"):
send = sendFn(key)
break
case("p"):
c.innerHTML += `<p>${key}</p>`;
break
case("span"):
c.innerHTML += `<span>${key}</span></br>`
break
case("h1"):
c.innerHTML += `<h1>${key}</h1>`
break
case("h2"):
c.innerHTML += `<h2>${key}</h2>`
break
case("h3"):
c.innerHTML += `<h3>${key}</h3>`
break
case("h4"):
c.innerHTML += `<h4>${key}</h4>`
break
case("h5"):
c.innerHTML += `<h5>${key}</h5>`
break
case("h6"):
c.innerHTML += `<h6>${key}</h6>`
break
case("image"):
c.innerHTML += `<img src=${key}/>`
break
}
}
function sendFn(url){
return ()=>{
ids = Reflect.ownKeys(inputData);
ids.forEach(e=>{
inputData[e]= document.getElementById(e).value;
});
var xhr = new XMLHttpRequest();
xhr.open("POST",url,true);
xhr.setRequestHeader("Content-Type","application/json")
xhr.onreadystatechange = ()=>{
if(xhr.readyState==4&&xhr.status==200){
console.log(xhr.responseText);
document.getElementById("response").innerHTML = xhr.responseText;
}
}
xhr.send(JSON.stringify(inputData));
}
}
function constructPage(c,pageElements) {
let keys = Reflect.ownKeys(pageElements);
keys.forEach(e=>{
detectElement(c,e)
})
}
Raw
index.html
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body onload="load(true)">
<div class="container">
<div class="row">
<div class="container col-sm p-5 shadow" id="root"></div>
<div class="col-sm">
<p>Write a valid json object the second depth will be used as a div which will have the key as id.</p>
<p>It's properties will define the content of the page.</p>
<textarea id="json">
{
"schema":{
"someForm":{
"Login":"h1",
"username":"input",
"email":"input",
"password":"input",
"repeat_password":"input",
"submit":"button",
"https://link":"endpoint"
}
}
}
</textarea>
<button onclick="javascript:schema=document.getElementById('json').value;load(false);">Load</button></div>
</div>
</div>
<script type="application/javascript" src="gen.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment