split up index.html in 3 blocks

10 years ago · a90c35451f
2 changed files with 78 additions and 55 deletions
--- a/web/index.html
+++ b/web/index.html
@ -8,44 +8,34 @@
    <meta http-equiv="pragma" content="no-cache" />
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <link href="/web/style.css" rel="stylesheet" type="text/css">
-    <title>meshed up</title>
+    <title>meshenger</title>
  </head>
  <body>
-    <div id="header">
-      <h2>Meshenger</h2>
-    </div>
-
+  <div id="message-page">
+    <button id="message-back">Back</button>
    <form id="message-form" action="" accept-charset="utf-8">
      <textarea id="name" rows="1" placeholder="Your Name"></textarea>
      <textarea id="message" rows="2"  placeholder="Your Message"></textarea>
-      
-      
-     
      <!-- removed photo button from here, otherwise triggers sending (empty) messages... TO FIX-->
-       
      <input type="submit" class="send-button" value="Send">
    </form>
+  </div>

- <button id="pop" class="photo-buttons" onclick="document.getElementById('photoEdit').style.display='block';">Add Photo</button>
-
-
-<div id="photoEdit" class="photoBox">
+  <div id="photo-page" class="photoBox">
+    <button id="photo-back">Back</button>
    <input id="fileInput" accept="image/*" capture="camera" type="file">
    <br>
    <p>
-      <span id="progress">--</span> 
+      <span id="progress">--</span>
      <span id="total">--</span>
    </p>
-  
+
    <!--Squashed source<br>-->
    <img id="sourceImage" src="" alt="capture" height="400" width="400">
-  
    <!--Offset done<br>-->
    <canvas id="canvas1" width="400" height="400"></canvas>
-    
    <!--Dithered<br>-->
    <canvas id="canvas2" width="400" height="400"></canvas>
-    
    <!--Rotated<br>-->
    <canvas id="canvas3" width="400" height="400"></canvas>
    <br>
@ -53,19 +43,24 @@
    <button id="rotLeft">Rotate left</button>
    <button id="rotRight">Rotate right</button>

-    <button id="submitPhoto" class="photo-buttons"  onclick="submitImage();document.getElementById('photoEdit').style.display='none';">submit</button>
-
-
-    <button id="submitPhoto" class="photo-buttons"  onclick="document.getElementById('photoEdit').style.display='none';">cancel</button>
+    <button id="submit-photo" class="photo-buttons">submit</button>
+    <button id="cancel-photo" class="photo-buttons">cancel</button>

  </div>

-
+  <div id="overview-page">
    <div class="messages">
      <ul id="inbox"></ul>

      <ul id="outbox"></ul>
    </div>
-    <script src="/web/main.js"></script>
+    <div>
+      <button id="new-photo">Picture</button>
+      <button id="new-message">Message</button>
+    </div>
+
+  </div>
+
+  <script src="/web/main.js"></script>
  </body>
 </html>
--- a/web/main.js
+++ b/web/main.js
@ -4,6 +4,65 @@ localStorage.clear();
 //These need to be obtained from the node
 var ownId, ownColor, ownAlias;

+/*
+ * INIT
+ */
+
+document.addEventListener('DOMContentLoaded', function(){
+
+  function update(){
+    if ( !ownId ){
+      getOwnId();
+    }
+    if ( !ownAlias){
+   getOwnAlias();
+    }
+    checkInbox();
+    // also check for outbox items on interval,
+    // necessary in case connection is lost and messages are not yet sent
+    checkOutbox();
+  }
+
+  //update everything to initialize
+  updateInboxView();
+  updateOutboxView();
+  update();
+
+  //check for new messages every 7 seconds
+  window.setInterval( update, 7000 );
+
+  addButtonListeners();
+});
+
+/*
+ * STATE CHANGES
+ */
+
+function addButtonListeners(){
+  document.getElementById('new-photo').onclick = onNewPhoto;
+  document.getElementById('new-message').onclick = onNewMessage;
+  document.getElementById('message-back').onclick = onBack;
+  document.getElementById('photo-back').onclick = onBack;
+}
+
+function onNewPhoto(){
+  document.getElementById('photo-page').style.display = "block";
+  document.getElementById('overview-page').style.display = "none";
+  document.getElementById('message-page').style.display = "none";
+}
+
+function onNewMessage(){
+  document.getElementById('photo-page').style.display = "none";
+  document.getElementById('overview-page').style.display = "none";
+  document.getElementById('message-page').style.display = "block";
+}
+
+function onBack(){
+  document.getElementById('photo-page').style.display = "none";
+  document.getElementById('overview-page').style.display = "block";
+  document.getElementById('message-page').style.display = "none";
+}
+
 /*
 * OUTBOX STUFF
 */
@ -296,10 +355,6 @@ document.addEventListener('DOMContentLoaded', function(){
    initCanvas(context2);
    initCanvas(context3);

- 
-
-
-
    fileInput.onchange = onFileInputChange;

    document.getElementById('rotLeft').onclick = onRotateLeft;
@ -501,30 +556,3 @@ function monochrome(imageData, threshold, type){

  return imageData;
 }
-
-
-
-/*
- * INIT
- */
-
-function update(){
-  if ( !ownId ){
-    getOwnId();
-  }
-  if ( !ownAlias){
- getOwnAlias();
-  }
-  checkInbox();
-  // also check for outbox items on interval,
-  // necessary in case connection is lost and messages are not yet sent
-  checkOutbox();
-}
-
-//update everything to initialize
-updateInboxView();
-updateOutboxView();
-update();
-
-//check for new messages every 7 seconds
-window.setInterval( update, 7000 );