Untitled

<!DOCTYPE html>
<!-- saved from url=(0070)http://cours.polymtl.ca/MDesmarais/log2420/20193/Tp/tp2-squelette.html -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Scénario d'élasticité prix</title>

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

header {
  position: relative;
  float: top;
  background-color: #666564;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 28px;
}

nav {
  height: 300px;
  width: 15%;
  background-color: #CCCCCB;
  position: relative;
  float: left;
}

nav ul {
  list-style-type: none;
  padding: 15px;
}

footer {
  background-color: #666564;
  display: block;
  height: 30px;
  width: 100%;
  position: relative;
  float: left;
}

.input-col1, .input-col2, .input-col3 {
  float: left;
  width: 33%;
  padding: 10px;
  display: flex;
  flex-direction: column;
}

#inputs {
  display: block;
  position: relative;
  float: left;
  width: 85%;
}

#output {
  margin: 1.5%;
  border: 2px solid black;
  max-width: 80%;
  display: none;
  position: relative;
  float: left;
}

img {
  max-width: 100%;
}

.input-field {
  border: 2px solid black;
  margin-top: 10px;
  padding: 0px;
  color: white;
  text-align: center;
}

.input-field select {
  width: 100%;
  height: 20px;
  text-align-last: center;
  background-color: rgb(235, 235, 235);
}

.company {
<!-- à compléter -->
}

.alpha {
  background-color: #7F140F;
}
.beta {
  background-color: #F07D3C;
}
.gamma {
  background-color: #FEC034;
}
.epsilon {
  background-color: #12B0ED;
}
.mobile {
  background-color: #00205D;
}
.iota {
  background-color: #6D329B;
}
.theta {
  background-color: #FD36CA;
}
.kappa {
  background-color: black;
}

@media (max-width: 600px) {
  nav {
    width: 100%;
    height: 75px;
    float: top;
    display: flex;
    align-items: center;
  }
  nav ul li {
    position: relative;
    float: left;
    margin-right: 10px;
  }

  header {
    font-size: 20px;
  }
}
</style>

<script>
  panel = function(el, show, hide) {
    document.getElementById(hide).style.display = "none";
    document.getElementById(show).style.display = "block";
  }
  window.onload = function(){
    /*
    var selectElements = document.getElementsByTagName('select');
    for(var i = 0; i < selectElements.length; i++){
      selectElements[i].onchange = function(){
        var outputImage = document.getElementById("output-image");
        outputImage.src = "fig4.png";
      }
    }
    */
    fetch("http://localhost:8080/JSON/output.json")
    .then(function(response){
      return(response.json());
    })
    .then(function(jsonTableData){
      var htmlString = "<table border=\"1\">\n";
      // Make the header
      var firstKeyIndex = Object.keys(jsonTableData)[0];
      var firstRowIndex = Object.keys(jsonTableData[firstKeyIndex])[0];

      for(var i = 2; i >= 0; i--){
        var titleList = null;
        var titleListIndex = 0;
        for(element in jsonTableData[firstKeyIndex][firstRowIndex]){
          var titleArray = element.split('.');
          if(titleArray.length != 2 && titleArray[i]){
            var currentTitle = titleArray[i];
            if(titleList == null){
              titleList = [{title:currentTitle, columnSpan:1}];
            }
            else if(titleList[titleListIndex].title != currentTitle){
              titleList.push({title:currentTitle, columnSpan:1});
              titleListIndex++;
            }
            else{
              titleList[titleListIndex].columnSpan++;
            }
          }
        }
        htmlString += "<tr>\n";
        var extraSpace = 1;
        if(i > 0){
          extraSpace = 2;
        }
        htmlString += "<th colspan=\"" + extraSpace + "\"></th>\n";
        for(var j = 0; j < titleList.length; j++){
          htmlString += "<th colspan=\"" + titleList[j].columnSpan + "\">" + titleList[j].title + "</th>\n";
        }
        htmlString += "</tr>\n";
      }
      for(var key in jsonTableData){
        htmlString += ("<tr><td>\t" + key + "</td></tr>\n");
        for(var row in jsonTableData[key]){
          htmlString += "<tr>";
          for(var element in jsonTableData[key][row]){
            var tableElement = "";
            if(element.includes("Volume")){
              htmlString += "<td></td>\n";
            }
            if(element.includes("Volume") || element.includes("Population")){
              tableElement = String(jsonTableData[key][row][element] * 100.0) + "%";
            }
            else{
              tableElement = String(jsonTableData[key][row][element]);
            }
            htmlString += "<td>" + tableElement + "</td>\n";
          }
          htmlString += "</tr>\n"
        }
        htmlString += "<tr><td style=\"color:white\">.</td></tr>";
      }
      htmlString += "</table>\n";
      console.log(htmlString);
      document.getElementById("output").innerHTML = htmlString;
    });
  }
</script>

</head>
<body>

<header>
  <h2>Scénarios d'élasticité-prix</h2>
</header>

<nav>
  <ul>
    <li><a href="#" onclick="panel(this, &#39;inputs&#39;,&#39;output&#39;)" style="font-weight: bold;">Inputs</a></li>
    <li><a href="#" onclick="panel(this, &#39;output&#39;,&#39;inputs&#39;)">Output</a></li>
  </ul>
</nav>

<div id="inputs">
  <div class="input-col1">
    <div class="input-field alpha">
      Price Shift alpha
      <br>
      <select>
        <option value="0_percent">0%</option>
        <option value="100_percent">100%</option>
      </select>
    </div>
    <div class="input-field beta">
        Price Shift Beta
        <br>
        <select>
          <option value="0_percent">0%</option>
          <option value="100_percent">100%</option>
        </select>
    </div>
    <div class="input-field  gamma">
        Price Shift Gamma
        <br>
        <select>
          <option value="0_percent">0%</option>
          <option value="100_percent">100%</option>
        </select>
    </div>
    <div class="input-field epsilon">
      Price Shift Epsilon
      <br>
      <select>
        <option value="0_percent">0%</option>
        <option value="100_percent">100%</option>
      </select>
    </div>
    <div class="input-field mobile">
        Price Shift Mobile
        <br>
        <select>
            <option value="0_percent">0%</option>
            <option value="100_percent">100%</option>
        </select>
    </div>
    <div class="input-field iota">
        Price Shift Iota
        <br>
        <select>
          <option value="0_percent">0%</option>
          <option value="100_percent">100%</option>
        </select>
    </div>
    <div class="input-field theta">
        Price Shift Theta
        <br>
        <select>
          <option value="0_percent">0%</option>
          <option value="100_percent">100%</option>
        </select>
    </div>
    <div class="input-field kappa">
        Price Shift Kappa
        <br>
        <select>
          <option value="0_percent">0%</option>
          <option value="100_percent">100%</option>
        </select>
    </div>
  </div>
  <div class="input-col2">
      <div class="input-field alpha">
        High Data Tariff (Alpha only)
        <br>
        <select>
          <option value="10_gb">10GB</option>
          <option value="20_gb">20GB</option>
          <option value="30_gb">30GB</option>
        </select>
      </div>
  </div>
  <div class="input-col3">
    <div class="input-field alpha">
      Unlimited Tariff alpha
      <br>
      <select>
          <option value="not_available">not available</option>
          <option value="available_at_5">available at £5</option>
      </select>
    </div>
    <div class="input-field beta">
        Unlimited Tariff Beta
        <br>
        <select>
          <option value="not_available">not available</option>
          <option value="available_at_5">available at £5</option>
        </select>
    </div>
    <div class="input-field  gamma">
        Unlimited Tariff Gamma
        <br>
        <select>
          <option value="not_available">not available</option>
          <option value="available_at_5">available at £5</option>
        </select>
    </div>
    <div class="input-field epsilon">
      Unlimited Tariff Epsilon
      <br>
      <select>
        <option value="not_available">not available</option>
        <option value="available_at_5">available at £5</option>
      </select>
    </div>
    <div class="input-field mobile">
        Unlimited Tariff Mobile
        <br>
        <select>
          <option value="not_available">not available</option>
          <option value="available_at_5">available at £5</option>
        </select>
    </div>
    <div class="input-field iota">
        Unlimited Tariff Iota
        <br>
        <select>
          <option value="not_available">not available</option>
          <option value="available_at_5">available at £5</option>
        </select>
    </div>
    <div class="input-field theta">
        Unlimited Tariff Theta
        <br>
        <select>
          <option value="not_available">not available</option>
          <option value="available_at_5">available at £5</option>
        </select>
    </div>
    <div class="input-field kappa">
        Unlimited Tariff Kappa
        <br>
        <select>
          <option value="not_available">not available</option>
          <option value="available_at_5">available at £5</option>
        </select>
    </div>
  </div>
</div>

<div id="output">
  <table>
    <tr>
      <td>

      </td>
    </tr>
  </table>
  <img id="output-image" src="fig3.png">
</div>

<footer>
</footer>

</body>
</html>