Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!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, 'inputs','output')" style="font-weight: bold;">Inputs</a></li>
- <li><a href="#" onclick="panel(this, 'output','inputs')">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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement