Timer

Electron-based gamification system for drive-trhough restaurants to improve perfomance.

Technologies

• Electron
• Electron-Forge
• MYQTT
• MySQL
• Bootstrap

Features

• ☁️ Getting data about cars from MQTT server.
• 📂 Storing dashboard configuration and data locally in MySQL database.
• 🔑 HTML templates for settings.
• ⌨️ Convenient onscreen keyboard.
• 📑 Reports for cars, settings and trends.
• 📋 Save Report as PDF and CSV.
• 🚗 Changing colors depending on goals!
• ✨ Friendly UI & UX and Has nice looking window.

Usage

• Clone the project from this repo to your local machine: run git clone https://github.com/rainbowbrained/Timer
• Open terminal and cd into the cloned folder, usually cd Timer.
• Run npm install to install dependencies, or run npm install --include=dev to install dev dependencies. Now it's ready to use for development.
• Run npm run start to run the app as desktop app.
• Run npm run package to bundle your app code together with the Electron binary.
• Run npm run make to create a distributable. This script runs electron-forge package automatically, and then uses packaged app folder to create a separate distributable for each configured maker.
  After the script runs, you should see an out folder containing both the distributable (out/make/...) and a folder containing the packaged application code (out/timer3-linux-x64 or similar). See more here.

Project sructure

• node_modules appears after installing dependecies.
• out appears after packaging an app.
• package-lock.json and package.json - default files, see how to use them here here.
• src - main folder with html, css and js files.
  • main.js - the entry point of application. This script controls the main process: connects and communicates with the server, creates a webpage, connects to data base and sends emails.
  • preload.js - this script is used to provide secure communication between other scripts, main and the whole Node.js APIs by using ContextBridge and IPC. It has the same sandbox as a Chrome extension. Read more about preload here.
  • server_config.json - connection settings, contains info about MQTT server.
  • database_config.json - mySQL database settings.
  • settings_data - dashboard configuration. This files should be fetched from the server, but in demo version they are stored locally.
  • templates - folder with most html/css/js files and packages for rendering. See more here.

├── node_modules
├── out
├── package.json
├── package-lock.json
├── README.md
└── src
    ├── database_config.json
    ├── main.js
    ├── preload.js
    ├── renderer.js
    ├── server_config.json
    ├── settings_data
    │   ├── dashboard_elements.json
    │   ├── dashboard.json
    │   └── goals.json
    └── templates
        ├── assets
        │   ├── css
        │   │   ├── dashboard_settings.css
        │   │   ├── dashboard_style.css
        │   │   ├── images 
        │   │   │   └── ...
        │   │   ├── keyboardstyle.css
        │   │   ├── style.css 
        │   ├── js
        │   │   ├── dashboard_handler.js
        │   │   ├── dashboard.js
        │   │   ├── dashboard_settings.js
        │   │   ├── keyboard.js
        │   │   ├── main.js
        │   │   ├── reports_handler.js
        │   │   ├── script_cars.js
        │   │   ├──  widgets.js
        │   │   └── init-scripts 
        │   │       └── ...
        │   └── scss 
        │       └── ...
        ├── cardetectors-settings.html
        ├── dashboard.html
        ├── dashboard-settings.html
        ├── detectors-settings.html
        ├── network-settings.html
        ├── reports-settings.html
        ├── security-settings.html
        ├── store-settings.html
        ├── system-settings.html
        └── vendors
            ├── animate.css 
            ├── bootstrap  
            ...

Screenshots

Examples of keyboard usage. Each type of keyboard appears depending on the type of input field.

Examples of dashboard settings. Each panel is clickable, the field below appears for each panel individually.