Browse Source

events with jquery

Jean-Baptiste (Rorist) Aubort 5 years ago
parent
commit
beac5c4d3d
3 changed files with 49 additions and 38 deletions
  1. 30 12
      main.js
  2. 2 1
      style.css
  3. 17 25
      trigger.html

+ 30 - 12
main.js

@@ -23,7 +23,7 @@ function displayError(err) {
 function checkHours() {
     var hoursForm = $('#hours');
     var hoursOpen = Math.floor(hoursForm.val());
-    var openButton = $('#openbutton');
+    var openButton = $('#btn-open');
     if (isNaN(hoursOpen) || hoursOpen < 1) {
         openButton.attr('disabled', 'disabled');
     } else {
@@ -85,14 +85,6 @@ function launchAutoRefresh() {
   }, 300);
 }
 
-function onPageLoad() {
-    "use strict";
-    launchAutoRefresh();
-    updateSpaceInformation();
-    setInterval(updateSpaceInformation, 60 * 1000);
-}
-
-
 function openSpace(extend) {
     "use strict";
     var hoursOpen = document.hoursform.hours.value;
@@ -154,7 +146,7 @@ function update_date(date) {
 function switchTheLight(red, green, blue) {
     $.ajax(url_led, {
         type: 'POST',
-        data: {red: red, green: green, blue: blue, breathe: slider.value.substring(0, -3)},
+        data: {red: red, green: green, blue: blue, breathe: slider.val().substring(0, -3)},
     });
 }
 
@@ -165,7 +157,7 @@ function changeBreathSpeed(){
 function setTheBreathSpeed() {
     $.ajax(url_led, {
         type: 'POST',
-        data: {breathe: slider.value.substring(0, -3)},
+        data: {breathe: slider.val().substring(0, -3)},
     });
 }
 
@@ -216,6 +208,32 @@ var Police = {
 };
 
 $(document).ready(function(){
-    onPageLoad();
+    "use strict";
+    // Leds buttons
+    $('#btn-red').click(function(){ switchTheLightColor('red'); });
+    $('#btn-green').click(function(){ switchTheLightColor('green'); });
+    $('#btn-blue').click(function(){ switchTheLightColor('blue'); });
+    $('#btn-white').click(function(){ switchTheLightOn() ; });
+    $('#btn-off').click(function(){ switchTheLightOff(); });
+    $('#btn-police').click(function(){ switchTheLightToPolice(); });
+    $('#breathSlider').change(function(){ changeBreathSpeed(); });
+    $('#breathSlider').mouseup(function(){ setTheBreathSpeed(); });
+
+    // Open/Close buttons
+    $('#btn-minus').click(function(){ changeHour(0); });
+    $('#btn-plus').click(function(){ changeHour(1); });
+    $('#btn-open').click(function(){ openSpace(); });
+    $('#btn-extend').click(function(){ openSpace(1); });
+    $('#btn-close').click(function(){ closeSpace(); });
+    $('#hours').keyup(function(){ checkHours(); });
+
+    // Set up trigger
+    launchAutoRefresh();
+    updateSpaceInformation();
+    setInterval(updateSpaceInformation, 60 * 1000);
+
+    // Egging
+    var konami = new Konami();
+    konami.load("https://www.youtube.com/watch?v=1Wytn-_MSBo");
 });
 

+ 2 - 1
style.css

@@ -93,7 +93,7 @@ all the button
     margin: 5px 5px 0 0;
 }
 
-.btn-open {
+#btn-open {
     display: block;
     margin-top: 20px;
 }
@@ -162,3 +162,4 @@ all the button
     text-align: center;
     padding: 0px;
 }
+

+ 17 - 25
trigger.html

@@ -18,20 +18,18 @@
         <div id="msg-block" class="lead"></div>
         <div id="open-block">
             <form name="hoursform" id="hoursform">
-                <span id="btn-plus" class="glyphicon glyphicon-minus-sign" onclick="changeHour(0)"></span>
-                <input id="hours" name="hours" size="2" class="form-control input-lg text-input" maxlength="2"
-                    onkeyup="checkHours(this)" value="1">
-                <span class="glyphicon glyphicon-plus-sign" onclick="changeHour(1)"></span>
-                <input type="button" onclick="openSpace()" value="Open"
-                    class="btn btn-default btn-lg btn-open" id="openbutton" disabled>
+                <span id="btn-minus" class="glyphicon glyphicon-minus-sign"></span>
+                <input id="hours" name="hours" size="2"
+                    class="form-control input-lg text-input" maxlength="2" value="1">
+                <span id="btn-plus" class="glyphicon glyphicon-plus-sign"></span>
+                <input type="button" value="Open"
+                    class="btn btn-default btn-lg" id="btn-open" disabled>
             </form>
         </div>
         <div id="close-block">
             <form>
-                <input type="button" onclick="closeSpace()" value="Close"
-                    class="btn btn-default">
-                <input type="button" onclick="openSpace(true)" value="Extend"
-                    class="btn btn-default">
+                <input type="button" value="Close" class="btn btn-default" id="btn-close">
+                <input type="button" value="Extend" class="btn btn-default" id="btn-extend">
                 <br>
                 <p>The space is still open for:</p>
                 <div class="numbers">
@@ -49,28 +47,22 @@
 
     <div class="col-md-6">
         <h2>LED Lights</h2>
-        <input class="btn btn-lg btn-danger btn-red" type="button" onclick="switchTheLightColor('red')" value="RED">
-        <input class="btn btn-lg btn-success" type="button" onclick="switchTheLightColor('green')" value="GREEN">
-        <input class="btn btn-lg btn-primary" type="button" onclick="switchTheLightColor('blue')" value="BLUE">
-        <input class="btn btn-lg btn-default" type="button" onclick="switchTheLightOn()" value="WHITE">
-        <input class="btn btn-lg btn-default" type="button" onclick="switchTheLightOff()" value="OFF">
-        <input class="btn btn-lg btn-warning" type="button" onclick="switchTheLightToPolice()" value="Police!">
+        <input id="btn-red" class="btn btn-lg btn-danger btn-red" type="button" value="RED">
+        <input id="btn-green" class="btn btn-lg btn-success" type="button" value="GREEN">
+        <input id="btn-blue" class="btn btn-lg btn-primary" type="button" value="BLUE">
+        <input id="btn-white" class="btn btn-lg btn-default" type="button" value="WHITE">
+        <input id="btn-off" class="btn btn-lg btn-default" type="button" value="OFF">
+        <input id="btn-police" class="btn btn-lg btn-warning" type="button" value="Police!">
         <br/>
         <div id="breathBox">
             <h3 for="breathSlider">Breathing leds:</h3>
-            <input type="range" value=0 min=0 max=5000 step=10
-                onchange="changeBreathSpeed()" onmouseup="setTheBreathSpeed()"
-                id="breathSlider">
+            <input type="range" value=0 min=0 max=5000 step=10 id="breathSlider">
             <span id="breathValue">0 ms</span>
         </div>
     </div>
 </div>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
-<script type="text/javascript" src="main.js"></script>
-<script type="text/javascript" src="https://konami-js.googlecode.com/svn/trunk/konami.js"></script>
-<script type="text/javascript">
-konami = new Konami()
-konami.load("https://www.youtube.com/watch?v=1Wytn-_MSBo");
-</script>
+<script src="https://konami-js.googlecode.com/svn/trunk/konami.js"></script>
+<script src="main.js"></script>
 </body></html>