-nc

geocam · Jun 9, 2011 · 56340a9 · 56340a9
1 parent efab662
commit 56340a9
Show file tree

Hide file tree

Showing 9 changed files with 293 additions and 68 deletions.
diff --git a/geocamCover/models.py b/geocamCover/models.py
@@ -20,3 +20,36 @@ def __unicode__(self):
 
     def get_struct(self):
         return {"name": self.name, "latitude": self.latitude, "longitude": self.longitude}
+
+
+class Task(models.Model):
+    place = models.ForeignKey(Place)
+    title = models.CharField(max_length=200, blank=True)
+    description = models.CharField(max_length=1000, blank=True)
+    priority = models.IntegerField(null=True)
+    created_at = models.DateTimeField(auto_now_add=True)
+    modified_at = models.DateTimeField(auto_now=True)
+    created_by = models.ForeignKey(User)
+
+    def __unicode__(self):
+        return self.name
+
+    def get_struct(self):
+        return {"place": self.place, "title": self.title, "description": self.description, "priority": self.priority}
+
+
+class Report(models.Model):
+    task = models.ForeignKey(Task)
+    title = models.CharField(max_length=200, blank=True)
+    status = models.CharField(max_length=200, blank=True)
+    notes = models.CharField(max_length=1000, blank=True)
+    percent_completed = models.IntegerField(null=True)
+    created_at = models.DateTimeField(auto_now_add=True)
+    modified_at = models.DateTimeField(auto_now=True)
+    created_by = models.ForeignKey(User)
+
+    def __unicode__(self):
+        return self.name
+
+    def get_struct(self):
+        return {"task": self.task, "title": self.title, "notes": self.notes, "status": self.status, "percent_completed": self.percent_completed}
diff --git a/geocamCover/static/geocamCover/app.js b/geocamCover/static/geocamCover/app.js
@@ -1,3 +1,27 @@
+function Task(){
+	this.title = "";
+	this.description = "";
+	this.priority = 0;
+}
+
+function Report(){
+	this.title = "";
+	this.status = "";
+	this.percent_completed = 0;
+	this.notes = "";
+	this.task = new Task();
+}
+
+function Place(){
+	this.name = "";
+	this.position = null;
+	this.report = new Report();
+	this.task = new Task();
+}
+
+var clicked_position;
+var selected_place;
+
 $(document).ready(function () {
 
     //MOFFETT FIELD COORDINATES
@@ -7,40 +31,94 @@ $(document).ready(function () {
                 'mapTypeId': google.maps.MapTypeId.ROADMAP,
                 'zoom': 12,
                 'callback': function () {
-                    $.getJSON('/geocamCover/hello.json', function(data) {
+                    $.getJSON('/geocamCover/places.json', function(data) {
                         $.each(data.places, function(key, val) {
-                            latlng = new google.maps.LatLng(val.latitude, val.longitude);
-                            $('#map_canvas').gmap('addMarker', {'position': latlng, 'title': val.name});
+							$.each(val, function(key, val){
+								if (key == "place"){
+									latlng = new google.maps.LatLng(val.latitude, val.longitude);
+									place = new Place();
+									place.position = latlng;
+									place.name = val.name;
+									addMarker(place);
+								}
+							})
                         })
                     });
-
-
                 }
             });
 
     //ADDING MARKERS WHEN THE USER CLICKS ON THE MAP
     $('#map_canvas').gmap({'callback':function(map) {
         $(map).click(function(event) {
-            $('div#forms').css("visibility", "visible");
-            $('input#name').focus();
-            var clicked_position = event.latLng;
+            $('#place-form').show();
+			$('#dim').show();
+            clicked_position = event.latLng;
+        });
+
+    }});
+
+
+	$("#place-form form").submit(function() {
+			place = new Place();
+			place.position = clicked_position;
+			place.name = $('#place-form #name').val();
+			addMarker(place);
+
+			var new_place = JSON.stringify({"latitude": clicked_position.lat(),
+						"longitude": clicked_position.lng(), "name": place.name });
+			$.post('/geocamCover/place/', new_place, function(data) {
+				// nothing yet
+			});
 
-            $("#marker_form").submit(function() {
+			$('#place-form .name').val("");
+			$('#place-form').hide();
+			$('#dim').hide();
+			return false;
+	 });
+
+	 jQuery("title").html("GeoCam Cover");
 
-                $("#map_canvas").gmap('addMarker', {'position':clicked_position, 'title': $('input#name').val()});
+});
 
-                var new_place = JSON.stringify({"latitude": clicked_position.lat(),
-                            "longitude": clicked_position.lng() ,
-                            "name": $('input#name').val() });
+function addMarker(place){
 
-                $.post('/geocamCover/place/', new_place, function(data) {
-                });
+	$("#map_canvas").gmap('addMarker', {
+				'position': place.position, 
+				'title': place.name
+	}).click(function(){
+		showLog(place);
+	});
+}
+
+
+function showLog(place){
+	$('#place-log .name').html(place.name);
+	$('#place-log').show();
+	$('#new-task').hide();
+	$('#new-report').hide();
+	selectedPlace = place;
+}
+
+
+function showNewTask(){
+	$("#new-task .name").html(selectedPlace.name);
+	$('#place-log').hide();
+	$('#new-task').show();
+}
+
+
+function showNewReport(){
+	$("#new-report .name").html(selectedPlace.name);
+	$('#place-log').hide();
+	$('#new-report').show();
+}
 
-                $('input#name').val("");
-                $('div#forms').css("visibility", "hidden");
-                return false;
-            });
-        })
-    }});
 
-});
+function showMap(){
+	$('#dim').hide();
+	$('#place-form').hide();
+	$('#place-log').hide();
+	$('#new-task').hide();
+	$('#new-report').hide();
+	return false;
+}
diff --git a/geocamCover/static/geocamCover/jquery.ui.map.min.js b/geocamCover/static/geocamCover/jquery.ui.map.min.js
diff --git a/geocamCover/static/geocamCover/layout.css b/geocamCover/static/geocamCover/layout.css
@@ -8,17 +8,48 @@ html, body {
     position: absolute;
     height: 100%;
     width: 100%;
-
-}
-
-.map_size {
-    width: 320px;
-    height: 480px;
 }
 
-div#forms {
+#place-form, .form{
     background: rgba(0, 0, 0, 0);
     position: absolute;
     z-index: 10;
-    visibility: hidden;
+	width: 100%;
+	height: 100%;
+    display: none;
 }
+
+.form{
+	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#EEE),color-stop(1,#DDD));
+}
+
+/*
+.form-buttons{
+	position:absolute;
+	bottom:0;
+	width:100%;
+}*/
+
+
+#place-form form{
+	position: absolute;
+	bottom: 0;
+	width: 100%;
+	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#EEE),color-stop(1,#DDD));
+	text-align: center;
+}
+
+#place-log{
+	height: 100%;
+}
+
+
+#dim{
+	display: none;
+	background: black;
+	opacity: .5;
+	position: absolute;
+	z-index: 1;
+	width: 100%;
+	height: 100%;
+}
diff --git a/geocamCover/temp.txt b/geocamCover/temp.txt
@@ -0,0 +1,3 @@
+
+
+
diff --git a/geocamCover/templates/geocamCover/index.html b/geocamCover/templates/geocamCover/index.html
@@ -1,25 +1,92 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
+	<meta name="viewport" content="height=device-height; width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
     <link rel="stylesheet" href="{{ MEDIA_URL }}geocamCover/layout.css"/>
-
+	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
 
     <script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
-{#    <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js" type="text/javascript"></script>#}
-    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>
+    <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js" type="text/javascript"></script>
+   <!-- <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>-->
     <script src="{{ MEDIA_URL }}geocamCover/jquery.ui.map.min.js" type="text/javascript"></script>
     <script src="{{ MEDIA_URL }}geocamCover/app.js" type="text/javascript"></script>
 </head>
 
 <body>
+<div data-role="page">
+<div data-role="content" style='padding:0px'>
+
+<div id="dim"></div>
 <div id="map_canvas"></div>
-<div id="forms" class="map_size">
-    <form id="marker_form">
-        <input id="name" type="text"/>
-        <input type="submit" value="Submit"/>
-    </form>
+
+<div id="place-form">
+	<form>
+		<h1>Do you want to add this as a place?</h1>
+		<input style='width:95%' id="name" type="text" placeholder="Place Name... (optional)"/>
+		<input type="submit" value="Add Place"/>
+		<input type="button" value="Back to Map" onclick="return showMap();"/>
+	</form>
+</div>
+
+<div class="form" id="place-log">
+	<div data-role="header"> 
+		<h1 class='name'></h1>
+	</div>
+	<div class='form-buttons'>
+		<input onclick="showNewTask();" type="submit" value="Add Task"/>
+		<input onclick="showNewReport();" type="submit" value="Add Report"/>	
+		<input type="submit" value="Back to Map" onclick="return showMap();"/>
+	</div>
+</div>
+
+<div class="form" id="new-task">
+	<form>
+		<div data-role="header"> 
+			<h1>Add Task to '<span class='name'></span>'</h1>
+		</div>
+		<input type='text' class='title' placeholder='Task Title...'/>
+		<div>
+			<input type="range" name="points" min="1" max="5" value="3"/>
+		</div>
+		<textarea placeholder='Description...'></textarea>
+		<div class='form-buttons'>
+			<input onclick="return false;" type="submit" value="Submit Task"/>	
+			<input type="button" value="Back to Logs" onclick="return showLog(selectedPlace);"/>
+			<input type="submit" value="Back to Map" onclick="return showMap();"/>
+		</div>
+	</form>
 </div>
+
+<div class="form" id="new-report">
+	<form>
+		<div data-role="header"> 
+			<h1>Add Report to '<span class='name'></span>'</h1>
+		</div>
+		<input type='text' class='title' placeholder='Report Title...'/>
+		<select>
+			<option disabled>Status</option>
+			<option>Temp 1</option>
+			<option>Temp 2</option>
+			<option>Temp 3</option>
+		</select>
+		<div>
+			<input type="range" name="points" min="0" max="100" value="0"/>
+		</div>
+		<textarea placeholder='Notes...'></textarea>
+		<div class='form-buttons'>
+			<input onclick="return false;" type="submit" value="Submit Report"/>
+			<input type="button" value="Back to Logs" onclick="return showLog(selectedPlace);"/>
+			<input type="submit" value="Back to Map" onclick="return showMap();"/>
+		</div>
+	</form>
+</div>
+
+
+
+
+</div><!-- /content -->
+</div><!-- /header -->
+</div><!-- /page -->
 </body>
 </html>