* 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 2005-03-13 19:43:03 +00:00
parent 30ccf8446e
commit dec033fb30
7 changed files with 185 additions and 17 deletions

View file

@ -115,8 +115,8 @@ class TodoController < ApplicationController
item.toggle!('done')
if item.save
flash["confirmation"] = "Next action \"#{item.description}\" marked as completed"
redirect_to( :action => "list" )
#flash["confirmation"] = "Next action \"#{item.description}\" marked as completed"
#redirect_to( :action => "list" )
else
flash["warning"] = "Couldn't mark action \"#{item.description}\" as completed"
redirect_to( :action => "list" )

View file

@ -3,9 +3,23 @@
<head>
<%= stylesheet_link_tag "standard" %>
<%= javascript_include_tag "toggle_notes" %>
<%= javascript_include_tag "calendar" %>
<link rel="shortcut icon" href="/favicon.ico" />
<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>
<body onload="javascript:toggleAll('notes','none')">
<div>

View file

@ -1,8 +1,6 @@
<% @notdone_item = not_done %>
<tr>
<!-- <%= '<tr id="' + @notdone_item.id.to_s + '">' %> -->
<td valign="top">
<%= check_box( "item", "done", "onclick" => "document.location.href='/todo/toggle_check/#{@notdone_item.id}'" ) %></td>
<tr id="action-<%= @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" 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 ) %>
<%= @notdone_item.description %>

View file

@ -11,9 +11,17 @@
<% 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">
<h2>Last 5 completed actions</h2>
<table class="next_actions" id="complete" cellspacing="5" cellpadding="0" border="0">
<%= render_collection_of_partials "done", @done %>
</table>
</div>
@ -28,11 +36,44 @@
</div><!- End of display_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">
<%= render_partial "todo/item", @item %>
<input type="submit" value="Add item">
</form>
</div>
<% if @flash["confirmation"] %><div class="confirmation"><%= @flash["confirmation"] %></div><% end %>
<% if @flash["warning"] %><div class="warning"><%= @flash["warning"] %></div><% end %>

View file

@ -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)
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)
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

View 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>';
}

View file

@ -1,13 +1,57 @@
function toggleAll(itemname,state)
{
tmp = document.getElementsByTagName('div');
   for (i=0;i<tmp.length;i++)
     {
       if (tmp[i].className == itemname) tmp[i].style.display = state;
     }
function toggleAll(itemname,state) {
tmp = document.getElementsByTagName('div');
for (i=0;i<tmp.length;i++) {
if (tmp[i].className == itemname) tmp[i].style.display = state;
}
}
function toggle(idname)
{
document.getElementById(idname).style.display = (document.getElementById(idname).style.display == 'none') ? 'block' : 'none';
}
function toggle(idname) {
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));
};