adds toggle to switch between showing the cost or time graph

opulo-inc · Nov 2, 2023 · 9c04e52 · 9c04e52
1 parent cfe8071
commit 9c04e52
Show file tree

Hide file tree

Showing 3 changed files with 151 additions and 8 deletions.
diff --git a/index.html b/index.html
@@ -28,6 +28,7 @@
 <body>
 
 
+
   <div id="output"></div>
     <div id="background-pane">
       <div id="menu">
@@ -38,6 +39,7 @@ <h1>LumenPnP - Pays For Itself</h1>
         <li>It takes about one minute to unload and load a board in the LumenPnP.</li>
         <li>The LumenPnP is running at 1000 CPH</li>
       </ul>
+
       <br >
       <div class="row">
         <div class="col-left">
@@ -54,22 +56,43 @@ <h3>Parts per Board</h3>
         </div>
       </div>
 
-    <br>
+
 
     <div id="button-wrapper">
       <button id="calculate-button">Calculate</button>
     </div>
 
-    <canvas style="height:0px;" id="myChart"></canvas>
+    <div class="row money-time">
+
+      <div class="slider-label">Time</div>
+
+      <label class="switch">
+        <input id="graph-type" type="checkbox">
+        <span class="slider round"></span>
+      </label>
+
+      <div class="slider-label">Money</div>
+
+    </div>
 
-    <div id="order"></div>
+    <div id="cost-graph" class="graph-result">
 
-    <canvas style="height:0px;" id="boardsChart"></canvas>
+      <canvas style="height:0px;" id="myChart"></canvas>
 
-    <div id="bph-result"></div>
+      <div id="order"></div>
 
     </div>
 
+    <div id="time-graph" class="graph-result">
+
+      <canvas style="height:0px;" id="boardsChart"></canvas>
+
+      <div id="bph-result"></div>
+
+    </div>
+
+
+
     </div>
 
     <a href="https://www.opulo.io/"><div id="info">

diff --git a/script.js b/script.js
@@ -3,6 +3,24 @@ document.getElementById ("calculate-button").addEventListener("click", calculate
 var activeChart;
 var boardsChart;
 
+document.getElementById("graph-type").onclick = function() {
+  if (this.checked) {
+    document.getElementById("cost-graph").style.display = "block";
+    document.getElementById("time-graph").style.display = "none";
+
+  }
+  else {
+    document.getElementById("cost-graph").style.display = "none";
+    document.getElementById("time-graph").style.display = "block";
+  }
+};
+
+// the first consideration is how much time it saves you from the tweezers, bottom up approach.
+
+//the other is a cost consideration from the outsourcers
+
+// i almost want a slider that lets you pick between time and money
+
 function destroy(lumenChart, boardsChart){
     if (typeof lumenChart !== 'undefined') {
         lumenChart.destroy();
@@ -302,7 +320,14 @@ function calculate(){
     document.getElementById("bph-result").innerHTML = "<p>A LumenPnP assembles boards</p><div class='flipped-point'>" + speed_factor.toFixed(1) + "x</div><p>faster than hand-placing.</p>";
     document.getElementById("bph-result").style.display = "inline-block";
 
-
+    if (document.getElementById("graph-type").checked){
+      document.getElementById("cost-graph").style.display = "block";
+      document.getElementById("time-graph").style.display = "none";
+    }
+    else {
+      document.getElementById("cost-graph").style.display = "none";
+      document.getElementById("time-graph").style.display = "block";
+    }
 
 }
 

diff --git a/style.css b/style.css
@@ -208,7 +208,7 @@ a:visited {
 }
 
 #button-wrapper {
-    margin-top:40px;
+    margin-top:60px;
 }
 
 #powered-result {
@@ -248,4 +248,99 @@ a:visited {
     margin:1%;
     float:right;
     text-align: center;
-}
+}
+
+/* The switch - the box around the slider */
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 60px;
+    height: 34px;
+  }
+
+  /* Hide default HTML checkbox */
+  .switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  /* The slider */
+  .slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #2196F3;
+    -webkit-transition: .4s;
+    transition: .4s;
+  }
+
+  .slider:before {
+    position: absolute;
+    content: "";
+    height: 26px;
+    width: 26px;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+    -webkit-transition: .4s;
+    transition: .4s;
+  }
+
+  input:checked + .slider {   
+    background-color: green;
+  }
+
+  input:focus + .slider {
+    box-shadow: 0 0 1px green;
+  }
+
+  input:checked + .slider:before {
+    -webkit-transform: translateX(26px);
+    -ms-transform: translateX(26px);
+    transform: translateX(26px);
+  }
+
+  /* Rounded sliders */
+  .slider.round {
+    border-radius: 34px;
+  }
+
+  .slider.round:before {
+    border-radius: 50%;
+  }
+
+  .slider-label {
+    display: inline-block;
+    margin:20px;
+    background-color: #eee;
+    width: 60px;
+    padding:10px;
+    border-radius: 5px;;
+  }
+
+  .money-time {
+    margin-top:20px;
+    vertical-align: middle;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+
+
+
+  /**/
+
+
+  #cost-graph {
+    display:none;
+
+  }
+
+  #time-graph {
+    display:block;
+  }