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

Revisions

  1. WolvenSpirit created this gist Sep 8, 2019.
    137 changes: 137 additions & 0 deletions gen.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,137 @@
    /* --- 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)
    })
    }
    34 changes: 34 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,34 @@
    <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>