mirror of
https://github.com/TracksApp/tracks.git
synced 2025-12-17 07:40:12 +01:00
* Added a mini-calendar to the todo/list page. Needs some tidying up, but it provides a quick way to look up a date a few months ahead. Note that it doesn't insert the date: it's just for viewing. I modified the calendar a little bit from here: <http://www.pxl8.com/basic_calendar.html
* Added some XMLHTTPRequest calls to speed up checking off an item as done. It grabs the checked item and appends it immediately to a 'holding' section (where you can uncheck it again if it was a mistake, or add a closing note). When you next refresh the page, it will be added to the 'Last 5 completed items' section. git-svn-id: http://www.rousette.org.uk/svn/tracks-repos/trunk@47 a4c988fc-2ded-0310-b66e-134b36920a42
This commit is contained in:
bsag
parent
30ccf8446e
commit
dec033fb30
7 changed files with 185 additions and 17 deletions
|
|
@ -115,8 +115,8 @@ class TodoController < ApplicationController
|
||||||
item.toggle!('done')
|
item.toggle!('done')
|
||||||
|
|
||||||
if item.save
|
if item.save
|
||||||
flash["confirmation"] = "Next action \"#{item.description}\" marked as completed"
|
#flash["confirmation"] = "Next action \"#{item.description}\" marked as completed"
|
||||||
redirect_to( :action => "list" )
|
#redirect_to( :action => "list" )
|
||||||
else
|
else
|
||||||
flash["warning"] = "Couldn't mark action \"#{item.description}\" as completed"
|
flash["warning"] = "Couldn't mark action \"#{item.description}\" as completed"
|
||||||
redirect_to( :action => "list" )
|
redirect_to( :action => "list" )
|
||||||
|
|
|
||||||
|
|
@ -3,9 +3,23 @@
|
||||||
<head>
|
<head>
|
||||||
<%= stylesheet_link_tag "standard" %>
|
<%= stylesheet_link_tag "standard" %>
|
||||||
<%= javascript_include_tag "toggle_notes" %>
|
<%= javascript_include_tag "toggle_notes" %>
|
||||||
|
<%= javascript_include_tag "calendar" %>
|
||||||
<link rel="shortcut icon" href="/favicon.ico" />
|
<link rel="shortcut icon" href="/favicon.ico" />
|
||||||
|
|
||||||
<title><%= @page_title %></title>
|
<title><%= @page_title %></title>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
#pyNav, #pmNav {border:1px #999 solid}
|
||||||
|
#myNav {}
|
||||||
|
#nmNav, #nyNav { border:1px #999 solid}
|
||||||
|
#calNav td, #calNav td a { text-align:center;font-family:"Lucida Grande", Verdana, Geneva, Arial, sans-serif;font-size:12px;font-weight:bold;background-color:#eee;text-decoration:none }
|
||||||
|
#calNav {margin-bottom:5px}
|
||||||
|
#calNav tr td a {color:#cc3334}
|
||||||
|
#calTbl {}
|
||||||
|
#calTbl td {text-align:center;font-family:"Lucida Grande", Verdana, Geneva, Arial, sans-serif;font-size:11px;border:1px #ccc solid}
|
||||||
|
#calTbl thead td {font-weight:bold}
|
||||||
|
</style>
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body onload="javascript:toggleAll('notes','none')">
|
<body onload="javascript:toggleAll('notes','none')">
|
||||||
<div>
|
<div>
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,6 @@
|
||||||
<% @notdone_item = not_done %>
|
<% @notdone_item = not_done %>
|
||||||
<tr>
|
<tr id="action-<%= @notdone_item.id.to_s %>">
|
||||||
<!-- <%= '<tr id="' + @notdone_item.id.to_s + '">' %> -->
|
<td valign="top"><%= check_box( "item", "done", "onclick" => "markItemDone('action-#{@notdone_item.id}', '/todo/toggle_check/#{@notdone_item.id}', '#{@notdone_item.id}')" ) %></td>
|
||||||
<td valign="top">
|
|
||||||
<%= check_box( "item", "done", "onclick" => "document.location.href='/todo/toggle_check/#{@notdone_item.id}'" ) %></td>
|
|
||||||
<td valign="top" width="30"><%= link_image_to( "edit", { :action => "edit", :id => @notdone_item.id }, :title => "Edit item", :size => "10x10", :border => "0" ) + " " + link_image_to( "delete", { :controller => "todo", :action => "destroy", :id => @notdone_item.id }, :title => "Delete item", :size => "10x10", :border => "0", :confirm => "Are you sure you want to delete this entry: #{@notdone_item.description}" ) + " " %></td>
|
<td valign="top" width="30"><%= link_image_to( "edit", { :action => "edit", :id => @notdone_item.id }, :title => "Edit item", :size => "10x10", :border => "0" ) + " " + link_image_to( "delete", { :controller => "todo", :action => "destroy", :id => @notdone_item.id }, :title => "Delete item", :size => "10x10", :border => "0", :confirm => "Are you sure you want to delete this entry: #{@notdone_item.description}" ) + " " %></td>
|
||||||
<td valign="top"><%= due_date( @notdone_item.due ) %>
|
<td valign="top"><%= due_date( @notdone_item.due ) %>
|
||||||
<%= @notdone_item.description %>
|
<%= @notdone_item.description %>
|
||||||
|
|
|
||||||
|
|
@ -11,9 +11,17 @@
|
||||||
<% end %>
|
<% end %>
|
||||||
<% end %>
|
<% end %>
|
||||||
|
|
||||||
|
<div class="contexts">
|
||||||
|
<h2>Just done</h2>
|
||||||
|
<table class="next_actions" id="holding" cellspacing="5" cellpadding="0" border="0">
|
||||||
|
<tr></tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="contexts">
|
<div class="contexts">
|
||||||
<h2>Last 5 completed actions</h2>
|
<h2>Last 5 completed actions</h2>
|
||||||
<table class="next_actions" id="complete" cellspacing="5" cellpadding="0" border="0">
|
<table class="next_actions" id="complete" cellspacing="5" cellpadding="0" border="0">
|
||||||
|
|
||||||
<%= render_collection_of_partials "done", @done %>
|
<%= render_collection_of_partials "done", @done %>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -28,11 +36,44 @@
|
||||||
</div><!- End of display_box -->
|
</div><!- End of display_box -->
|
||||||
|
|
||||||
<div id="input_box">
|
<div id="input_box">
|
||||||
|
|
||||||
|
<div style="padding:0px;width:200px;background-color:#eee;margin-bottom:10px; margin-left: 60px;" id="calDiv">
|
||||||
|
<table width="100%" id="calNav">
|
||||||
|
<tr>
|
||||||
|
<td id="pyNav"></td><td id="pmNav"></td><td id="myNav" width="100"></td><td id="nmNav"></td><td id="nyNav"></td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
<table id="calTbl" width="100%" cellspacing="0">
|
||||||
|
<thead>
|
||||||
|
<tr style="background-color:#eaeaea">
|
||||||
|
<td>Sun</td>
|
||||||
|
<td>Mon</td>
|
||||||
|
<td>Tue</td>
|
||||||
|
<td>Wed</td>
|
||||||
|
<td>Thu</td>
|
||||||
|
<td>Fri</td>
|
||||||
|
<td>Sat</td>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody></tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script language="Javascript" type="text/javascript">
|
||||||
|
var date = new Date();
|
||||||
|
var curr_dy = date.getDate();
|
||||||
|
var curr_mn = date.getMonth();
|
||||||
|
var curr_yr = date.getFullYear();
|
||||||
|
buildCalendar(curr_mn,curr_yr);
|
||||||
|
</script>
|
||||||
<form method="post" action="add_item">
|
<form method="post" action="add_item">
|
||||||
<%= render_partial "todo/item", @item %>
|
<%= render_partial "todo/item", @item %>
|
||||||
<input type="submit" value="Add item">
|
<input type="submit" value="Add item">
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<% if @flash["confirmation"] %><div class="confirmation"><%= @flash["confirmation"] %></div><% end %>
|
<% if @flash["confirmation"] %><div class="confirmation"><%= @flash["confirmation"] %></div><% end %>
|
||||||
<% if @flash["warning"] %><div class="warning"><%= @flash["warning"] %></div><% end %>
|
<% if @flash["warning"] %><div class="warning"><%= @flash["warning"] %></div><% end %>
|
||||||
|
|
|
||||||
|
|
@ -15,6 +15,8 @@ Project wiki: <http://www.rousette.org.uk/projects/wiki/>
|
||||||
1. Added back border="0" to images which I had mistakenly taken out (thanks, Adam Hughes)
|
1. Added back border="0" to images which I had mistakenly taken out (thanks, Adam Hughes)
|
||||||
2. Removed the section in config/environment.rb which requires Redcloth. This was causing errors because Rails now requires Redcloth itself. This means that you now need to have Redcloth installed as a gem (gem install redcloth) (thanks, Jim).
|
2. Removed the section in config/environment.rb which requires Redcloth. This was causing errors because Rails now requires Redcloth itself. This means that you now need to have Redcloth installed as a gem (gem install redcloth) (thanks, Jim).
|
||||||
3. Fixed SQLite dump format in db/tracks_1.0.2_sqlite.sql (thanks, Jim)
|
3. Fixed SQLite dump format in db/tracks_1.0.2_sqlite.sql (thanks, Jim)
|
||||||
|
4. Added a mini-calendar to the todo/list page. Needs some tidying up, but it provides a quick way to look up a date a few months ahead. Note that it doesn't insert the date: it's just for viewing. I modified the calendar a little bit from here: <http://www.pxl8.com/basic_calendar.html>
|
||||||
|
5. Added some XMLHTTPRequest calls to speed up checking off an item as done. It grabs the checked item and appends it immediately to a 'holding' section (where you can uncheck it again if it was a mistake, or add a closing note). When you next refresh the page, it will be added to the 'Last 5 completed items' section.
|
||||||
|
|
||||||
## Version 1.02
|
## Version 1.02
|
||||||
|
|
||||||
|
|
|
||||||
69
tracks/public/javascripts/calendar.js
Normal file
69
tracks/public/javascripts/calendar.js
Normal file
|
|
@ -0,0 +1,69 @@
|
||||||
|
/* Today's date */
|
||||||
|
var DOMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
|
||||||
|
var lDOMonth = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
|
||||||
|
var moty = ["January","February","March","April","May","June","July","August","September","October","November","December"];
|
||||||
|
|
||||||
|
function Calendar_get_daysofmonth(monthNo, p_year) {
|
||||||
|
if ((p_year % 4) == 0) {
|
||||||
|
if ((p_year % 100) == 0 && (p_year % 400) != 0)
|
||||||
|
return DOMonth[monthNo];
|
||||||
|
return lDOMonth[monthNo];
|
||||||
|
} else
|
||||||
|
return DOMonth[monthNo];
|
||||||
|
}
|
||||||
|
|
||||||
|
function getNextMonth(m,y,incr){
|
||||||
|
var ret_arr = new Array();
|
||||||
|
ret_arr[0] = m + incr; ret_arr[1] = y;
|
||||||
|
if (ret_arr[0] == 12){ ret_arr[0]=0; ret_arr[1]=ret_arr[1]+1; }
|
||||||
|
if (ret_arr[0] == -1){ ret_arr[0]=11; ret_arr[1]=ret_arr[1]-1; }
|
||||||
|
return ret_arr;
|
||||||
|
}
|
||||||
|
function figureDOTW(m,d,y){
|
||||||
|
var tDate = new Date(); tDate.setDate(d); tDate.setMonth(m); tDate.setYear(y); return tDate.getDay();
|
||||||
|
}
|
||||||
|
function scramKids(n){ // this is a basic removeChild loop for removing all childNodes from node n
|
||||||
|
var numKids = n.childNodes.length;
|
||||||
|
for (i=0;i<numKids;i++) { n.removeChild(n.childNodes[0]); }
|
||||||
|
}
|
||||||
|
function buildCalendar(m,y,ff){
|
||||||
|
var dayNo = figureDOTW(m,1,y);
|
||||||
|
var monthNo = Calendar_get_daysofmonth(m,y);
|
||||||
|
|
||||||
|
var dayCount = 1;
|
||||||
|
var calTB = document.getElementById('calTbl').getElementsByTagName('tbody')[0];
|
||||||
|
var calNav = document.getElementById('calNav');
|
||||||
|
scramKids(calTB);
|
||||||
|
for (i=0;i<6;i++){ // row loop
|
||||||
|
var calTR = document.createElement('tr');
|
||||||
|
var calTDtext;
|
||||||
|
|
||||||
|
for (j=0; j < 7; j++){ // cells in row loop
|
||||||
|
var calTD = document.createElement('td');
|
||||||
|
if (j == 0 || j == 6 )
|
||||||
|
calTD.style.backgroundColor = '#fff';
|
||||||
|
if ((i==0 && j < dayNo) || dayCount > monthNo) // if this is the first row....
|
||||||
|
calTDtext = document.createElement('br');
|
||||||
|
else {
|
||||||
|
calTDtext = document.createTextNode(dayCount.toString());
|
||||||
|
|
||||||
|
if (dayCount == curr_dy && m == curr_mn && y == curr_yr)
|
||||||
|
calTD.style.color = '#ff6600';
|
||||||
|
dayCount++;
|
||||||
|
}
|
||||||
|
calTD.appendChild(calTDtext);
|
||||||
|
calTD.setAttribute('width','14%');
|
||||||
|
calTR.appendChild(calTD);
|
||||||
|
}
|
||||||
|
calTB.appendChild(calTR);
|
||||||
|
}
|
||||||
|
|
||||||
|
var nMonth = getNextMonth(m,y,+1);
|
||||||
|
var pMonth = getNextMonth(m,y,-1);
|
||||||
|
|
||||||
|
document.getElementById('pyNav').innerHTML = '<a href="javascript:void(0)" title="Previous Year" onclick="buildCalendar('+m+','+(y-1)+',\''+ff+'\')"><<</a>';
|
||||||
|
document.getElementById('pmNav').innerHTML = '<a href="javascript:void(0)" title="Previous Month" onclick="buildCalendar('+pMonth[0]+','+pMonth[1]+')"><</a>';
|
||||||
|
document.getElementById('myNav').innerHTML = moty[m] +' '+y;
|
||||||
|
document.getElementById('nyNav').innerHTML = '<a href="javascript:void(0)" title="Next Year" onclick="buildCalendar('+m+','+(y+1)+')">>></a>';
|
||||||
|
document.getElementById('nmNav').innerHTML = '<a href="javascript:void(0)" title="Next Month" onclick="buildCalendar('+nMonth[0]+','+nMonth[1]+')">></a>';
|
||||||
|
}
|
||||||
|
|
@ -1,13 +1,57 @@
|
||||||
function toggleAll(itemname,state)
|
function toggleAll(itemname,state) {
|
||||||
{
|
|
||||||
tmp = document.getElementsByTagName('div');
|
tmp = document.getElementsByTagName('div');
|
||||||
for (i=0;i<tmp.length;i++)
|
for (i=0;i<tmp.length;i++) {
|
||||||
{
|
if (tmp[i].className == itemname) tmp[i].style.display = state;
|
||||||
if (tmp[i].className == itemname) tmp[i].style.display = state;
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function toggle(idname)
|
function toggle(idname) {
|
||||||
{
|
|
||||||
document.getElementById(idname).style.display = (document.getElementById(idname).style.display == 'none') ? 'block' : 'none';
|
document.getElementById(idname).style.display = (document.getElementById(idname).style.display == 'none') ? 'block' : 'none';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// XMLHTTPRequest code from David Goodlad <http://hieraki.goodlad.ca/read/book/1>
|
||||||
|
//
|
||||||
|
|
||||||
|
function createXMLHttpRequest() {
|
||||||
|
try {
|
||||||
|
// Attempt to create it "the Mozilla way"
|
||||||
|
if (window.XMLHttpRequest) {
|
||||||
|
return new XMLHttpRequest();
|
||||||
|
}
|
||||||
|
// Guess not - now the IE way
|
||||||
|
if (window.ActiveXObject) {
|
||||||
|
return new ActiveXObject(getXMLPrefix() + ".XmlHttp");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
catch (ex) {}
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Move item from uncompleted to completed
|
||||||
|
// Many thanks to Michelle at PXL8 for a great tutorial:
|
||||||
|
// <http://www.pxl8.com/appendChild.html>
|
||||||
|
function moveRow(id){
|
||||||
|
// -- get the table row correstponding to the selected item
|
||||||
|
var m1 = document.getElementById(id);
|
||||||
|
if (m1)
|
||||||
|
// -- append it to the 1st tbody of table id="holding"
|
||||||
|
document.getElementById('holding').getElementsByTagName('tbody')[0].appendChild(m1);
|
||||||
|
}
|
||||||
|
|
||||||
|
function markItemDone(rowId, uri, id) {
|
||||||
|
var req = createXMLHttpRequest();
|
||||||
|
moveRow(rowId);
|
||||||
|
|
||||||
|
if(!req) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
req.open("POST", uri, true); //POST asynchronously
|
||||||
|
req.setRequestHeader('Content-Type', 'application/x-www-form-url-encoded; charset=UTF-8');
|
||||||
|
req.onreadystatechange = function() {
|
||||||
|
if (req.readyState == 4 && req.status == 200) {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
req.send(encodeURIComponent("id") + '=' + encodeURIComponent(id));
|
||||||
|
};
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue