Button to Display Map

Button labled Floor Map will display map of HackRU. Clicking on it will save the position in terms of x and y coordinates in the program and will allow the user to confirm.

Things to be fixed/added: Sometimes the Help me! button doesn't become more saturated but is still clickable after dealing with the map UI. Also, I cannot get the pin image to show up. Finally, the locations need to be stored somehow (array?) such that both x and y positions are relayed.

Author: lucentfong

.DS_Store

@@ -1,11 +1,2 @@
 <template name="floormap">
-  <div class="one column row">
-    <div class="column ui segment">
-      <a href="{{floorplan}}" >
-	<img style="width: 100%"
-	     src="{{floorplan}}">
-      </a>
-      <center><a href="{{floorplan}}" >floorplan</a></center>
-    </div>
-  </div>
 </template>

client/.DS_Store

@@ -1,5 +1,5 @@
 Template.floormap.helpers({
-  floorplan: function(){
+  /*floorplan: function(){
     return Meteor.settings.public.MISC+"/floorplan.jpg";
-  }
+  }*/
 })

client/components/.DS_Store

@@ -45,10 +45,24 @@
           {{#if unratedTicket}}
 
             {{#with unratedTicket }}
-              {{> ticketPanelRating }}
+   > ticketPanelRating }}
             {{/with}}
 
           {{else}}
+            <div class="map">
+              <input id="map"
+                type="image"
+                name ="location"
+                src= "{{floorplan}}"
+                class="btTxt submit"
+                >
+                <button id="map_cancel" class="primary push fluid button">
+                  Cancel
+                </button>
+                <button id="map_confirm" class="disabled primary push fluid button">
+                  Confirm
+                </button>
+            </div>
             <div class="title">
               <p>
                 <strong>
@@ -67,15 +81,11 @@
                      placeholder="{{constant 'TICKET_PANEL_TOPIC_PLACEHOLDER'}}">
               <br>
               {{constant 'TICKET_PANEL_LOCATION'}}
+              <button id="location" class="primary push fluid button">
+                {{constant 'TICKET_PANEL_FLOORMAP'}}
+              </button>
               <br>
-              <select id="location"
-                      name="location"
-                      class="clean">
-		{{#each rooms}}
-		<option value="{{name}}">{{name}}</option>
-		{{/each}}
-	      </select>
-              <br>
+
               {{constant 'TICKET_PANEL_CONTACT'}}
               <br>
               <input id="contact"

client/components/floormap/floormap.html

@@ -12,9 +12,6 @@ Template.ticketPanel.helpers({
       }
     })
   },
-  rooms: function(){
-    return Meteor.settings.public.rooms;
-  },
   statusIs: function(status){
     return this.status === status;
   },
@@ -69,14 +66,40 @@ Template.ticketPanel.helpers({
     }
 
     return moment(ticket.expiresAt).from(ReactiveNow.get());
-  }
+  },
+  floorplan: function(){
+    console.log("Call me maybe");
+    return Meteor.settings.public.MISC+"/floorplan.jpg";
+  },
 });
 
 Template.ticketPanel.rendered = function(){
   $(this.find('.ticketPanel')).addClass('animated bounceIn')
 };
 
 Template.ticketPanel.events({
+  'click #location': function(event){ //Displays Map UI
+      //$('#location').val("LOL"); //Temporary for Testing
+      document.getElementsByClassName('map')[0].style.display = 'block';
+  },
+  'click #map': function(){ //Pins user's click location
+      var $map_confirm = $('#map_confirm');
+      $('#location').val(event.clientX, event.clientY);
+      $map_confirm.removeClass('disabled');
+      createPin(event.clientX, event.clientY);
+      console.log("clientX: " + event.clientX + " - clientY: " + event.clientY);
+  },
+  'click #map_cancel': function(){ //Exit Map UI
+      $('#location').val(null);
+      document.getElementsByClassName('map')[0].style.display = 'none';
+      console.log("EXIT");
+  },
+  'click #map_confirm': function(){ //Confirm Location
+      if($('#location').val().length > 0){
+        document.getElementsByClassName('map')[0].style.display = 'none';
+        console.log("CONFIRM");
+      }
+  },
   'click #submit': function(){
     return createTicket();
   },
@@ -100,6 +123,17 @@ Template.ticketPanel.events({
   }
 });
 
+function createPin(x, y){
+  console.log("Pinned by a pin");
+  var nPin = document.createElement("pin");
+  nPin.setAttribute('src', "/public/assets/images/pin.png");
+  nPin.style.position = "absolute";
+  nPin.style.zIndex = 5;
+  nPin.style.left = x+'px';
+  nPin.style.top = y+'px';
+  document.body.appendChild(nPin);
+}
+
 function isValid(){
   return $('#topic').val().length > 0 &&
          $('#location').val().length > 0 &&

client/components/floormap/floormap.js

@@ -1,5 +1,20 @@
 .ticketPanel {
   text-align: center;
+  position: relative;
+  z-index: 100;
+  .map {
+    display: none;
+    position: absolute;
+    z-index: 2;
+    width: 200%;
+    margin-left: auto;
+    margin-right: auto;
+    text-align: center;
+  }
+  .cancel {
+    padding-bottom: 20px;
+    color: red;
+  }
   .title {
     font-size: 1.8em;
     line-height: 1.8em;