Skip to content

Latest commit

 

History

History
432 lines (359 loc) · 33.2 KB

A0139080J.md

File metadata and controls

432 lines (359 loc) · 33.2 KB

A0139080J

\developer.html
                <h2 id="ui-component"><em>UI</em> Component</h2>

                <figure>
                    <img src="https://raw.githubusercontent.com/CS2103AUG2016-W13-C3/main/master/docs/images/diagrams/ui-component.PNG" max-width="600">
                    <figcaption>Structure of <em>UI</em> component</figcaption>
                </figure>

                <p>The <em>UI</em> component (package <code>seedu.commando.ui</code>) is in charge of:
                
                    <ul>
                        <li>Handing and passing user input to the appropriate methods of the <em>Logic</em> component.</li>
                        <li>Displaying the graphical user interface (GUI).</li>
                        <li>Updating the GUI automatically when data in the <em>Model</em> component changes, done by binding itself to the data using JavaFX's <em>Observable</em> collections.</li>
                        <li>Responding to events posted in <em>EventsCenter</em> that involve a change in the GUI (e.g. opening the help window when <code>ShowHelpRequestEvent</code> is posted).</li>
                    </ul> 
                <p>
                    It uses the JavaFX UI framework (more information about JavaFX <a href="http://docs.oracle.com/javase/8/javase-clienttechnologies.htm">here</a>) - it is made up of GUI parts such as <code>CommandBox</code>, <code>ResultDisplay</code> and <code>EventListPanel</code>. Each part has a class inheriting from the abstract <code>UiPart</code> class (which may be loaded with <code>UiPartLoader</code>), and has a layout defined in a corresponding <code>.fxml</code> file of the same name, located in the <code>resources/view</code> folder. For example, the layout of the <code>MainWindow</code> class is specified in <code>resources/view/MainWindow.fxml</code>.
                </p>

                <h3 id="gui-updates">How the GUI Updates</h3>

                <p>
                    The <em>UI</em> component adds change listeners to 2 <em>Observable</em> lists of <code>UiToDo</code>: one for <em>Events</em> in the <code>EventListPanel</code> class, another for <em>Tasks</em> in the <code>TaskListPanel</code> class. These lists are provided through the API of <em>Logic</em>. When the <em>Model</em> component updates the to-do list, these lists will also update (which will be described in detail later), and this triggers each panel's <code>ListView</code> to update its contents based on the lists. 
                </p>

                <h2 id="logic-component"><em>Logic</em> Component</h2>

                <figure>
                    <img src="https://raw.githubusercontent.com/CS2103AUG2016-W13-C3/main/master/docs/images/diagrams/logic-component.PNG" max-width="500">
                    <figcaption>Structure of <em>Logic</em> component</figcaption>
                </figure>

                <p>
                    The <em>Logic</em> component (package <code>seedu.commando.logic</code>) is in charge of:

                    <ul>
                        <li>Parsing the string commands from the <em>UI</em> component through the <code>excute(String)</code> method.</li>
                        <li>Calling the appropriate methods of <em>Model</em> and <em>Storage</em> components, or posting the appropriate events on <em>EventsCenter</em> based on the commands.</li>
                        <li>Informing the <em>UI</em> of the results of the commands executed.</li>
                        <li>Responding to any events from <em>EventsCenter</em> that would require an action on the <code>Model</code> or <code>Storage</code> components (e.g. saving the to-do list to the file system with <em>Storage</em> when the <code>ToDoListChangeEvent</code> is posted).</li>
                        <li>Relaying the data of <em>Model</em> to the <em>UI</em> through its methods of <code>getUiEvents()</code>, <code>getUiTasks()</code> and <code>getToDoList()</code>.</li>
                    </ul> 
                </p>
<div class="pagebreak"> </div>
                <h3 id="execute-called">When <code>execute(String)</code> is Called</h3>

                <p>
                    When the <em>UI</em> calls <code>execute(String)</code>, <code>LogicManager</code> passes the string command to <code>CommandFactory</code>. <code>CommandFactory</code>, with the help of <code>CommandParser</code>, would determine the type of command and parse it accordingly, creating one of the sub-class of the abstract <code>Command</code> class. The <code>Command</code> would then have its <code>execute()</code> method called in <code>LogicManager</code>, producing a <code>CommandResult</code>. The <code>CommandResult</code> is finally returned to <em>UI</em>, which contains the user feedback message and indicates whether the command was successful. Refer to the following diagram for a graphical walkthrough.
                </p>

                <figure>
                    <img src="https://raw.githubusercontent.com/CS2103AUG2016-W13-C3/main/master/docs/images/diagrams/finish-command-in-logic-sd.PNG" max-width="500">
                    <figcaption>Sequence diagram for <em>Logic</em> when command <code>>> finish 2</code> is executed</figcaption>
                </figure>


                <h3 id="parsing-of-datetimes">Parsing of Datetimes</h3>
                
                <p>
                    The <code>DateTimeParser</code> class in charge of taking in an input string with <code>parseDateTime(String)</code>, and returning a <code>LocalDateTime</code> if the string represents a valid datetime. Within the class, it first validates and pre-processes the input string (using regex), then delegates the actual parsing to the <a href="http://natty.joestelmach.com/"><em>Natty</em></a> library. 
                </p>
                <h2 id="model-component"><em>Model</em> Component</h2>

                <figure>
                    <img src="https://raw.githubusercontent.com/CS2103AUG2016-W13-C3/main/master/docs/images/diagrams/model-component.PNG" max-width="500">
                    <figcaption>Structure of <em>Model</em> component</figcaption>
                </figure>

                <p>
                    The <em>Model</em> component (package <code>seedu.commando.model</code>) is in charge of:

                    <ul>
                        <li>Defining how data in <em>CommanDo</em> is represented in the form of classes (e.g. <code>ToDo</code>, <code>ToDoList</code>).</li>
                        <li>Keeping the user's to-do list in memory and supporting CRUD functionality to it.</li>
                        <li>Keeping track of changes to the to-do list and support undoing and redoing of these changes.</li>
                        <li>Exposing <em>Observable</em> collections of <em>Events</em> and <em>Tasks</em> that are to be shown on the GUI, as well as the filtering, sorting and assigning of indices to these to-dos for the GUI.</li>
                    </ul>
                </p>
<div class="pagebreak"> </div>
                <h3 id="changing-undoing-redoing">Changing, Undoing and Redoing the To-Do List</h3>

                <p>
                    Within <code>ModelManager</code>, the <code>ToDoListManager</code> class is in charge of supporting the editing, undoing and redoing of the to-do list, hinging on the <code>ToDoListChange</code> class. All commands define an edit to the to-do list in a consistent way with the <code>ToDoListChange</code> class and the <code>changeToDoList(ToDoListChange)</code> method, which provides greater flexibility in edits, looser coupling between <em>Model</em> and <em>Logic</em>, and more predictable effects from <code>undoToDoList()</code> and <code>redoToDoList()</code>, which undos or redos the most recent <em>ToDoListChange</em> that has been pushed to <em>Model</em>.
                </p>

                <h3 id="preparing-for-ui">Preparing for the <em>UI</em></h3>

                <p>
                    Within <code>ModelManager</code>, the <code>UiModel</code> class is in charge of processing, sorting and filtering the list of to-dos for the <em>UI</em>. It tracks changes to the actual list of <code>ToDo</code> of <em>Model</em>, and when a change happens, it will update the <em>Observable</em> lists of <code>UiToDo</code>, which are exposed via <code>getUiEvents()</code> and <code>getUiTasks()</code> for the GUI. In an update, it will split the new list of <code>ToDo</code> into <em>Events</em> and <em>Tasks</em>, filter out those which shouldn't be displayed on the GUI, sort them, assign indices to each of them in the correct order, and wraps each <code>ToDo</code> in <code>UiToDo</code> with some additional data. 
                </p>
                <p>
                    A similar update is triggered when the user submits a command that calls <code>clearUiToDoListFilter(...)</code> or <code>clearUiToDoListFilter(...)</code> (e.g. the <code>find</code> or <code>recall</code> command). 
                </p>

                <h2 id="storage-component"><em>Storage</em> Component</h2>

                <figure>
                    <img src="https://raw.githubusercontent.com/CS2103AUG2016-W13-C3/main/master/docs/images/diagrams/storage-component.PNG" max-width="450">
                    <figcaption>Structure of <em>Storage</em> component</figcaption>
                </figure>

                <p>
                    The <em>Storage</em> component (package <code>seedu.commando.storage</code>) is in charge of the reading of the data for the to-do list and the data for user preferences on the file system, as well as the saving of these data to the file system.
                </p>

                <p>
                    The <code>StorageManager</code> class consists of <code>XmlToDoListStorage</code>, which is in charge of reading/loading the to-do list data, and <code>JsonUserPrefsStorage</code>, which is in charge of reading/loading the user preferences data. The <code>XmlToDoListStorage</code> class saves/loads the to-do list data to the specified file path in <a href="https://www.w3.org/XML/">XML</a> with the help of <a href="https://docs.oracle.com/javase/tutorial/jaxb/intro/">Java Architecture for XML Binding</a>. On the other hand, the <code>JsonUserPrefsStorage</code> class saves/loads the user preferences data to the specified file path in <a href="http://www.json.org/">JSON</a> with the help of the <a href="http://wiki.fasterxml.com/JacksonHome">Jackson JSON Processor</a> library.
                </p>

                <h2 id="commons-package">Commons Package</h2>

                <p>
                    The package <code>seedu.commando.commons</code> contains utility classes (in <code>/util</code>), events (in <code>/events</code>), exceptions (in <code>/exceptions</code>), application constants and data structures used in all the components.
                </p>

                <h3 id="eventscenter"><code>EventsCenter</code> and Event Driven Design</h3>

                <p>
                    For components to inform one another that something has happened, we use <a href="https://github.com/google/guava/wiki/EventBusExplained">Google's Event Bus library</a>, packaged in the <code>EventsCenter</code> class. This is especially important for lower-level components to communicate with higher-level components that they should not be dependent on. An example is the posting of <code>ExitAppRequestEvent</code> by <em>Logic</em> to inform <code>MainApp</code> to close the window.
                </p>

                <blockquote>
                    All events should extend the <code>BaseEvent</code> class and be placed in package <code>seedu.commando.commons.events</code>.
                </blockquote>
				
                <h3 id="logscenter"><code>LogsCenter</code> and Logging</h3>

                <p> We are using the <code>java.util.logging</code> package for logging. The <code>LogsCenter</code> class is used to manage the logging levels and logging destinations. The <code>Logger</code> for a class can be obtained using <code>LogsCenter.getLogger(Class)</code> which will log messages according to the specified logging level. </p>

                <p>Currently, log messages are output through the console and to a <code>.log</code> file at the project root.</p>

                <h4>Logging Levels</h4>
                <ul>
                    <li>
                        <code>SEVERE</code>: Critical problems detected which may possibly cause the termination of the application.
                    </li>
                    <li>
                        <code>WARNING</code>: Actions that can be continued, but with caution.
                    </li>
                    <li>
                        <code>INFO</code>: Information showing the noteworthy actions by the application.
                    </li>
                    <li>
                        <code>FINE</code>: Details that are not usually noteworthy but may be useful in debugging (e.g. print the actual list instead of just its size).
                    </li>
                </ul>
<div class="pagebreak"> </div>
                <h3 id="messages"><code>Messages</code></h3>

                <p>
                    The <code>Messages</code> class contains a list of static <em>String</em> constants that used for displaying user feedback, primarily referenced from the <em>Logic</em> component and the subclasses of <code>Command</code>. All messages displayed to the user should be abstracted to static <em>String</em> constants in this class so that changes to user interaction can be easily made in the same place.
                </p>

                <h2 id="testing">Testing</h2>

                <p>Tests can be found in the test folder (<code>./src/test/java</code>). We aim to maximise our test coverage, so every class written should be accompanied by a corresponding test class in a similar path within this test folder.</p>

                <h3 id="running-tests">Running Tests</h3>

                <p>Tests can be run in 2 ways:</p>

                <ol>
                    <li>
                        <strong>In Eclipse - </strong> Right-click on the <code>./src/test/java</code> folder, <code>Run as</code> and then <code>JUnit Test</code>. To run a subset of tests, right-click on a test package, test class, or a test instead.
                    </li>

                    <li>
                        <strong>Using Gradle - </strong> See <a href="https://github.com/CS2103AUG2016-W13-C3/main/blob/master/docs/UsingGradle.md">UsingGradle.md</a> for how to run tests using Gradle.
                    </li>
                </ol>

                <blockquote>
                        If you are not using a recent Eclipse version (i.e. <em>Neon</em> or later), enable assertions in JUnit tests as described <a href="http://stackoverflow.com/questions/2522897/eclipse-junit-ea-vm-option">here</a>.
                </blockquote>


                <h3 id="types-of-tests">Types of Tests</h3>

                <ol>
                    <li><strong>GUI Tests - </strong>They are System Tests that test the entire application by simulating user actions on the GUI. These are in the <code>guitests</code> package.</li>

                    <blockquote>
                        <strong>Headless GUI Testing</strong> By applying <a href="https://github.com/TestFX/TestFX">TestFX</a> library, GUI tests can be run in the <em>headless</em> mode. In the <em>headless mode</em>, GUI tests do not show up on the screen. That means you can do other things on your device while the tests are running. See <a href="https://github.com/CS2103AUG2016-W13-C3/main/blob/master/docs/UsingGradle.md#running-tests">UsingGradle.md</a> to learn how to run tests in headless mode.
                    </blockquote>

                    <li>
                        <strong>Non-GUI Tests - </strong>They include:
                        <p>
                            <ol>
                                <li type=i>
                                    <strong>Unit tests:</strong> targeting the lowest-level methods/classes. <br>
                                    E.g. <code>seedu.commando.commons.UrlUtilTest</code>
                                </li>
                                <li type=i>
                                    <strong>Integration tests:</strong> checking the integration of multiple code units (those code units are assumed to be working).<br>
                                    E.g. <code>seedu.commando.storage.StorageManagerTest</code>
                                </li>
                                <li type=i>
                                    <strong>Hybrid tests:</strong> testing multiple code units as well as how the are connected together.<br>
                                    E.g. <code>seedu.commando.logic.LogicManagerTest</code>
                                </li>
                            </ol>
                        </p>
                    </li>
                </ol>
\developer.html
                            <tr>
                                <td>Anydo (Conan)</td>
                                <td align="left">+ It is able to push tasks to a later date <br> + It can easily reorder tasks <br> + It has user-friendly interface (4 major groups) <br> + It can be used on mobile and on browser <br> + It supports double confirmation of deleting a task when complete <br> + It can add details in later</td>
                                <td align="left">- It has no clear distinguishing of the 3 types of tasks <br> - It has little sense of timeline, and ends up with just tasks to complete by the end of the day <br> - Its deadlines are not shown unless the task is clicked <br> - It does not support search function (however, you can Ctrl+F, though no content search) <br> - Its other 2 groups �Upcoming� and �Someday� are kind of ambiguous</td>
                            </tr>
\user.html
                <div class="pagebreak"> </div>		
                <h3 id="add">
                    Adding To-Dos: <code>add</code>
                </h3>

                <p>The very first thing you'll want to do is to add a to-do. Each to-do contains at minimum, a description. You can associate each to-do with multiple tags and a time constraint. Depending on nature of the time constraint, to-dos are categorised into 2 types: <em>Events</em> (shown in the left panel) and <em>Tasks</em> (shown in the right panel):</p>

                <figure>
                    <img src="https://github.com/CS2103AUG2016-W13-C3/main/blob/master/docs/images/Ui.png?raw=true" width="600">
                    <figcaption>In <em>CommanDo</em>, all <em>Events</em> are on the left and all <em>Tasks</em> are on the right</figcaption>
                </figure>

                <h4>Adding Events</h4>

                <p>
                    An <em>Event</em> is an activity happening within a time window. Examples include your birthday party, a meeting with your boss, or the upcoming examination you might have. To add an <em>Event</em>, use the <code>add</code> command, followed by the description, the time window, a recurrence (optional) and tags, if any.
                </p>

                <span><strong>Command Format:</strong></span>
                <pre class="command-format"><span class="inputstart">&gt;&gt;</span> add <span>&lt;description&gt;</span> from <span>&lt;start_datetime&gt;</span> to <span>&lt;end_datetime&gt;</span> [daily/weekly/monthly/yearly] [#<span>&lt;tag&gt;</span>...]</pre>
                <pre class="command-format"><span class="inputstart">&gt;&gt;</span> add <span>&lt;description&gt;</span> on <span>&lt;datetime&gt;</span> [daily/weekly/monthly/yearly] [#<span>&lt;tag&gt;</span>...] </pre>
                <pre class="command-format"><span class="inputstart">&gt;&gt;</span> add <span>&lt;description&gt;</span> to <span>&lt;end_datetime&gt;</span> [daily/weekly/monthly/yearly] [#<span>&lt;tag&gt;</span>...] </pre>
<div class="pagebreak"> </div>
                <span><strong>Examples:</strong></span>
                <pre><span class="inputstart">&gt;&gt;</span> add <span>wild party in hostel room</span> from <span>31 Dec 2016</span> to <span>1 Jan 2017</span></pre>
                <pre><span class="inputstart">&gt;&gt;</span> add <span>shopping with wife</span> from <span>5 Sep 1230h</span> to <span>1730h </span>#<span>important </span>#<span>wife</span></pre>
                <pre><span class="inputstart">&gt;&gt;</span> add <span>meeting with Dr Tan</span> from <span>next Saturday 9am</span> to <span>10am </span>#<span>work </span>#<span>important</span></pre>
                <pre><span class="inputstart">&gt;&gt;</span> add <span>physics revision</span> from <span>tues 9.30pm</span> to <span>10pm</span> weekly <span></span>#<span>physics</span></pre>
                <pre><span class="inputstart">&gt;&gt;</span> add <span>tour with Jimmy</span> on <span>next Saturday </span></pre>
                <pre><span class="inputstart">&gt;&gt;</span> add <span>clean room</span> on <span>tomorrow </span>#<span>important </span></pre>

                <p>
                    In <em>CommanDo</em>, there are 3 ways to specify its time window of an <em>Event</em>:
                    <ul>
                        <li>
                            Specifying both <code>start_datetime</code> and <code>end_datetime</code> fields: the <em>Event</em> starts at <code>start_datetime</code> and ends at <code>end_datetime</code>
                            <ul>
                                <li>With no time specified, <code>start_datetime</code> defaults to a time of 0000h midnight, while <code>end_datetime</code> defaults to 2359h</li>
                            </ul>
                        </li>
                        <li>
                            Specifying a <code>datetime</code> field: the <em>Event</em> starts at <code>datetime</code> and ends at 2359h on that day
                            <ul>
                                <li>With no time specified, <code>datetime</code> defaults to a time of 0000h midnight</li>
                            </ul>
                        </li>
                        <li>
                            Specifying a <code>end_datetime</code> field: the <em>Event</em> starts from the current datetime (i.e. now) and ends at <code>end_datetime</code> 
                            <ul>
                                <li>With no time specified, <code>end_datetime</code> defaults to a time of 2359h</li>
                            </ul>
                        </li>
                    </ul>
                </p>

                <blockquote>
                    <b>Datetime Formats:</b> <em>CommanDo</em> is pretty flexible in parsing your datetime fields, accepting formats like <code>5 Jan 2016 2300</code> and <code>28/12/2016 12pm</code> (where the date is in the <code>DD/MM/YYYY</code> format). You can drop the year (if you mean the current year) or even a whole date (if you mean a preceding date or the current date). For the full list of usable datetime formats, refer to the later FAQ section on <a href="#supported-date-time-formats">supported datetime formats</a>.
                </blockquote>

                <p>
                    The use of keywords <code>daily</code>, <code>weekly</code>, <code>monthly</code> or <code>yearly</code> after the time window allows you to add a recurrence to the <em>Event</em>. The moment a recurring <em>Event</em> is over, <em>CommanDo</em> will automatically move its time window forwards based on the recurrence.
                </p>

                <p>To help organise your to-do list, you can associate tags with the <em>Event</em> by putting them at the end of the command, prefixed with <code>#</code>. You'll be able to browse through your to-do list by tags with the <a href="#find"><code>find</code></a> and <a href="#recall"><code>recall</code></a> commands described later.</p>

                <p>In <em>CommanDo</em>, by default, every upcoming <em>Event</em> is listed in the left panel, in chronological order. When an <em>Event</em> is over, it will drop down to the bottom of the list, greyed out. On the next day, <em>CommanDo</em> will hide it for you, but you can still find it with the <a href="#recall"><code>recall</code></a> command. The following screenshots demonstrate how <em>Events</em> are displayed:</p>
                
                <figure>
                    <img src="https://raw.githubusercontent.com/CS2103AUG2016-W13-C3/main/master/docs/images/Userguide/addEvent.png" width="600">
                    <figcaption align=center>
                        Result of adding a <em>Event</em> with command:<br />
                        <code>>> add wild party in hostel room from 31 Dec 2016 to 1 Jan 2017</code>
                    </figcaption>
                </figure>

                <figure>
                    <img src="https://raw.githubusercontent.com/CS2103AUG2016-W13-C3/main/master/docs/images/Userguide/addEventWithTag.png" width="600">
                    <figcaption align=center>
                        Result of adding a recurring <em>Event</em> with command:<br />
                        <code>>> add physics revision from tues 9.30pm to 10pm weekly #physics</code>
                    </figcaption>
                </figure>

                <figure>
                    <img src="https://raw.githubusercontent.com/CS2103AUG2016-W13-C3/main/master/docs/images/Userguide/finishedEvents.png" width="600">
                    <figcaption align=center>
                        An <em>Event</em> that has past will drop to the bottom of its list, greyed out
                    </figcaption>
                </figure>
<div class="pagebreak"> </div>
                <h4>Adding Tasks</h4>

                <p>A <em>Task</em>, on the other hand, is an activity that can be done at your own time or by some due date. Examples include a plan to watch the latest blockbuster movie, or the submission deadline of an assignment. To add a <em>Task</em>, use the <code>add</code> command, followed by the description, a due date (optional), a recurrence (optional) and tags, if any.</p>

                <span><strong>Command Format:</strong></span>
                <pre class="command-format"><span class="inputstart">&gt;&gt;</span> add <span>&lt;description&gt;</span> [by <span>&lt;due_datetime&gt;</span>] [daily/weekly/monthly/yearly] [#<span>&lt;tag&gt;</span>...]</pre>

                <span><strong>Examples:</strong></span>
                <pre><span class="inputstart">&gt;&gt;</span> add <span>finish FYP</span> by <span>tomorrow 2359h</span></pre>
                <pre><span class="inputstart">&gt;&gt;</span> add <span>submit math homework</span> by <span>wednesday 2359h </span>weekly</pre>
                <pre><span class="inputstart">&gt;&gt;</span> add <span>watch Lord of the Rings</span></pre>
                <pre><span class="inputstart">&gt;&gt;</span> add <span>shop for groceries: banana, pineapple, watermelon </span>#<span>housework</span></pre>


                <pre><span class="inputstart">&gt;&gt;</span> add <span>walk from here to there</span></pre>
                <span class="comment">This command will add a <em>Task</em> with description <code>walk from here to there</code>. Although it looks like the format of an <em>Event</em>, <em>CommanDo</em> recognises that <code>here</code> and <code>there</code> are invalid datetimes.</span>
                <pre><span class="inputstart">&gt;&gt;</span> add <span>code parser to parse by tomorrow</span> by <span>today</span></pre>
                <span class="comment">This command will add a <em>Task</em> with description <code>code parser to parse by tomorrow</code> with due date of the current day 2359h.</span>
<div class="pagebreak"> </div>
               <p>If you do not specify a time in <code>due_datetime</code>, the time will default to 2359h. You can add tags and recurrence to a <em>Task</em> in a way similar to adding <em>Events</em>. </p>
                
                <p>When you have completed a <em>Task</em>, you can mark it as done with the <a href="#finish"><code>finish</code></a> command. In <em>CommanDo</em>, every unfinished <em>Task</em> is listed on the right panel, with those with due dates prioritized at the top, in chronological order. The following screenshot shows how a <em>Task</em> is displayed when you add it:</p>

                <figure>
                    <img src="https://raw.githubusercontent.com/CS2103AUG2016-W13-C3/main/master/docs/images/Userguide/addDdl.png" width="600">
                    <figcaption>Result of adding a <em>Task</em> with command:<br/><code>>> add finish FYP by tomorrow 2359h</code></figcaption>
                </figure>

                <blockquote>
                    <b>Escaping description of to-dos:</b> In the case you want to use something like <code>by today</code> or <code>from morning to night</code> as the description of your <em>Event</em> or <em>Task</em>, you can wrap it with backticks like in this following example:

                    <pre><span class="inputstart">&gt;&gt;</span> add `<span>shop by today</span>`</pre>
                    <span class="comment">This command will add a <em>Task</em> with description <code>shop by today</code>.</span>
                </blockquote>
<div class="pagebreak"> </div>
                <h3 id="delete">
                    Deleting To-Dos and their Fields: <code>delete</code>
                </h3>
                
\user.html
                                <td>
                                    <code>9am</code>
                                </td>
                                <td>
                                    <code>afternoon</code> <em>(1200h)</em>
                                </td>
                            </tr>
                            <tr>
                                <td></td>
                                <td>
                                    <code>1.30am</code>
                                </td>
                                <td>
                                    <code>evening</code> <em>(1900h)</em>
                                </td>
                            </tr>
                            <tr>
                                <td></td>
                                <td></td>
                                <td>

                                    <code>night</code> <em>(2100h)</em>
                                </td>
                            </tr>
                            <tr>
                                <td></td>
                                <td></td>
                                <td>
                                    <code>midnight</code> <em>(0000h)</em>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <h2 id="cheatsheet">Cheatsheet</h2>

                <div class="datagrid">
                    <table class="black">
                        <thead>
                            <tr>
                                <th width="200px">Command</th>
                                <th>Command Format</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Add Event</td>
                                <td><pre><span class="inputstart">&gt;&gt;</span> add <span>&lt;description&gt;</span> from <span>&lt;start_datetime&gt;</span> to <span>&lt;end_datetime&gt;</span> [daily/weekly/monthly/yearly] [#<span>&lt;tag&gt;</span>...]</pre></td>
                            </tr>
                            <tr>
                                <td>Add Task</td>
                                <td><pre><span class="inputstart">&gt;&gt;</span> add <span>&lt;description&gt;</span> [by <span>&lt;due_datetime&gt;</span>] [#<span>&lt;tag&gt;</span>...]</pre></td>
                            </tr>
                            <tr>
                                <td>Clear To-Do List</td>
                                <td><pre><span class="inputstart">&gt;&gt;</span> clear</pre></td>
                            </tr>
                            <tr>
                                <td>Delete To-Dos</td>
                                <td><pre><span class="inputstart">&gt;&gt;</span> delete <span>&lt;index&gt;</span>...</pre></td>
                            </tr>
                            <tr>
                                <td>Delete Time Constraint of To-Dos</td>
                                <td><pre><span class="inputstart">&gt;&gt;</span> delete <span>&lt;index&gt;</span>... time</pre></td>
                            </tr>
                            <tr>
                                <td>Delete Recurrence of Events</td>
                                <td><pre><span class="inputstart">&gt;&gt;</span> delete <span>&lt;index&gt;</span>... recurrence</pre></td>
                            </tr>
                            <tr>
                                <td>Delete Tags of To-Dos</td>
                                <td><pre><span class="inputstart">&gt;&gt;</span> delete <span>&lt;index&gt;</span>... tag</pre></td>
                            </tr>
                            <tr>
                                <td>Edit Event</td>
                                <td><pre><span class="inputstart">&gt;&gt;</span> edit <span>&lt;index&gt;</span> [<span>&lt;description&gt;</span>] [from <span>&lt;start_datetime&gt;</span> to <span>&lt;end_datetime&gt;</span> [daily/weekly/monthly/yearly]] [#<span>&lt;tag&gt;</span>...]</pre></td>
                            </tr>
                            <tr>