Skip to content
Browse files

Adding Drill Down / Edit for projects

  • Loading branch information...
1 parent 79a6330 commit 18bdccaac6e1450344ba9ceee3f16daa7d622091 Aaron Crowder committed
Showing with 127 additions and 4 deletions.
  1. +19 −0 css/style.css
  2. +25 −1 index.html
  3. +83 −3 js/app.js
View
19 css/style.css
@@ -1,3 +1,21 @@
+h3
+{
+ margin: 0 0 5px 0;
+}
+
+a
+{
+ color: #000000;
+ font-weight: normal;
+ font-size: 10px;
+ text-decoration: none;
+}
+
+a:hover
+{
+ text-decoration: underline;
+}
+
#MainHeader
{
@@ -68,6 +86,7 @@
.draggable
{
+ font-weight: bold;
cursor: pointer;
background-color: #AFAFAF;
padding: 5px 5px 5px 5px;
View
26 index.html
@@ -83,7 +83,7 @@
<label for="proj_due">Due date:</label><input type="textbox" id="proj_due" class="textbox" /><br/>
<label for="proj_description">Description</lable><br/>
<textarea id="proj_description" cols="69" rows="5" class="textbox"></textarea>
- <select id="color_picker">
+ <select id="color_picker" class="color_picker">
<option value="AFAFAF">AFAFAF</option>
<option value="E2161E">E2161E</option>
<option value="218F51">218F51</option>
@@ -92,5 +92,29 @@
</select>
</div>
+ <!-- Drill Down Dialong -->
+ <div id="drill_into_proj" title="View your Project">
+ <h3><span id="proj_name_dd"></span></h3>
+ <p><span id="proj_description_dd"></span></p>
+ <p><i>Due on: <span id="proj_due_dd"></span></i></p>
+ <span id="proj_id_dd" style="display: none;"></span>
+ </div>
+
+ <!-- Edit Project Dialog -->
+ <div id="edit_proj_dialog" title="Edit your Project">
+ <label for="proj_name_e">Project Name:</label><input type="textbox" id="proj_name_e" class="textbox" />
+ <label for="proj_due_e">Due date:</label><input type="textbox" id="proj_due_e" class="textbox" /><br/>
+ <label for="proj_description_e">Description</lable><br/>
+ <textarea id="proj_description_e" cols="69" rows="5" class="textbox"></textarea>
+ <select id="color_picker_e">
+ <option value="AFAFAF">AFAFAF</option>
+ <option value="E2161E">E2161E</option>
+ <option value="218F51">218F51</option>
+ <option value="E2AE3A">E2AE3A</option>
+ <option value="1E5FB8">1E5FB8</option>
+ </select>
+ <span id="proj_id_e" style="display: none;"></span>
+ <span id="proj_loc_e" style="display: none;"></span>
+ </div>
</body>
</html>
View
86 js/app.js
@@ -24,8 +24,38 @@ $(document).ready(function(){
size: 15,
label: 'Project Color: '
});
+ $('#color_picker_e').colorpicker({
+ size: 15,
+ label: 'Project Color: '
+ });
$('#proj_due').datepicker();
+ $('#proj_due_e').datepicker();
+
+ $("#drill_into_proj").dialog({
+ modal: true,
+ autoOpen: false,
+ height: 300,
+ width: 540,
+ buttons: {
+ "Ok": function() { $('#drill_into_proj').dialog('close'); },
+ "Edit": function() {
+ $('#add_proj_dialog').dialog('close');
+ editItem($("#proj_id_dd").html());
+ }
+ }
+ });
+
+ $("#edit_proj_dialog").dialog({
+ modal: true,
+ autoOpen: false,
+ height: 300,
+ width: 540,
+ buttons: {
+ "Save": function() { finish_editItem(); },
+ "Cancel": function() { $('#edit_proj_dialog').dialog('close'); }
+ }
+ });
$('.draggable').draggable({
cancel: "a.ui-icon",
@@ -57,7 +87,10 @@ $(document).ready(function(){
var i;
for(i = 0; i < proj.length; i += 1 )
{
- $("#" + proj[i].location).append('<div id="' + proj[i].key + '" class="draggable grid_2" style="background-color: #' + proj[i].color + ';">' + proj[i].name + '</div>');
+ $("#" + proj[i].location).append('<div id="' + proj[i].key + '" class="draggable grid_2" style="background-color: #' + proj[i].color + ';">' +
+ proj[i].name +
+ '<br/><center><a href="#" onclick="drillInto(' + proj[i].key + ');">View</a> | <a href="#" onclick="editItem(' + proj[i].key + ');">Edit</a></center>' +
+ '</div>');
}
reInit();
});
@@ -90,7 +123,10 @@ function quick_add_project()
$proj_name = $("#new_project").val();
$("#new_project").val("");
- $("#new_body").append('<div id="' + date + '" class="draggable grid_2" style="background-color: #AFAFAF;">' + $proj_name + '</div>');
+ $("#new_body").append('<div id="' + date + '" class="draggable grid_2" style="background-color: #AFAFAF;">' +
+ $proj_name +
+ '<br/><center><a href="#" onclick="drillInto(' + date + ');">View</a> | <a href="#" onclick="editItem(' + date + ');">Edit</a></center>' +
+ '</div>');
reInit();
//Save the project to localStorage()
@@ -119,7 +155,10 @@ function save_project()
$proj_name = $("#proj_name").val();
- $("#new_body").append('<div id="' + date + '" class="draggable grid_2" style="background-color: #' + $("#color_picker option:selected").text() + ';">' + $proj_name + '</div>');
+ $("#new_body").append('<div id="' + date + '" class="draggable grid_2" style="background-color: #' + $("#color_picker option:selected").text() + ';">' +
+ $proj_name +
+ '<br/><center><a href="#" onclick="drillInto(' + date + ');">View</a> | <a href="#" onclick="editItem(' + date + ');">Edit</a></center>' +
+ '</div>');
reInit();
//Save the project to localStorage()
@@ -140,6 +179,47 @@ function save_project()
$("#proj_description").val("");
}
+function drillInto($id)
+{
+ projects.get($id, function(r) {
+ $("#proj_name_dd").html(r.name);
+ $("#proj_due_dd").html(r.due);
+ $("#proj_description_dd").html(r.description);
+ $("#proj_id_dd").html(r.key);
+
+ $("#drill_into_proj").dialog("open");
+ });
+}
+
+function editItem($id)
+{
+ projects.get($id, function(r) {
+ $("#proj_name_e").val(r.name);
+ $("#proj_due_e").val(r.due);
+ $("#proj_description_e").val(r.description);
+ $("#proj_id_e").html(r.key);
+ $("#proj_loc_e").html(r.location);
+
+ $("#edit_proj_dialog").dialog("open");
+ });
+}
+
+function finish_editItem()
+{
+ //Save the project to localStorage()
+ var proj = {
+ key: $("#proj_id_e").html(),
+ name: $("#proj_name_e").val(),
+ color: $("#color_picker_e option:selected").text(),
+ description: $("#proj_description_e").val(),
+ due: $("#proj_due_e").val(),
+ location: $("#proj_loc_e").html()
+ };
+ projects.save(proj, function(r) { /*callback function*/ });
+
+ window.location.reload();
+}
+
function reInit()
{
$('.draggable').draggable('destroy');

0 comments on commit 18bdcca

Please sign in to comment.
Something went wrong with that request. Please try again.