ELM Times - Single Page Prayer Times Web App

This is a simple single page prayer times web app built using Preact and Webpack. It displays the prayer times for a specific mosque including the time, date, current weather (at the mosque's location) and latest video from the mosque's YouTube channel.

Using ELM Times for your own mosque

Feel free to use the code for your own mosque by following the steps below.

Installation

1. Download the code
2. Install packages
3. Configure details
4. Add assets
5. Testing
6. Build it

1. Download the code

Get the ELM Times codebase by cloning this repo or downloading the zip and extracting it.

2. Install packages

Go to the Node.js website and download the LTS package. Once downloaded, run the installer and you're done. Open up command prompt (Windows) or terminal (OSX), navigate to the project folder and then run:

npm install -g yarn

Then install all the packages by running:

yarn

3. Configure details

Edit the config.json file and change the options accordingly (see file for examples).

4. Add assets

All the images live in subdirectories inside the root assets folder:

Timetables

The timetables should go into the assets/timetables folder and should meet the following requirements:

1. Should be in a comma delimited CSV format.
2. Should contain all the times for the year.
3. Should have a filename of the year itself i.e. 2017.csv.
4. Should not contain a header row i.e. Month, Date, Fajr Start etc.
5. Should be in 12 hour format i.e. 2.36.
6. Should contain rows of prayer times in the following order:

Month, Date, Fajr Start Time, Fajr Jamaah Time, Sunrise Time, Dhuhr Start Time, Dhuhr Jamaah Time, Asr Start Time (1st Mihtl), Asr Start Time (2nd Mithl), Asr Jamaah Time, Maghrib Start Time, Maghrib Jamaah Time, Isha Start Time, Isha Jamaah Time

Example:

2,9,5.45,6.15,7.22,12.20,12.45,2.38,3.16,3.45,5.08,5.13,6.39,7.15

5. Test the code

After configuring the app and adding all the assets you're good to go however I suggest running some tests to see if everything's in working order. See below for more information:

1. Checks if your config.json file contains all the required options
2. Checks if your timetable CSV file exists and contains all the rows

You can run all the tests by running:

yarn run test

6. Build the app

The final step is to actually build the app, go ahead and do that by running:

yarn run build

If you just want to transfer the static files to a hosting server you'll need the following files after your build:

/assets
/css
/fonts
/img
/js
config.json
favicon.ico
index.html

Development

If you want to contribute to this repo you'll want to run the dev server which you can do by running:

yarn run dev

You can then visit http://localhost:8080/.

Contributing

1. Fork it!
2. Create your feature/hotfix branch: git checkout -b feature/my-super-feature
3. Commit your changes: git commit -m "Added some feature"
4. Push to the branch: git push origin feature/my-super-feature
5. Submit a pull request

License

MIT License