SHARE
TWEET

Untitled

a guest Oct 19th, 2019 98 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <!-- saved from url=(0070)http://cours.polymtl.ca/MDesmarais/log2420/20193/Tp/tp2-squelette.html -->
  3. <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  4. <title>Scénario d'élasticité prix</title>
  5.  
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <style>
  8. * {
  9.   box-sizing: border-box;
  10. }
  11.  
  12. body {
  13.   font-family: Arial, Helvetica, sans-serif;
  14. }
  15.  
  16. header {
  17.   position: relative;
  18.   float: top;
  19.   background-color: #666564;
  20.   height: 150px;
  21.   display: flex;
  22.   justify-content: center;
  23.   align-items: center;
  24.   color: white;
  25.   font-size: 28px;
  26. }
  27.  
  28. nav {
  29.   height: 300px;
  30.   width: 15%;
  31.   background-color: #CCCCCB;
  32.   position: relative;
  33.   float: left;
  34. }
  35.  
  36. nav ul {
  37.   list-style-type: none;
  38.   padding: 15px;
  39. }
  40.  
  41. footer {
  42.   background-color: #666564;
  43.   display: block;
  44.   height: 30px;
  45.   width: 100%;
  46.   position: relative;
  47.   float: left;
  48. }
  49.  
  50. .input-col1, .input-col2, .input-col3 {
  51.   float: left;
  52.   width: 33%;
  53.   padding: 10px;
  54.   display: flex;
  55.   flex-direction: column;
  56. }
  57.  
  58. #inputs {
  59.   display: block;
  60.   position: relative;
  61.   float: left;
  62.   width: 85%;
  63. }
  64.  
  65. #output {
  66.   margin: 1.5%;
  67.   border: 2px solid black;
  68.   max-width: 80%;
  69.   display: none;
  70.   position: relative;
  71.   float: left;
  72. }
  73.  
  74. img {
  75.   max-width: 100%;
  76. }
  77.  
  78. .input-field {
  79.   border: 2px solid black;
  80.   margin-top: 10px;
  81.   padding: 0px;
  82.   color: white;
  83.   text-align: center;
  84. }
  85.  
  86. .input-field select {
  87.   width: 100%;
  88.   height: 20px;
  89.   text-align-last: center;
  90.   background-color: rgb(235, 235, 235);
  91. }
  92.  
  93. .company {
  94. <!-- à compléter -->
  95. }
  96.  
  97. .alpha {
  98.   background-color: #7F140F;
  99. }
  100. .beta {
  101.   background-color: #F07D3C;
  102. }
  103. .gamma {
  104.   background-color: #FEC034;
  105. }
  106. .epsilon {
  107.   background-color: #12B0ED;
  108. }
  109. .mobile {
  110.   background-color: #00205D;
  111. }
  112. .iota {
  113.   background-color: #6D329B;
  114. }
  115. .theta {
  116.   background-color: #FD36CA;
  117. }
  118. .kappa {
  119.   background-color: black;
  120. }
  121.  
  122. @media (max-width: 600px) {
  123.   nav {
  124.     width: 100%;
  125.     height: 75px;
  126.     float: top;
  127.     display: flex;
  128.     align-items: center;
  129.   }
  130.   nav ul li {
  131.     position: relative;
  132.     float: left;
  133.     margin-right: 10px;
  134.   }
  135.  
  136.   header {
  137.     font-size: 20px;
  138.   }
  139. }
  140. </style>
  141.  
  142. <script>
  143.   panel = function(el, show, hide) {
  144.     document.getElementById(hide).style.display = "none";
  145.     document.getElementById(show).style.display = "block";
  146.   }
  147.   window.onload = function(){
  148.     /*
  149.     var selectElements = document.getElementsByTagName('select');
  150.     for(var i = 0; i < selectElements.length; i++){
  151.       selectElements[i].onchange = function(){
  152.         var outputImage = document.getElementById("output-image");
  153.         outputImage.src = "fig4.png";
  154.       }
  155.     }
  156.     */
  157.     fetch("http://localhost:8080/JSON/output.json")
  158.     .then(function(response){
  159.       return(response.json());
  160.     })
  161.     .then(function(jsonTableData){
  162.       var htmlString = "<table border=\"1\">\n";
  163.       // Make the header
  164.       var firstKeyIndex = Object.keys(jsonTableData)[0];
  165.       var firstRowIndex = Object.keys(jsonTableData[firstKeyIndex])[0];
  166.  
  167.       for(var i = 2; i >= 0; i--){
  168.         var titleList = null;
  169.         var titleListIndex = 0;
  170.         for(element in jsonTableData[firstKeyIndex][firstRowIndex]){
  171.           var titleArray = element.split('.');
  172.           if(titleArray.length != 2 && titleArray[i]){
  173.             var currentTitle = titleArray[i];
  174.             if(titleList == null){
  175.               titleList = [{title:currentTitle, columnSpan:1}];
  176.             }
  177.             else if(titleList[titleListIndex].title != currentTitle){
  178.               titleList.push({title:currentTitle, columnSpan:1});
  179.               titleListIndex++;
  180.             }
  181.             else{
  182.               titleList[titleListIndex].columnSpan++;
  183.             }
  184.           }
  185.         }
  186.         htmlString += "<tr>\n";
  187.         var extraSpace = 1;
  188.         if(i > 0){
  189.           extraSpace = 2;
  190.         }
  191.         htmlString += "<th colspan=\"" + extraSpace + "\"></th>\n";
  192.         for(var j = 0; j < titleList.length; j++){
  193.           htmlString += "<th colspan=\"" + titleList[j].columnSpan + "\">" + titleList[j].title + "</th>\n";
  194.         }
  195.         htmlString += "</tr>\n";
  196.       }
  197.       for(var key in jsonTableData){
  198.         htmlString += ("<tr><td>\t" + key + "</td></tr>\n");
  199.         for(var row in jsonTableData[key]){
  200.           htmlString += "<tr>";
  201.           for(var element in jsonTableData[key][row]){
  202.             var tableElement = "";
  203.             if(element.includes("Volume")){
  204.               htmlString += "<td></td>\n";
  205.             }
  206.             if(element.includes("Volume") || element.includes("Population")){
  207.               tableElement = String(jsonTableData[key][row][element] * 100.0) + "%";
  208.             }
  209.             else{
  210.               tableElement = String(jsonTableData[key][row][element]);
  211.             }
  212.             htmlString += "<td>" + tableElement + "</td>\n";
  213.           }
  214.           htmlString += "</tr>\n"
  215.         }
  216.         htmlString += "<tr><td style=\"color:white\">.</td></tr>";
  217.       }
  218.       htmlString += "</table>\n";
  219.       console.log(htmlString);
  220.       document.getElementById("output").innerHTML = htmlString;
  221.     });
  222.   }
  223. </script>
  224.  
  225. </head>
  226. <body>
  227.  
  228. <header>
  229.   <h2>Scénarios d'élasticité-prix</h2>
  230. </header>
  231.  
  232. <nav>
  233.   <ul>
  234.     <li><a href="#" onclick="panel(this, &#39;inputs&#39;,&#39;output&#39;)" style="font-weight: bold;">Inputs</a></li>
  235.     <li><a href="#" onclick="panel(this, &#39;output&#39;,&#39;inputs&#39;)">Output</a></li>
  236.   </ul>
  237. </nav>
  238.  
  239. <div id="inputs">
  240.   <div class="input-col1">
  241.     <div class="input-field alpha">
  242.       Price Shift alpha
  243.       <br>
  244.       <select>
  245.         <option value="0_percent">0%</option>
  246.         <option value="100_percent">100%</option>
  247.       </select>
  248.     </div>
  249.     <div class="input-field beta">
  250.         Price Shift Beta
  251.         <br>
  252.         <select>
  253.           <option value="0_percent">0%</option>
  254.           <option value="100_percent">100%</option>
  255.         </select>
  256.     </div>
  257.     <div class="input-field  gamma">
  258.         Price Shift Gamma
  259.         <br>
  260.         <select>
  261.           <option value="0_percent">0%</option>
  262.           <option value="100_percent">100%</option>
  263.         </select>
  264.     </div>
  265.     <div class="input-field epsilon">
  266.       Price Shift Epsilon
  267.       <br>
  268.       <select>
  269.         <option value="0_percent">0%</option>
  270.         <option value="100_percent">100%</option>
  271.       </select>
  272.     </div>
  273.     <div class="input-field mobile">
  274.         Price Shift Mobile
  275.         <br>
  276.         <select>
  277.             <option value="0_percent">0%</option>
  278.             <option value="100_percent">100%</option>
  279.         </select>
  280.     </div>
  281.     <div class="input-field iota">
  282.         Price Shift Iota
  283.         <br>
  284.         <select>
  285.           <option value="0_percent">0%</option>
  286.           <option value="100_percent">100%</option>
  287.         </select>
  288.     </div>
  289.     <div class="input-field theta">
  290.         Price Shift Theta
  291.         <br>
  292.         <select>
  293.           <option value="0_percent">0%</option>
  294.           <option value="100_percent">100%</option>
  295.         </select>
  296.     </div>
  297.     <div class="input-field kappa">
  298.         Price Shift Kappa
  299.         <br>
  300.         <select>
  301.           <option value="0_percent">0%</option>
  302.           <option value="100_percent">100%</option>
  303.         </select>
  304.     </div>
  305.   </div>
  306.   <div class="input-col2">
  307.       <div class="input-field alpha">
  308.         High Data Tariff (Alpha only)
  309.         <br>
  310.         <select>
  311.           <option value="10_gb">10GB</option>
  312.           <option value="20_gb">20GB</option>
  313.           <option value="30_gb">30GB</option>
  314.         </select>
  315.       </div>
  316.   </div>
  317.   <div class="input-col3">
  318.     <div class="input-field alpha">
  319.       Unlimited Tariff alpha
  320.       <br>
  321.       <select>
  322.           <option value="not_available">not available</option>
  323.           <option value="available_at_5">available at £5</option>
  324.       </select>
  325.     </div>
  326.     <div class="input-field beta">
  327.         Unlimited Tariff Beta
  328.         <br>
  329.         <select>
  330.           <option value="not_available">not available</option>
  331.           <option value="available_at_5">available at £5</option>
  332.         </select>
  333.     </div>
  334.     <div class="input-field  gamma">
  335.         Unlimited Tariff Gamma
  336.         <br>
  337.         <select>
  338.           <option value="not_available">not available</option>
  339.           <option value="available_at_5">available at £5</option>
  340.         </select>
  341.     </div>
  342.     <div class="input-field epsilon">
  343.       Unlimited Tariff Epsilon
  344.       <br>
  345.       <select>
  346.         <option value="not_available">not available</option>
  347.         <option value="available_at_5">available at £5</option>
  348.       </select>
  349.     </div>
  350.     <div class="input-field mobile">
  351.         Unlimited Tariff Mobile
  352.         <br>
  353.         <select>
  354.           <option value="not_available">not available</option>
  355.           <option value="available_at_5">available at £5</option>
  356.         </select>
  357.     </div>
  358.     <div class="input-field iota">
  359.         Unlimited Tariff Iota
  360.         <br>
  361.         <select>
  362.           <option value="not_available">not available</option>
  363.           <option value="available_at_5">available at £5</option>
  364.         </select>
  365.     </div>
  366.     <div class="input-field theta">
  367.         Unlimited Tariff Theta
  368.         <br>
  369.         <select>
  370.           <option value="not_available">not available</option>
  371.           <option value="available_at_5">available at £5</option>
  372.         </select>
  373.     </div>
  374.     <div class="input-field kappa">
  375.         Unlimited Tariff Kappa
  376.         <br>
  377.         <select>
  378.           <option value="not_available">not available</option>
  379.           <option value="available_at_5">available at £5</option>
  380.         </select>
  381.     </div>
  382.   </div>
  383. </div>
  384.  
  385. <div id="output">
  386.   <table>
  387.     <tr>
  388.       <td>
  389.  
  390.       </td>
  391.     </tr>
  392.   </table>
  393.   <img id="output-image" src="fig3.png">
  394. </div>
  395.  
  396. <footer>
  397. </footer>
  398.  
  399. </body>
  400. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top