Time Tracker

Clarification (Meneely sections only)
We are doing Time Tracker and Worm Counter for our client projects.

Overview

For this project, you will build a web applications using HTML, CSS, Javascript, and React.js for tracking billable hours. Inspired by apps like Clockify, the basic idea is to have a start-and-stop timer that keeps track of entries according to “projects”, and aggregates that information in various ways in real time.

Client 0

Client Setup: Your first web page

Overview

Please use the branch client-0-dev and the tag client-0 for submission.

This initial assignment will introduce you to the basics of HTML and CSS. In this initial assignment, you will not need a CSS file (though you will, and if you want to start one now go head). Instead, use a <style> tag in your <head> section to specify style.

Setup

Locate your project in your group (Named client-group-x) in gitlab, and clone the project Once you clone this project, create a folder named public. All your code for this assignment will go in this folder. Inside public/, do the following: Create a file, and name it index.html - Your web markup (html) will go in this file (You can use the template below to get started)

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Web Assignment 0</title>
  <meta name="description" content="First web assignment">
  <meta name="author" content="student name">
</head>
<body>
</body>
</html>

In the root directory, create a .gitlab-ci.yml file with this content:

image:
  name: node:18 #No special docker image.  Standard nodejs image from dockerhub
cache:
  paths:
  - node_modules/
before_script:
  - yarn install
  - node --version
pages:
  stage: deploy
  script:
    - ls -lFa public
  artifacts:
    paths:
    - public

This CI file will publish your webpage (index.html) to the gitlab web server.

You can find the URL (to check your webpage) on the Deploy > Pages link in your gitlab settings

Requirements

You will implement the following controls and behaviour for your webpage (index.html) Set the default font to ‘Segoe UI’ Add a title using the <h1> tag to the top of the page with the following text ‘SWEN-344 Web Assignment 0’

  • Set the font to Bold, Verdana, with a size of 36px (Use the style property) and centre the title.

Add a sub-heading with the <h2> tag.

  • The text content should be ‘Section xx’, where ‘xx’ is your section number. Set the font to “Impact”
  • Center the text.

Add a dropdown list control with the following values:

  • Lorem
  • Ipsum
  • Dolor

Use the <select> tag with those options. There should also be a default selection with an empty value (blank).

Using the ul and li elements, make a horizontal list of six rectangles.

  • Each rectangle should be least 5em high.
  • Each rectangle will have a number in large font, with smaller text below it explaining what it is.
  • Use a flex to make these spread evenly across one line.
  • No bullets should be shown
  • Make every other item in your list of number have a different background color.
  • Two of your rectangles should also have a button that stretches to the full size of the rectangle. The number and subtitle should still be in the button too.

Here’s an example of a solution:

../meneely-example-0.png

Sample Page-0

Grading

Grading: 10 points total Correct implemention for each of the controls and styles Web Page and Actions:

  • Lab day: 2 points
  • CI working: 2 points
  • Title & Headings: 2 points
  • Dropdown list: 2 points
  • Layout & Alignment: 2

Time Tracker Specifics

No project specifics for this iteration.

Client 1: Initial HTML+CSS+JS

Your branch name should be client1-dev. When you have merged, the tag should be client1.

In this iteration, we want to make a minimal version of our UI with some basic dynamic functionality.

A few things that everyone needs to pay attention to:

  • Keep your app usable on both mobile and desktop situations. Use the Dev Tools to simulate this as shown in class.
  • Avoid using style attributes; favor using CSS wherever possible

Grading

Points: 50 points

  • (10 points) Works on the CI and deployed to GitLab Pages
  • (10 points) UI displays every part requested
  • (20 points) Dynamic functionality works as expected
  • (10 points) Refactored to use CSS instead of embedded styles

Time Tracker Specifics

Your time tracker should include the following:

  • In large font that the client is “John Doe, Inc”
  • A large button
    • Initially, it says “Start”
    • When you click it, the color changes and the text changes to “Stop” (i.e. we’re “on the clock”)
    • When “Stop” is pressed, a new entry is added (see below)
  • A clock that shows hours, minutes, and seconds since the last time “Start” was pressed.
    • By default, the clock shows “00:00:00” before Start is pressed
    • Once Start is pressed, the clock should update live. Tip: use setInverval() to accomplish this.
    • The clock should also show when the start time was, but in smaller text
  • An area should show “Entries”,
    • By default empty
    • An “Entry” shows the client, project, start time, stop time, and time elapsed.
    • Entries should be in reverse-chronological order (i.e. newest on top by start time)

Client 2: Refactor to React

Your branch name should be client2-dev. When you have merged, the tag should be client2.

Now you have seen what it looks like to have a tiny bit of dynamic functionality on a webpage, let’s start thinking bigger. Modern websites that have a lot of client-side functionality use component-based frameworks. We’ll be using React.js, which is one of the most popular ones out there today.

Our goal with this iteration is to achieve feature parity, perhaps with some improvements along the way. Your app will hopefully look and act nearly exactly as before, but will be easier to build upon for future features.

Getting Started with React

Everyone must do this part, even if you think you are familiar with React.js.

  1. Do our React Setup instructions. Be sure to review the walkthrough explanation of all the files.
  2. Review the resources available to you on the Getting Started with React. We have found these resources to be very well-written and helpful.
  3. Do ONE of these:
  • The Step-by-Step Guide. It’s longer, but highly useful. Go through these chapters: Describing the UI, Adding Interactivity, and Managing State (especially the concept of “Lifting State Up”). The last chapter, Escape Hatches isn’t critical to what we’re doing, but worth a skim. OR
  • The Tic Tac Toe tutorial that shows everything together. Feel free to do this tutorial instead, and commit your code if you do (again, into a separate folder). Note: we have found that this tutorial, while more “hands on”, is a bit more difficult. Everyone’s learning style is different, but we have found students end up less confused when they do the other tutorial.

Commit your tutorial code to your repository, to the branch client2-dev into a separate folder.

  • i.e. create a sub-folder in your repo called ‘react-guide’, and place your files for the tutorial you used in there.

Porting to React

Once you’ve gotten set up and done the tutorials, let’s do the following, in this order:

  1. Decide what your app’s state will look like. This is the minimum amount of data that needs to be maintained to represent what the app tracks at any given time. Define your intitial state in your top-level component (e.g. App, or whatever you want to rename yours to). Consider which other components need their own state. Minimize the complexity of state management, but make sure you make components as independent as possible so you don’t always rely on a single ‘master’ object. This is the basics of good O-O design.
  2. Create component classes (or functions) to represent elements of your UI. Put each component in a separate file.
  3. Next, make the render method for each component. Hard-code all your numbers first. Just get the JSX working so the site looks the same.
  4. Next, pass the state from your top-level component to the properties of the child components. Make the hard-coded aspects of your UI dynamic based on the state/properties of the component. Again, aim for the UI to look the same way as you do this.
  5. Finally, figure out your event listeners. The tic-tac-toe tutorial mentioned earlier is a useful reference on the proper way to pass around event listeners.

Grading Client2

Points: 50 points

  • (10 points) Completed the setup instructions and the React tutorials.
  • (10 points) Works on the CI and deployed to GitLab Pages
  • (20 points) Refactored to React components
  • (5 points) Proper use of props for passing data to components
  • (5 points) Proper use of state for updating dynamic elements

Time Tracker Specifics

No project specifics this time around. Reaching feature parity is challenging enough!

However! Here are some recommendations:

  • The internet

Client 3: Feature Iteration

In this iteration, we’re looking for new features that involve more interconnected components.

Time Tracker Specifics

  • When the time entries go beyond five entries, hide the rest through a “show more/show less” button
  • Add buttons for “+5 minutes” and “-5 minutes” that will set the start time to five minutes earlier for +5 and five minutes later for -5.
  • Add an “Edit” button to the Entries area:
    • When pressed, it makes the project, client, start, and stop fields editable inputs, as well as a “Delete” button for each entry
    • The “Edit” button becomes “Save”. When Save is pressed, the area goes back to its original state with any new changes to the inputs
  • Add the ability to view and edit your Clients.
    • You should be able to add new clients
    • Change the current client at any time
    • Show a list of your clients with the total number of hours for each client - updated live if we’re “on the clock”

Grading

Grading

  • (10) Show/hide functionality
  • (10) +/- 5 minutes functionality
  • (10) Edit entries
  • (10) Edit clients
  • (10) Maintainable use of state, props and other React mechanisms.
  • (10) Builds and deploy on CI and submitted properly

Client 4: Full stack

It’s time to become a full-stack web engineer! In this iteration, we’re going to integrate everything from the class together. Using the setup instructions for the RESTful project, add a Flask server that also connects to a PostgreSQL database. Our goal here is to do a minimal feature - to show how everything fits together.

A few notes:

  • Your client should still be functional in the absence of the server
  • We covered the fetch() Javascript method in an earlier lecture. Be sure to review how to use that for GET and POST requests, to your RESTful endpoint
  • Also note: we will be unable to use GitLab pages for this feature, so we will be grading this locally.

Time Tracker Specifics

We want to persist the “start time” value of the timer. You’ll need to:

  • Store the start time in a database table. Make it nullable to represent “not started”.
  • Have DB methods to get and put the start time from the database
  • Have a RESTful endpoint for to get and put the start time
  • When the app starts, make a fetch() to the RESTful API for the start time. If it’s empty, the time has not started. If it has a time, load that into your app.
  • When you change the start time via start, +/- 5 minutes, etc. update it at the database.

The ultimate test: start the timer, then close the browser, close the React server, close the Flask server. Then, start the Flask and React servers again, and open the browser - and the timer is still going without missing anything!

Note For the purposes of this assignment, you can have a hard-coded primary key of your start time, since you’ll only ever have one start time. The goal is to keep it simple!