Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

bogus merge 2

  • Loading branch information...
commit 80ee8c281d59a68050a8dd5537dde6abd167a0ea 2 parents 0b04256 + 053b9c7
@pmelzer pmelzer authored
View
BIN  geocamCover/static/images/priority1.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  geocamCover/static/images/priority2.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  geocamCover/static/images/priority3.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  geocamCover/static/images/statusGreen.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  geocamCover/static/images/statusRed.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  geocamCover/static/images/statusYellow.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  geocamCover/static/images/whiteBox.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
502 geocamCover/static/javascripts/app.js
@@ -18,7 +18,7 @@ function LogItem() {
function Task() {
this.description = "";
this.priority = 0;
- this.completed = false;
+ this.completed = false;
}
Task.prototype = new LogItem();
@@ -31,6 +31,7 @@ function Report() {
}
Report.prototype = new LogItem();
+/* Global Variables */
var places = [];
var clickedPosition;
var selectedPlace;
@@ -46,35 +47,42 @@ var views = ["Task View", "Report View"];
var requestView = 0;
var reportView = 1;
var isTapHold = false;
+var isiPad = false;
+var tapHoldTimeout;
+var backIsMap = false;
$(window).resize(function() {
pageResize();
});
function endZoom() {
- zoom = false;
+ zoom = false;
+ isTapHold = false;
}
$(document).ready(function () {
- jQuery("title").html("GeoCam Cover");
- initiateGeolocation();
- //setInterval("refreshGps()", 5000);
- selectedView = requestView;
- populateCategories();
+
+ isiPad = navigator.userAgent.match(/iPad/i) != null;
+
+ jQuery("title").html("GeoCam Cover");
+ initiateGeolocation();
+ //setInterval("refreshGps()", 5000);
+ selectedView = requestView;
+ populateCategories();
//INITIAL COORDINATES - MOFFETT FIELD
var latlng = new google.maps.LatLng(37.41288, -122.052934);
-
+
$('#map_canvas').gmap({
'center': latlng,
'mapTypeId': google.maps.MapTypeId.ROADMAP,
'zoom': 12,
'callback': function (map) {
- globalMap = map;
+ globalMap = map;
$.getJSON('/geocamCover/places.json', function(data) {
- markerCluster = new MarkerClusterer($('#map_canvas').gmap('getMap'), $('#map_canvas').gmap('getMarkers'));
-
- $.each(data.places, function(key, val) {
+ markerCluster = new MarkerClusterer($('#map_canvas').gmap('getMap'), $('#map_canvas').gmap('getMarkers'));
+
+ $.each(data.places, function(key, val) {
var place = new Place();
latlng = new google.maps.LatLng(val.place.latitude, val.place.longitude);
place.id = val.place.id;
@@ -104,20 +112,25 @@ $(document).ready(function () {
report.notes = r.notes;
report.status = r.status;
report.modified_at = new Date(r.modified_at);
- report.modified_at_str = r.modified_at;
- report.task_id = r.task_id;
- if (report.task_id && report.percentCompleted == 100)
- place.tasks[report.task_id].completed = true;
+ report.modified_at_str = r.modified_at;
+ report.task_id = r.task_id;
+ if (report.task_id && report.percentCompleted == 100)
+ place.tasks[report.task_id].completed = true;
place.reports[report.id] = report;
}
places[place.id] = place;
addMarker(place);
});
- });
+ });
}
});
-
+
+ // This is to go back to the map when the back button is pressed.
+ window.onpopstate = function(event) {
+ showMap();
+ }
+
pageResize();
$('#map_canvas').gmap({'callback':function(map) {
@@ -144,83 +157,99 @@ $(document).ready(function () {
isTapHold = false;
});
- google.maps.event.addListener(globalMap, 'dragend', function() {
- setTimeout("endZoom()", 1000);
+ $('#map_canvas').mouseup(function(){
+ clearTimeout(tapHoldTimeout);
});
-
- $("#address-form-form").submit(function(e) {
- createPlaceFromAddress();
- return false;
+
+ google.maps.event.addListener(globalMap, 'zoom_changed', function() {
+ zoom = true;
+ isTapHold = false;
+ setTimeout("endZoom()", 1000);
+ });
+
+ google.maps.event.addListener(globalMap, 'drag', function() {
+ zoom = true;
+ isTapHold = false;
+ });
+
+ google.maps.event.addListener(globalMap, 'dragend', function() {
+ setTimeout("endZoom()", 1000);
+ });
+
+ $("#address-form-form").submit(function(e) {
+ createPlaceFromAddress();
+ return false;
});
$("#place-form-form").submit(function() {
- createPlace();
+ createPlace();
return false;
});
$("#edit-place-page-form").submit(function() {
- updatePlace();
+ updatePlace();
return false;
});
$("#tasks-page form").submit(function() {
- createTask();
+ createTask();
return false;
});
$("#reports-page form").submit(function() {
- createReport();
- return false;
+ createReport();
+ return false;
});
});
function createPlaceFromAddress() {
- $('#map_canvas').gmap('search', { 'address': $('#address-name').val() }, function(isFound,results) {
- if (isFound) {
- $('#map_canvas').gmap('getMap').panTo(results[0].geometry.location);
- var place = new Place();
- place.position = results[0].geometry.location;
- savePlace(place, 'address');
- } else {
- alert("not found"); //Need another way to display to the user that the address wasn't found
- }
- });
+ $('#map_canvas').gmap('search', { 'address': $('#address-name').val() }, function(isFound, results) {
+ if (isFound) {
+ $('#map_canvas').gmap('getMap').panTo(results[0].geometry.location);
+ var place = new Place();
+ place.position = results[0].geometry.location;
+ savePlace(place, 'address');
+ } else {
+ alert("not found"); //Need another way to display to the user that the address wasn't found
+ }
+ });
}
function createPlace(form) {
- var place = new Place();
- place.position = clickedPosition;
- savePlace(place, 'place');
+ var place = new Place();
+ place.position = clickedPosition;
+ savePlace(place, 'place');
}
function updatePlace() {
- markerCluster.removeMarker(selectedPlace.marker);
- savePlace(selectedPlace, 'edit-place');
+ markerCluster.removeMarker(selectedPlace.marker);
+ savePlace(selectedPlace, 'edit-place');
}
function savePlace(place, which) {
- place.category = $('#' + which + '-categories-select').val();
+ place.category = $('#' + which + '-categories-select').val();
place.name = $('#' + which + '-name').val();
- addPlace(place);
+ addPlace(place);
$('#' + which + '-name').val("");
$('#' + which + '-categories-select').val("0");
$('#' + which + '-categories-select').parent().find('.ui-btn-text').html("Select Category");
- hideForm(which);
+
}
function addPlace(place) {
- var new_place = JSON.stringify({"place_id": place.id, "latitude": place.position.lat(),
- "longitude": place.position.lng(), "name": place.name, "category": place.category });
- $.post('/geocamCover/place/', new_place, function(data) {
- place.id = data;
- places[place.id] = place;
- addMarker(place);
- showLog(place.id);
- });
+ var new_place = JSON.stringify({"place_id": place.id, "latitude": place.position.lat(),
+ "longitude": place.position.lng(), "name": place.name, "category": place.category });
+ $.post('/geocamCover/place/', new_place, function(data) {
+ place.id = data;
+ places[place.id] = place;
+ addMarker(place);
+ showLog(place.id);
+ pageResize();
+ });
}
function createTask() {
- task = new Task();
+ task = new Task();
task.id = taskId;
task.description = $('#tasks-page .description').val();
task.priority = $('#tasks-page .priority').val();
@@ -230,12 +259,12 @@ function createTask() {
"description": task.description, "priority": task.priority });
$.post('/geocamCover/task/', newTask, function(data) {
- createLogItemCallback("task", data);
+ createLogItemCallback("task", data);
});
}
function createReport() {
- report = new Report();
+ report = new Report();
report.id = reportId;
report.title = $('#reports-page .title').val();
report.status = $('#reports-page .status').val();
@@ -250,20 +279,20 @@ function createReport() {
"notes": report.notes, "task_id": report.task_id});
$.post('/geocamCover/report/', newReport, function(data) {
- createLogItemCallback("report", data);
+ createLogItemCallback("report", data);
});
}
function createLogItemCallback(which, data) {
- eval("var logItem = " + which + ";");
+ eval("var logItem = " + which + ";");
var temp_array = data.split(",");
logItem.id = temp_array[0];
logItem.modified_at = new Date(temp_array[1]);
logItem.modified_at_str = temp_array[1];
eval("places[logItem.place_id]." + which + "s[logItem.id] = logItem;");
- places[logItem.place_id].marker.setVisible(false);
- markerCluster.removeMarker(places[logItem.place_id].marker);
- addMarker(places[logItem.place_id]);
+ places[logItem.place_id].marker.setVisible(false);
+ markerCluster.removeMarker(places[logItem.place_id].marker);
+ addMarker(places[logItem.place_id]);
showLog(logItem.place_id);
}
@@ -276,98 +305,98 @@ function populateCategories() {
}
function deletePlace() {
- if (confirm("Delete place '" + selectedPlace.name + "'?"))
- deleteItemAjax("Place", JSON.stringify({"type": "Place", "id": selectedPlace.id}));
+ if (confirm("Delete place '" + selectedPlace.name + "'?"))
+ deleteItemAjax("Place", JSON.stringify({"type": "Place", "id": selectedPlace.id}));
}
function deleteTask() {
- if (confirm("Delete task '" + selectedPlace.tasks[taskId].title + "'?"))
- deleteItemAjax("Task", JSON.stringify({"type": "Task", "id": taskId}));
+ if (confirm("Delete task '" + selectedPlace.tasks[taskId].title + "'?"))
+ deleteItemAjax("Task", JSON.stringify({"type": "Task", "id": taskId}));
}
function deleteReport() {
- if (confirm("Delete report '" + selectedPlace.reports[reportId].title + "'?"))
- deleteItemAjax("Report", JSON.stringify({"type": "Report", "id": reportId}));
+ if (confirm("Delete report '" + selectedPlace.reports[reportId].title + "'?"))
+ deleteItemAjax("Report", JSON.stringify({"type": "Report", "id": reportId}));
}
function deleteItemAjax(itemType, data) {
- $.ajax({url: '/geocamCover/delete_item/',
- data: data,
- type: "DELETE",
- success: function(data) {
- eval("delete" + itemType + "Success();");
- }
- });
+ $.ajax({url: '/geocamCover/delete_item/',
+ data: data,
+ type: "DELETE",
+ success: function(data) {
+ eval("delete" + itemType + "Success();");
+ }
+ });
}
function deletePlaceSuccess() {
- markerCluster.removeMarker(selectedPlace.marker);
- delete places[selectedPlace.id];
- showMap();
+ markerCluster.removeMarker(selectedPlace.marker);
+ delete places[selectedPlace.id];
+ showMap();
}
function deleteReportSuccess() {
- delete places[selectedPlace.id].reports[reportId];
- showLog(selectedPlace.id);
+ delete places[selectedPlace.id].reports[reportId];
+ showLog(selectedPlace.id);
}
function deleteTaskSuccess() {
- delete places[selectedPlace.id].tasks[taskId];
- showLog(selectedPlace.id);
+ delete places[selectedPlace.id].tasks[taskId];
+ showLog(selectedPlace.id);
}
-function placeIcon(place){
- var icon;
- if (selectedView == requestView) {
- var priorityToDisplay = 0;
- for (var t_id in place.tasks) {
- if (!place.tasks[t_id].completed && place.tasks[t_id].priority > priorityToDisplay)
- priorityToDisplay = place.tasks[t_id].priority;
- }
- if (priorityToDisplay == 0)
- icon = "whiteBox";
- else
- icon = "priority" + priorityToDisplay;
- } else if (selectedView == reportView) {
- var reportToDisplay = null;
- var mostRecent = new Date();
- mostRecent.setYear(1900);
- for (var r_id in place.reports) {
- if (place.reports[r_id].modified_at > mostRecent){
- mostRecent = place.reports[r_id].modified_at;
- reportToDisplay = place.reports[r_id];
- }
- }
- if (reportToDisplay) {
- switch(parseInt(reportToDisplay.status)) {
- case 0:
- case 1:
- icon = "statusRed";
- break;
- case 2:
- case 3:
- case 4:
- icon = "statusYellow";
- break;
- case 5:
- case 6:
- icon = "statusGreen";
- break;
- default:
- icon = "whiteBox";
- }
- } else {
- icon = "whiteBox";
- }
- }
- return icon;
+function placeIcon(place) {
+ var icon;
+ if (selectedView == requestView) {
+ var priorityToDisplay = 0;
+ for (var t_id in place.tasks) {
+ if (!place.tasks[t_id].completed && place.tasks[t_id].priority > priorityToDisplay)
+ priorityToDisplay = place.tasks[t_id].priority;
+ }
+ if (priorityToDisplay == 0)
+ icon = "whiteBox";
+ else
+ icon = "priority" + priorityToDisplay;
+ } else if (selectedView == reportView) {
+ var reportToDisplay = null;
+ var mostRecent = new Date();
+ mostRecent.setYear(1900);
+ for (var r_id in place.reports) {
+ if (place.reports[r_id].modified_at > mostRecent) {
+ mostRecent = place.reports[r_id].modified_at;
+ reportToDisplay = place.reports[r_id];
+ }
+ }
+ if (reportToDisplay) {
+ switch (parseInt(reportToDisplay.status)) {
+ case 0:
+ case 1:
+ icon = "statusRed";
+ break;
+ case 2:
+ case 3:
+ case 4:
+ icon = "statusYellow";
+ break;
+ case 5:
+ case 6:
+ icon = "statusGreen";
+ break;
+ default:
+ icon = "whiteBox";
+ }
+ } else {
+ icon = "whiteBox";
+ }
+ }
+ return icon;
}
function addMarker(place) {
$("#map_canvas").gmap('addMarker', {
'position': place.position,
'title': place.name,
- 'icon': "/static/images/" + placeIcon(place) + ".png"
+ 'icon': "/static/images/" + placeIcon(place) + ".png"
}, function(map, marker) {
place_marker = marker;
});
@@ -375,7 +404,7 @@ function addMarker(place) {
showLog(place.id);
});
places[place.id].marker = place_marker;
- markerCluster.addMarker(place_marker);
+ markerCluster.addMarker(place_marker);
}
function showLog(place_id) {
@@ -383,8 +412,7 @@ function showLog(place_id) {
selectedPlace = place;
var noTasksAndReports = true;
var logList = new Array();
- $('#logs-page h1').html(place.name.length == 0 ? 'Unnamed Place' : place.name);
- $('#logs-page a, #logs-page li').removeClass("ui-btn-active");
+ $('#place-name-h1').html(place.name.length == 0 ? 'Unnamed Place' : place.name);
$('#logs').empty();
for (var t in place.tasks)
@@ -400,10 +428,10 @@ function showLog(place_id) {
for (var log_id in logList) {
if (logList[log_id] instanceof Task) {
task = logList[log_id];
- $('#logs').append("<li><a href='#' onclick='showEditTask(" + task.id + ");'> Task: " + task.description + " (" + task.modified_at_str + ")</a></li>");
+ $('#logs').append("<li onclick='showEditTask(" + task.id + ");'> Task: " + task.description + " (" + task.modified_at_str + ")</li>");
} else {
report = logList[log_id];
- $('#logs').append("<li><a href='#' onclick='showEditReport(" + report.id + ");'> Report: " + report.title + " (" + report.modified_at_str + ")</a></li>");
+ $('#logs').append("<li onclick='showEditReport(" + report.id + ");'> Report: " + report.title + " (" + report.modified_at_str + ")</li>");
}
noTasksAndReports = false;
}
@@ -413,26 +441,45 @@ function showLog(place_id) {
try {
$('#logs').listview("refresh");
- } catch(e) {}
+ } catch(e) {
+ }
+ showPage("#logs-page");
+}
- document.location.href = "/geocamCover/#logs-page";
+function showPage(page) {
+ // Add GeoCam to History IF not already in history.
+ if (!backIsMap && page != "#map-page") {
+ backIsMap = true;
+ history.pushState(null, "Map", "http://localhost:8000");
+ }
+ $(".mobile-page").hide();
+ $(page).show();
+}
+
+function showMap() {
+ // Remove GeoCam from History
+ if (backIsMap) {
+ backIsMap = false;
+ // HACKY AS HELL. LOLOLOLOLOLOLOLOL.
+ history.go(-1);
+ }
+ // Push history.
+ showPage("#map-page");
+ pageResize();
}
function showEditPlace() {
- $('#edit-place-page a').removeClass("ui-btn-active");
$("#edit-place-page h1 .name").html(selectedPlace.name.length == 0 ? "Unnamed Place" : selectedPlace.name);
$("#edit-place-name").val(selectedPlace.name);
$("#edit-place-categories-select").val(selectedPlace.category);
- $("#edit-place-categories-select").parent().find(".ui-btn-text").html($("#edit-place-categories-select option:selected").text());
- document.location.href = "/geocamCover/#edit-place-page";
+ showPage("#edit-place-page");
}
function showNewTask() {
taskId = null;
$("#tasks-page .description").val("");
- $("#tasks-page .priority").val("");
- $("#tasks-page .select-priority .ui-btn-text").html($("#tasks-page .priority option:first").text());
- showNewLogItem('task');
+ $("#tasks-page .priority").val(3);
+ showNewLogItem('task');
}
function showNewReport() {
@@ -442,26 +489,22 @@ function showNewReport() {
$("#reports-page .notes").val("");
populateTasksForReport(null);
$("#reports-page .status").val(4);
- $("#reports-page .select-status .ui-btn-text").html($("#reports-page .status option:nth-child(5)").text());
- showNewLogItem('report');
+ showNewLogItem('report');
}
function showNewLogItem(which) {
- $('#' + which + 's-page a, #' + which + 's-page li').removeClass("ui-btn-active");
- $('#' + which + 's-page h1').html('New ' + which + ' for ' + (selectedPlace.name.length == 0 ? "Unnamed Place" : selectedPlace.name));
+ $('#' + which + '-name-h1').html('New ' + which + ' for ' + (selectedPlace.name.length == 0 ? "Unnamed Place" : selectedPlace.name));
$('#' + which + 's-page .submit-button').val("Submit " + which);
- $('#' + which + 's-page .submit-div .ui-btn-text').html("Submit " + which);
$('#' + which + 's-page .delete-button').hide();
- document.location.href = "/geocamCover/#" + which + "s-page";
+ showPage("#" + which + "s-page");
}
function showEditTask(task_id) {
var task = selectedPlace.tasks[task_id];
taskId = task.id;
$("#tasks-page .priority").val(task.priority);
- $("#tasks-page .select-priority .ui-btn-text").html($("#tasks-page .priority option:selected").text());
$("#tasks-page .description").val(task.description);
- showEditLogItem('task');
+ showEditLogItem('task');
}
function showEditReport(report_id) {
@@ -469,34 +512,17 @@ function showEditReport(report_id) {
reportId = report.id;
$("#reports-page .title").val(report.title);
$("#reports-page .status").val(report.status);
- $("#reports-page .select-status .ui-btn-text").html($("#reports-page .status option:selected").text());
$("#reports-page .percent-completed").val(report.percentCompleted);
$("#reports-page .notes").val(report.notes);
populateTasksForReport(report.task_id);
- showEditLogItem('report');
+ showEditLogItem('report');
}
function showEditLogItem(which) {
- $('#' + which + 's-page a, #' + which + 's-page li').removeClass("ui-btn-active");
- $('#' + which + 's-page h1').html("Edit " + which);
- $('#' + which + 's-page .submit-div .ui-btn-text').html('Update ' + which);
+ $('#' + which + '-name-h1').html("Edit " + which);
$('#' + which + 's-page .submit-button').val('Update ' + which);
$('#' + which + 's-page .delete-button').show();
- document.location.href = '/geocamCover/#' + which + 's-page';
-}
-
-function showForm(which) {
- $('#footer').hide();
- $('#' + which + '-form').show();
- $('#' + which + '-categories-select').parent().find('.ui-btn-text').html("Select Category");
- $('#dim').show();
-}
-
-function hideForm(which) {
- $('#dim').hide();
- $('#' + which + '-form').hide();
- $('#footer').show();
- pageResize();
+ showPage('#' + which + 's-page');
}
function populateTasksForReport(selectedId) {
@@ -514,85 +540,101 @@ function populateTasksForReport(selectedId) {
}
$("#reports-page .task").append('<option value="' + task_id + '"' + selected + '>' + selectedPlace.tasks[task_id].description + '</option>');
}
- $("#reports-page .select-task .ui-btn-text").html(spanText);
}
function switchViews() {
- jQuery("#switch-view-button .ui-btn-text").html(views[selectedView]);
- switch (selectedView) {
- case (requestView): selectedView = reportView;
- break;
- case (reportView): selectedView = requestView;
- break;
- }
- for (var p_id in places) {
- places[p_id].marker.setVisible(false);
- markerCluster.removeMarker(places[p_id].marker);
- addMarker(places[p_id]);
- }
- jQuery(".ui-btn-active").removeClass("ui-btn-active");
- return false;
+ $("#switch-view-button").val(views[selectedView]);
+ switch (selectedView) {
+ case (requestView):
+ selectedView = reportView;
+ break;
+ case (reportView):
+ selectedView = requestView;
+ break;
+ }
+ for (var p_id in places) {
+ places[p_id].marker.setVisible(false);
+ markerCluster.removeMarker(places[p_id].marker);
+ addMarker(places[p_id]);
+ }
+ return false;
}
-function showMap() {
- document.location.href = "/geocamCover/#map-page";
- pageResize();
+function pageResize() {
+ var page_height = $(window).height() - $("#map-header").height() - $("#footer").height() - 4;
+ if (isiPad)
+ {
+ page_height -= 78;
+ $('body,html').height(page_height);
+
+ }
+
+
+ $('#map_canvas, #dim').height(page_height);
}
-function pageResize() {
- $('#map_canvas, #place-form, #address-form, #dim').height($(window).height() - 43);
-}
-
-function initiateGeolocation() {
- navigator.geolocation.getCurrentPosition(handleGeolocationQuery, handleErrors);
-}
-
-function handleErrors(error) {
- gpsDenied = true;
- switch(error.code) {
- case error.PERMISSION_DENIED: alert("user did not share geolocation data");
- break;
- case error.POSITION_UNAVAILABLE: alert("could not detect current position");
- break;
- case error.TIMEOUT: alert("retrieving position timed out");
- break;
- default: alert("unknown error");
- break;
- }
-}
+function initiateGeolocation() {
+ navigator.geolocation.getCurrentPosition(handleGeolocationQuery, handleErrors);
+}
+
+function handleErrors(error) {
+ gpsDenied = true;
+ switch (error.code) {
+ case error.PERMISSION_DENIED:
+ alert("user did not share geolocation data");
+ break;
+ case error.POSITION_UNAVAILABLE:
+ alert("could not detect current position");
+ break;
+ case error.TIMEOUT:
+ alert("retrieving position timed out");
+ break;
+ default:
+ alert("unknown error");
+ break;
+ }
+}
function handleGeolocationQuery(position) {
- var firstCall = true;
-
- if (myMarker) {
- if (markerCluster)
- markerCluster.removeMarker(myMarker);
- myMarker.setVisible(false);
- }
-
+ var firstCall = true;
+
+ if (myMarker) {
+ if (markerCluster)
+ markerCluster.removeMarker(myMarker);
+ myMarker.setVisible(false);
+ }
+
var myLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
$("#map_canvas").gmap('addMarker', {
'position': myLocation,
'title': "You are here",
- 'icon': "/static/images/youAreHere.png"
+ 'icon': "/static/images/youAreHere.png"
}, function(map, marker) {
myMarker = marker;
- });
+ });
- if (markerCluster)
- markerCluster.addMarker(myMarker);
-
- if (firstCall) {
- firstCall = false;
- $('#map_canvas').gmap({
- 'center': myLocation
- });
+ if (markerCluster)
+ markerCluster.addMarker(myMarker);
+
+ if (firstCall) {
+ firstCall = false;
+ $('#map_canvas').gmap({
+ 'center': myLocation
+ });
+ }
+}
+
+function loadFusionData(id) {
+ if (!id) {
+ id = 1003379;
}
+ $('#map_canvas').gmap('loadFusion', id);
+ showMap();
}
function refreshGps() {
- if (gpsDenied)
- return;
- initiateGeolocation();
+ if (gpsDenied)
+ return;
+ initiateGeolocation();
}
View
255 geocamCover/static/stylesheets/layout.css
@@ -1,42 +1,259 @@
html, body {
- background: lightblue;
+ background: #EEEEEE;
padding: 0;
margin: 0;
}
+.mobile-page {
+ display: none;
+}
+
+#map-page {
+ display: block;
+}
+
#map_canvas {
- position: absolute;
- height: 100%;
+ position: relative;
width: 100%;
}
#place-form, #address-form {
- position: absolute;
+ position: relative;
+ /*bottom: 0px;*/
z-index: 10;
- width: 100%;
- height: 100%;
+ width: 100%;
display: none;
}
#place-form form, #address-form form {
- position: absolute;
- bottom: 0px;
- width: 100%;
- background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#EEE),color-stop(1,#DDD));
+ position: relative;
+ /*bottom: 0px;*/
+ width: 100%;
+ /*
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #EEE), color-stop(1, #DDD));
+ */
text-align: center;
+ padding-bottom: 15px;
}
#dim {
- display: none;
- background: black;
- opacity: .5;
- position: absolute;
- z-index: 1;
- width: 100%;
- height: 100%;
+ display: none;
+ background: black;
+ opacity: .5;
+ position: absolute;
+ z-index: 1;
+ width: 100%;
+ height: 100%;
}
.label {
- font-family:Helvetica,Arial,sans-serif;
- font-size: larger;
+ font-size: larger;
+ font-family: Helvetica, Arial, sans-serif;
+ padding-top: 10px;
+}
+
+.button {
+ border: 1px solid #222;
+ font-family: Helvetica, Arial, sans-serif;
+ cursor: pointer;
+ padding: .6em 25px;
+ display: block;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ position: relative;
+ box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
+ border-radius: 1em;
+ font-family: Helvetica, Arial, sans-serif;
+ font-weight: bold;
+ color: white;
+ font-size: 16px;
+ text-shadow: 0 -1px 1px black;
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #555), color-stop(1, #333));
+}
+
+.button:active {
+ border: 1px solid black;
+ background: #3D3D3D;
+ font-weight: bold;
+ color: white;
+ text-shadow: 0 -1px 1px black;
+ background-image: -moz-linear-gradient(top, #333, #5A5A5A);
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #333), color-stop(1, #5A5A5A));
+}
+
+.header {
+ position: relative;
+}
+
+.ui-header .ui-title {
+ padding-top: 10px;
+ margin: .6em 110px .8em;
+}
+
+.footer {
+ position: relative;
+ height: 50px;
+}
+
+.content {
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #EEE), color-stop(1, #DDD));
+}
+
+.big-button {
+ -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
+ -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
+ box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
+ display: block;
+ text-align: center;
+ position: relative;
+ margin: 5px auto;
+ margin-top: 10px;
+ margin-bottom: 10px;
+ padding: .6em 25px;
+ height: 100%;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ border: 1px solid #CCC;
+ background: #EEE;
+ color: #444;
+ -webkit-border-radius: 1em;
+ border-radius: 1em;
+ font-family: Helvetica, Arial, sans-serif;
+ width: 95%;
+ font-size: larger;
+ font-weight: bold;
+ text-shadow: 0 1px 1px #F6F6F6;
+ background-image: -moz-linear-gradient(top, #FEFEFE, #EEE);
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FDFDFD), color-stop(1, #EEE));
+}
+
+.big-button:active {
+ border: 1px solid gray;
+ background: #FDFDFD;
+ font-weight: bold;
+ color: #111;
+ text-shadow: 0 1px 1px white;
+ background-image: -moz-linear-gradient(top, #EEE, #FDFDFD);
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #EEE), color-stop(1, #FDFDFD));
+ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#EEE', EndColorStr='#FDFDFD')";
+}
+
+.page-h1 {
+ font-family: Helvetica, Arial, sans-serif;
+ color: #333;
+ text-align: center;
+}
+
+li {
+ list-style: none;
+ font-family: Helvetica, Arial, sans-serif;
+ text-decoration: none;
+ border: 1px solid #F7C942;
+ background: #FADB4E;
+ padding: .7em 75px .7em 15px;
+ font-size: larger;
+ font-weight: bold;
+ color: #333;
+ text-shadow: 0 1px 0 white;
+ background-image: -moz-linear-gradient(top, #FCEDA7, #FADB4E);
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FCEDA7), color-stop(1, #FADB4E));
+ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#FCEDA7', EndColorStr='#FADB4E')";
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+}
+
+li:active {
+ background: #FCEDA7;
+ font-weight: bold;
+ color: #111;
+ text-shadow: 0 1px 1px white;
+ background-image: -moz-linear-gradient(top, #FADB4E, #FCEDA7);
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FADB4E), color-stop(1, #FCEDA7));
+ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#FADB4E', EndColorStr='#FCEDA7')";
+}
+
+textarea {
+ width: 95%;
+ height: 60px;
+ padding: .4em;
+ line-height: 1.4;
+ font-size: 16px;
+ -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, .2);
+ -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, .2);
+ box-shadow: inset 0 1px 4px rgba(0, 0, 0, .2);
+ -moz-border-radius: .6em;
+ -webkit-border-radius: .6em;
+ border-radius: .6em;
+ font-family: Helvetica, Arial, sans-serif;
+ border: 1px solid #B3B3B3;
+ color: #333;
+ text-shadow: 0 1px 0 white;
+ background: #F0F0F0;
+ background-image: -moz-linear-gradient(top, #EEE, #DDD);
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #EEE), color-stop(1, #DDD));
+}
+
+input[type="text"] {
+ padding: .4em;
+ line-height: 1.4;
+ font-size: 16px;
+ width: 95%;
+ -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, .2);
+ -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, .2);
+ box-shadow: inset 0 1px 4px rgba(0, 0, 0, .2);
+ -moz-border-radius: .6em;
+ -webkit-border-radius: .6em;
+ border-radius: .6em;
+ font-family: Helvetica, Arial, sans-serif;
+ border: 1px solid #B3B3B3;
+ color: #333;
+ text-shadow: 0 1px 0 white;
+ background: #F0F0F0;
+ background-image: -moz-linear-gradient(top, #EEE, #DDD);
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #EEE), color-stop(1, #DDD));
+}
+
+.submit-button {
+ background: #a8d2ff;
+ border: 1px solid #499efe;
+ background-image: -moz-linear-gradient(top, #b6e4ff, #70bdff);
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #b6e4ff), color-stop(1, #70bdff));
+}
+
+.submit-button:active {
+ background: #a8d2ff;
+ border: 1px solid #3776BE;
+ background-image: -moz-linear-gradient(top, #70bdff, #b6e4ff,);
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #70bdff), color-stop(1, #b6e4ff));
+}
+
+select {
+ margin: 8px auto;
+ margin-top: 10px;
+ margin-bottom: 10px;
+ width: 95%;
+ font-size: larger;
+ display: block;
+ height: 35px;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ position: relative;
+ -moz-border-radius: 1em;
+ -webkit-border-radius: 1em;
+ border-radius: 1em;
+ border: 1px solid #CCC;
+ background: #EEE;
+ font-weight: bold;
+ color: #444;
+ text-shadow: 0 1px 1px #F6F6F6;
+ font-family: Helvetica, Arial, sans-serif;
+}
+
+input[type='range'] {
+ width: 95%;
+ height: 40px;
}
View
216 geocamCover/templates/geocamCover/index.html
@@ -3,115 +3,132 @@
<head>
<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 }}stylesheets/layout.css"/>
+ <meta name="apple-mobile-web-app-capable" content="yes">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css"/>
+ <link rel="stylesheet" href="{{ MEDIA_URL }}stylesheets/layout.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.0b1/jquery.mobile-1.0b1.min.js"></script>
+ <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"
+ type="text/javascript"></script>
+ {# <script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>#}
<script src="{{ MEDIA_URL }}javascripts/markerclusterer_packed.js" type="text/javascript"></script>
- <script src="{{ MEDIA_URL }}javascripts/jquery.ui.map.min.js" type="text/javascript"></script>
+ <script src="{{ MEDIA_URL }}javascripts/jquery.ui.map.min.js" type="text/javascript"></script>
<script src="{{ MEDIA_URL }}javascripts/app.js" type="text/javascript"></script>
</head>
-<body>
-
-<div id="map-page" data-role="page">
-
- <div id="map-header" data-role="header">
- <h1>GeoCam Cover</h1>
- <a onclick="return switchViews();" id="switch-view-button" href="#" data-icon="forward" class="ui-btn-right">Report View</a>
- </div>
- <div data-role="content" style='padding:0px'>
-
- <div id="dim"></div>
- <div id="map_canvas"></div>
- <div id="place-form">
- <form id="place-form-form">
- <h1>Do you want to add this as a place?</h1>
- <input style='width:95%' id="place-name" type="text" placeholder="Place Name... (optional)"/>
- <select id="place-categories-select" class="categories"></select>
- <input type="submit" value="Add Place"/>
- <input type="button" value="Back to Map" onclick="hideForm('place');"/>
- </form>
- </div>
-
- <div id="address-form">
- <form id="address-form-form">
- <h1>Please enter an address</h1>
- <input style='width:95%' id="address-name" type="text" placeholder="Enter Address..."/>
- <select id="address-categories-select" class="categories"></select>
- <input type="submit" value="Add Place"/>
- <input type="button" value="Back to Map" onclick="hideForm('address');"/>
- </form>
- </div>
+
+
+<body onload="setTimeout(function() { window.scrollTo(0, 0) }, 100);">
+
+<div class='mobile-page' id="map-page">
+ <div id="map-header" class='header ui-bar-a ui-header'>
+ <h1 class='ui-title' style="margin-left: 0px;margin-right: 0px;">GeoCam Cover</h1>
+ </div>
+ <div id="map_canvas"></div>
+ <div id="footer" class="footer ui-bar-a ui-header">
+ <input type='button' onclick="return showPage('#address-form');" id="show-address-button" class='button ui-btn-left'
+ value="Add Address"/>
+ <input id="switch-view-button" class="button ui-btn-right" type='button' onclick="return switchViews();"
+ value='Report View'/>
</div>
- <div id="footer" data-role="footer" data-position="fixed">
- <a onclick="return showForm('address');" id="show-address-button" href="#" class="ui-btn-left">Add Place</a>
- </div>
-
</div>
+<div class="mobile-page" id="address-form">
+ <div class='header ui-bar-a ui-header'>
+ <h1 class='ui-title' style="margin-left: 0px;margin-right: 0px;">Add Place</h1>
+ </div>
+ <form id="address-form-form">
+ <h1 class="page-h1">Please enter an address:</h1>
+ <input style='width:95%' id="address-name" type="text" placeholder="Enter Address..."/>
+ <select id="address-categories-select" class="categories"></select>
+ <input class="submit-button big-button" type="submit" value="Add Place"/>
+ <input class="big-button" type="button" value="Back to Map" onclick="showMap();"/>
+ </form>
+ <input class="big-button" type="button" value="Load Fusion Table" onclick="loadFusionData();"/>
+</div>
+
+<div class="mobile-page" id="place-form">
+ <div class='header ui-bar-a ui-header'>
+ <h1 class='ui-title' style="margin-left: 0px;margin-right: 0px;">Add Place</h1>
+ </div>
+ <form id="place-form-form">
+ <h1 class="page-h1">Do you want to add this as a place?</h1>
+ <input style='width:95%' id="place-name" type="text" placeholder="Place Name... (optional)"/>
+ <select id="place-categories-select" class="categories"></select>
+ <input class="submit-button big-button" type="submit" value="Add Place"/>
+ <input class="big-button" type="button" value="Back to Map" onclick="showMap();"/>
+ </form>
+</div>
-<div id="logs-page" data-role="page">
- <div data-role="header">
- <a href="#" onclick="showMap();" data-icon="arrow-l">Back</a>
+<div class='mobile-page' id="logs-page">
+ <div class='header ui-bar-a ui-header'>
+ <input class='button ui-btn-left' type='button' onclick="return showMap();" value="Back"/>
- <h1 class='name'></h1>
- <a href="#" onclick="showEditPlace();" class="ui-btn-right" data-icon="gear" data-role="button">Edit</a>
+ <h1 class='ui-title'>Logs</h1>
+ <input class='button ui-btn-right' type='submit' onclick="return showEditPlace();" value='Edit'/>
</div>
- <div data-role="content">
- <input onclick="showNewTask();" type="submit" value="Add Task"/>
- <input onclick="showNewReport();" type="submit" value="Add Report"/>
+ <h1 class='page-h1' id='place-name-h1'></h1>
+
+ <div>
+ <input class='big-button' onclick="showNewTask();" type="submit" value="Add Task"/>
+ <input class='big-button' onclick="showNewReport();" type="submit" value="Report on Condition"/>
+ <input class='big-button' type="button" value="Back to Map" onclick="return showMap();"/>
</div>
<div>
- <ul id="logs" data-role="listview" data-theme="e">
+ <ul class='ui-listview ui-listview-inset ui-corner-all ui-shadow' id="logs" data-theme="e">
</ul>
-
</div>
-
</div>
-<div id="tasks-page" data-role="page">
-
- <div data-role="header">
- <a href="#" data-rel="back" data-icon="delete">Cancel</a>
- <h1></h1>
- <a class="delete-button" href="#" onclick="deleteTask();" data-role="button" data-icon="delete">Delete</a>
- </div>
-
- <div data-role="content">
- <form>
- <div>
- <b class="label">Description:</b><br/>
- <textarea class="description"></textarea>
- </div>
- <div class="select-priority">
- <select class="priority">
- <option value="3" selected>Priority: Low</option>
- <option value="2">Priority: Medium</option>
- <option value="1">Priority: High</option>
- </select>
- </div>
- <div class='submit-div'>
- <input type="submit" value="Submit Task" class="submit-button"/>
- </div>
- </form>
- </div>
-
-</div>
+<div class='mobile-page' id="tasks-page">
+ <div class='header ui-bar-a ui-header'>
+ <input class='button ui-btn-left' type='submit' onclick='return showPage("#logs-page");' data-icon="delete"
+ value="Cancel"/>
+
+ <h1 class='ui-title'>Task</h1>
+ <input class='delete-button button ui-btn-right' type='submit' onclick="return deleteTask();" value='Delete'/>
+ </div>
+
+ <h1 class='page-h1' id='task-name-h1'></h1>
+
+ <div>
+ <form>
+ <div>
+ <b class="label">Description:</b><br/>
+ <textarea class="description"></textarea>
+ </div>
+ <div class="select-priority">
+ <select class="priority">
+ <option value="3" selected>Priority: Low</option>
+ <option value="2">Priority: Medium</option>
+ <option value="1">Priority: High</option>
+ </select>
+ </div>
+ <div class='submit-div'>
+ <input class='submit-button big-button' type="submit" value="Submit Task"/>
+ </div>
+ <input class='big-button' type="button" value="Back to Logs" onclick="return showLog(selectedPlace.id);"/>
+ <input class='big-button' type="button" value="Back to Map" onclick="return showMap();"/>
+ </form>
+ </div>
+</div>
-<div id="reports-page" data-role="page">
+<div class='mobile-page' id="reports-page">
+ <div class='header ui-bar-a ui-header'>
+ <input class='button ui-btn-left' type='submit' onclick='return showPage("#logs-page");' data-icon="delete"
+ value="Cancel"/>
- <div data-role="header">
- <a href="#" data-rel="back" data-icon="delete">Cancel</a>
- <h1></h1>
- <a class="delete-button" href="#" onclick="deleteReport();" data-role="button" data-icon="delete">Delete</a>
+ <h1 class='ui-title'>Report</h1>
+ <input class='delete-button button ui-btn-right' type='submit' onclick="return deleteReport();" value='Delete'/>
</div>
- <div data-role="content">
+
+ <h1 class='page-h1' id='report-name-h1'></h1>
+
+ <div>
<form>
<div>
<b class="label">Title:</b><br/>
@@ -145,24 +162,27 @@ <h1 class='name'></h1>
<b class="label">Notes:</b><br/>
<textarea class="notes"></textarea>
</div>
- <div class='submit-div'>
- <input type="submit" value="Submit Report" class="submit-button"/>
- </div>
+ <div class='submit-div'>
+ <input class='submit-button big-button' type="submit" value="Submit Report"/>
+ </div>
+ <input class='big-button' type="button" value="Back to Logs" onclick="return showLog(selectedPlace.id);"/>
+ <input class='big-button' type="button" value="Back to Map" onclick="return showMap();"/>
</form>
</div>
-
</div>
-<div id="edit-place-page" data-role="page">
+<div class='mobile-page' id="edit-place-page">
+ <div class='header ui-bar-a ui-header'>
+ <input class='button ui-btn-left' type='submit' onclick='return showPage("#logs-page");' value="Cancel"/>
- <div data-role="header">
- <a href="#" data-rel="back" data-icon="delete">Cancel</a>
-
- <h1>Edit '<span class='name'></span>'</h1>
- <a href="#" onclick="deletePlace();" data-role="button" data-icon="delete">Delete</a>
+ <h1 class='ui-title'>Place</h1>
+ <input class='button ui-btn-right' type='submit' onclick="return deletePlace();" value='Delete'/>
</div>
- <div data-role="content">
+
+ <h1 class='page-h1'>Edit '<span class='name'></span>'</h1>
+
+ <div>
<form id="edit-place-page-form">
<div>
<b class="label">Name:</b><br/>
@@ -173,13 +193,13 @@ <h1 class='name'></h1>
<b class="label">Category:</b><br/>
<select id="edit-place-categories-select" class="categories"></select>
</div>
- <input type="submit" value="Update Place"/>
+ <input class='big-button' type="submit" value="Update Place"/>
</form>
- <input type="button" value="Back to Logs" onclick="return showLog(selectedPlace.id);"/>
- <input type="submit" value="Back to Map" onclick="return showMap();"/>
+ <input class='big-button' type="button" value="Back to Logs" onclick="return showLog(selectedPlace.id);"/>
+ <input class='big-button' type="button" value="Back to Map" onclick="return showMap();"/>
</div>
-
+
</div>
Please sign in to comment.
Something went wrong with that request. Please try again.