moralcode / classclock

ClassClock is a free, easy-to-use web app for K-12 schools that provides an at-a-glance view of the school schedule

ClassClock

What is ClassClock?

ClassClock is a web app to give students and teachers easy access to:

• current date and time
• daily schedules (You are on the Mon/Tues Schedule)
• the class period you are currently in (i.e. 2nd Period)
• a countdown until class is over
• the generic name of your next class (i.e. 3rd Period)

ClassClock is useful for:

• Teachers - to check how much teaching time is left in class
• Students - to remind themselves of where they need to be and when
• Parents - to see the optimal time to contact their student without interfering with instruction time
• Everyone - to have quick and easy access to varied schedules that may otherwise be complicated, confusing or hard to remember

Upcoming Features

Here are some features to look forward to in a future version:

• Support for multiple schools (currently only supports one)
• Detection of block (A/B) schedules
• Countdown to school breaks (winter break, spriing break, summer .etc)
• Support for custom schedules (assemblies, parades, combined schedules etc.)
• The ability to change what is displayed
• The ability for students to upload their schedules to get more detailed information such as teacher name and room number

How to install?

ClassClock is a web-based app that can be saved to your phone's home screen or bookmarked in your browser for easy access.

iOS

1. Navigate to ClassClock in Safari (not tested on other browsers)
2. Click the "Share" or "Action" button (it looks like a square with an arrow pointing up out of the top)
3. Click "Add to Home Screen" on the bottom row (you might have to scroll sideways to see it)
4. Click "Done" in the top corner of the screen to add it to your home screen.

Android

1. Navigate to ClassClock (instructions for Google Chrome)
2. Click the "Overflow" button on the top right of your screen (it looks like three vertical dots)
3. Click "Add to Home Screen" button in the menu (it's about 2/3 of the way down)
4. Click "Add" in the dialog box that pops up to add it to your home screen.

Developer setup

Environment Variables

REACT_APP_AUTH0_DOMAIN - the domain for the auth0 tenant to use (provided in application details)

REACT_APP_AUTH0_CLIENT_ID - the client ID for the auth0 application to connect to

REACT_APP_AUTH0_AUDIENCE - the auth0 audience (probably your API URL) to use

REACT_APP_SENTRY_DSN - if you want to use sentry for monititoring errors, provide your DSN value from the sentry app so ClassClock knows where to send error information

classclock's Issues

Port to a React/React Native app

Awesome idea and app!

How do you feel about porting this to a React app? Would be great to use the feature-set the ecosystem offers + the same components/architecture could be used to port to iOS/Android native applications via React Native

Log out button on admin page doesnt work

the "log out" button on the admin panel appears to not do anything according to the AuthProvider code. this should be fixed.

I also observed it trying to redierect to localhost:3000 when on the beta site, which should not happen

App icon not displaying on some devices

While the app does have an icon, never in the app itself is it used. this would be a great thing to fix in the future.

ClassClock time does not match between two devices

When comparing ClassClock's countdown between two devices, the times may not match. This is due to the fact that ClassClock uses the time of the device it is loaded on (using javascript's Date() function) and inconsistencies between the time settings of different devices may cause differences in the displayed time.

Temporary workaround: Because this issue is the result of differences between device time settings, making sure both devices time settings are set to "set time automatically" should mitigate this issue until a proper fix is available

Planned Fix: The ClassClock database already has a timezone field for storing the timezone that a school was created in. This could potentially be used to fetch the time from a network time server (the same ones that almost every device sets their time from) and adjusted to this timezone to allow ClassClock to show consistent countdown times for everyone.

With this new cross-device consistent time source a number of things can be done:

1. fix the countdown times so that they match across devices (duh)

2. alter the time that ClassClock displays at the top to also show this modified time

3. alternatively, DONT alter the time displayed at the top and display a message to users that the countdown time has been adjusted and that they should check their devices time settings

Feel free to leave comments or suggestions if you think this should be done differently

make backend domain name/location configurable

currently the frontend is hardcoded to use the api.classclock.app domain name for fetching schedule data.

this is a problem for people that want to host the app themselves on their own domain.

Implementation ideas: possibly use an env var or superadmin setting (future) or something

• Can ClassClock run without a domain? if so what should the default configuration be (maybe assume the API is on a specific port at the same location as the frontend)?
• What are the CORS rules? does the backend need to be on the same domain? The backend probably needs this too in order to give the right CORS exception data

Site uses local time instead of Unix time

When accessing the website in a timezone other than PST (Pacific Standard Time), the site incorrectly uses the local time.

Steps to Reproduce

1. Enable a VPN that allows you to appear in a different country/timezone.
2. Go to https://classclock.app/

How to Fix
Utilize Unix time rather than local time

Minutes until off

The "ends in" portion of the website is off by +1 min.
Classes always end when we still have a minute left according to the clock.

Layouts are broken and inconsistent

• layouts on schedule page and select school page are taking up the enitre page width
• settings page layout is surrounded in a div with auto margins so it looks fine
  • except the longest line of text sets the width (because auto widths) and if that text is dynamic (i.e. has bold on hover) the whole layout moves on hover
• the main page has no encapsulating div and everything is just auto-margin centered

ideally there would be a <Page> component or something to wrap each page's content to make layouts consistent (and provide a slightly cleaner way to handle the corner navigation buttons and other inter-page stuff)

[Feature Request] Add detection of block schedules

[ ] yes i have checked to make sure that there are no other feature requests for this idea that have already been submitted.

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

ClassClock displays "no school today" message after the school day is over

in this case the current time is ~10 minutes past the end of the last scheduled class period. it seems like theres a chance ClassClock is getting confused and thinks that there's no schedule for the day

Take another look at use of analytics in the app

Currently as a single-school app, there is a simple, privacy respecting, open source, selfhosted analytics instance being used to track pageviews and similar web metrics to help support/motivate development of the app.

This is currently hardcoded - not ideal for other schools who may have other preferences.

This issue is to track the topic of things like:

• allowing users to provide their own details about their own instances of analytics software
• allowing users to use other analytics software (plausible analytics, potentially something DIY and built in, etc)
• allowing some mechanism to forward some analytics to ClassClock maintainers to further motivate development (such as knowing how many users the app has in a way that also balances user privacy for people that care about that)

"Your next class period is" displays current day's first period instead of next day's first period

Describe the bug
"Your next class period is:" displays current day's first period instead of next day's first period

To Reproduce
Steps to reproduce the behavior:

1. Go to the homepage on finals schedule.
2. Look at the "your next class period" section.

Expected behavior
(On Wed, Jan 23rd)
Your next class period is A3 Final.

App is not currently fully AGPL compliant

In order to be AGPL compliant, the web app should link to this github repository somewhere on the site (probably at the bottom of the settings page somewhere) and include the hash of the commit that it was built from (adding the version number from package.json would also be nice).

This would probably work best for once the app has been Dockerized.

More info:
https://stackoverflow.com/questions/48391897/add-git-information-to-create-react-app

UI gets stuck on "Fetching..." screen if a previously-selected school is unavailable

Describe the bug
If a school and/or bell schedule gets deleted from the database, all users who had that schedule selected previously will be shown a screen that says "Fetching" with no apparent way out.

This can be worked around by manually navigating to the /select page and selecting a new school from that list.

To Reproduce
Steps to reproduce the behavior:

1. Create a school (and optionally also a schedule) in the database
2. open the ClassClock app in a fresh browser tab/window with browsing data cleared for the classclock site
3. manually delete the schedule (and optionally also the school) from the database and create a new one with a different id.

Expected behavior
The page should detect the 404 error for the school and/or the schedule and either show the user an error or send them back to the select school page automatically.

Blank screen displayed after browsing data cleared

Describe the bug
ClassClock displays a blank white screen after browsing data (specifically local storage) is cleared

To Reproduce
Steps to reproduce the behavior:

1. Go to classclock and select a school if you havent already
2. open inspect element to the "storage" tab
3. under "local" storage, delete all the data
4. Refresh classclock page. Observe error

Expected behavior
an error screen, or more ideally, ClassClock defaults to the select a school screen

Desktop (please complete the following information):

• OS: Kununtu
• Browser Librewolf

Additional context
SENTRY id: CLASSCLOCK-4

Consider using react-admin for a responsive admin page

https://github.com/marmelab/react-admin provides a responsive, react UI that is similar to the twitter settings page layout that I was thinking of using for the Admin panel. This may help make the admin page easier to use and honestly keeping the color changing background for the admin panel is not that important.

Since ClassClock is not really being actively maintained anymore, this is just here as an idea.

Might also need to figure out how to disable the default login page for react-admin and replace it with the Auth0 that ClassClock is using currently

[Feature Request] Support for announcements

having a way to announce things (like spirit days, or scheduled system maintainence) without changing the names of the schedules would be useful.

this could be fairly simple by setting up a database table with the date(s) the announcement should be in effect, and a message/severity (and possibly a filter to limit to a specific school or not)

Display name is unused

the display name field as entered into the admin panel is not actually being used in place of the schedule name on the frontend.

when creating a new schedule on the backend with these settings:

the web app shows the full name instead of "Example Day" like it should:

version: development

Cleanup, Test and Document

Due to a lack of free time to work on this during the school year, there is some work that needs to be done to get ClassClock into a state that's more friendly for outside contributions including:

• finish the current work happening on the development branch so that it can be merged to master and that branch can be deleted (this repo is still transitioning to the "github flow" model rather than "git flow")
• merge the unit-testing branch into development and write tests for a decent portion of the app
• create a docs folder where more general documentation (such as to document design decisions, how to set up the app and database, and overall app structure) can live
  • https://esdoc.org/???
• create some documentation on how newcomers can get started and contribute to Classclock, including where to find the link to the slack workspace (on the website, https://classclock.app)
• figure out what software is needed to compile the existing inline doc comments into a viewable page
• if there is a lack of inline doc comments, add them
• optional but useful: maybe make a small landing page (maybe https://docs.classclock.app or https://developer.classclock.app) to link to all these different documentation sources (including the barely-there API docs)
• use flask-migrate (i think thats the name) to take a snapshot of the current Database schema so that Future schema changes can be easily applied to databases created under this version of the app

[Current Class] ends in incorrect every minute

Expected: Class ending in 00:12:00
Actual: Class ending in 00:11:60

Admin Page improvements

• figure out why performance and UX makes things feel slow when duplicating schedule items
• figure out why performance is slow when fetching lots of school schedules
• make the duplication action more apparent in the UI by leaving the original event where it was. (Or putting it back and assigning another action to duplicate, like single click? Or right click? Shift click?)

Navigating directly to a page leads to a 404

To Reproduce
Steps to reproduce the behavior:

1. click this link to https://web.classclock.app/settings.html

Expected behavior
Either settings page should be visible if you have already selected a school or you should see a prompt to select a school.

Actual behavior
404 Error

this seems to be an issue with the redux-first routing model that classclock uses.

this card on the roadmap partly references this problem, but is also combined with the issue of needing to automate builds