TEAMOVI
/
Semantization_Interface


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
							<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initialscale=1.0">
  <title>IPERION-HS Semantic Data Integrator (task 5.4)</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>

  {% include 'main_header.html.j2' %}


  <form id="fileForm" method="POST" enctype = "multipart/form-data" style="margin: 2em;  border-style: groove;  padding: 2em;">
    <div>
      Upload a CSV file:
      <fieldset>
        <input type="file" id="FILE" name="FILE">
        <b>Data Map: </b>
        <select name="configs" id="configs" onChange="cambio()">
          {% for entry in configs: %}
            <option value={{entry}}>{{entry}}</option>
          {% endfor %}
        </select>
      </fieldset>
      <input id="submitted" type="submit" value="Activate Transformation" >
    </div>
    <div>
        <br/>... or manually enter the data of a record:<br/><br/>
      <fieldset id="fields">
        {# <legend>Record:</legend>
        {% for entry in data: %}
          <label>{{entry}}</label><br>
          <input type="text" id="{{entry}}" name="{{entry}}" placeholder="data"><br><br>
        {% endfor %} #}
      </fieldset>
    </div>
  </form>

  <script>
    const params = new URLSearchParams(window.location.search);
    const downloadName = params.get('downloadFile');
    if(downloadName){
      document.getElementById("fileForm").reset()
      $.get(params.get('downloadUrl'), { filename: downloadName })
        .done(
          data => {
            let link = document.createElement('a');
            link.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent(data);
            link.download = downloadName;
            link.click();
          }
        );
      alert("Transformation carried out successfully");
    }
    cambio();

    function cambio(){
      console.log("CAMBIO!");
      let fn = document.getElementById("configs").value;
      console.log(fn);
      $.get('/getdata/', { confFileName: fn })
        .done(
          data => {
            let fields = document.getElementById("fields");
            fields.innerHTML = "";
            let legend = document.createElement('legend');
            legend.appendChild(document.createTextNode('Record:'));
            fields.appendChild(legend);
            for(let field of data){
              console.log('field', field);
              let fieldLabel = document.createElement("label");
              fieldLabel.appendChild(document.createTextNode(field));
              fields.appendChild(fieldLabel);
              fields.appendChild(document.createElement('br'));
              let fieldInput = document.createElement('input')
              fieldInput.setAttribute('type', 'text');
              fieldInput.setAttribute('id', field);
              fieldInput.setAttribute('name', field);
              fieldInput.setAttribute('placeholder', 'data');
              fields.appendChild(fieldInput);
              fields.appendChild(document.createElement('br'));
              fields.appendChild(document.createElement('br'));
            }

          }
        );
      var p = $("<p>Paragraph 3</p>");
      // append the paragraph to the parent
      $("#parent").append(p);
    }
  </script>

</body>

</html>