Code Monkey home page Code Monkey logo

abhishekpatel946 / smart-vehicle-fleet-manager Goto Github PK

View Code? Open in Web Editor NEW
20.0 4.0 15.0 30.31 MB

App to track vehicle over-speeding, fuel theft alert, accident alert, speed log, fuel log, maintenance log, fuel refill log and displayed it on a dashboard in form of tables, charts, and graphs...

Home Page: https://smart-vehicle-fleet-manager.web.app/

License: MIT License

HTML 5.85% CSS 5.73% JavaScript 87.56% Dockerfile 0.87%
react firebase-auth iot-device mdbreact vehicle forks-shield contributors-shield issues-shield stars-shield dashboard

smart-vehicle-fleet-manager's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

smart-vehicle-fleet-manager's Issues

build: CI-CD Pipeline

CICD using GitHub action and circleCI.

  • Build GitHub Actions to automate integration.
  • Every PR's and Merge check for integration test or dependencies failure.
  • Build the CD pipeline using circleCI for automating the deployment processes.

handle the Scalability

  • manage the no. of the user's in terms of auth.

  • manage the no. of the vehicles for each unique user.

  • switch btw vehicle through the dashboard directly.

  • manage the DB to handling the relationship btw the user & its vehicle.

  • fetch data without page refreshing & in realTime

ReDesign a new DB schema for scale

All the points are important for the new schema

  • create a Data_Record entire collection.

  • its subdocuments by RegID and its fields like vehicleID, vehicleNAME.

  • each vehicle has particular its own collection of records of sensor data may be.

  • each collection it will look like same as previously I design for collection -> document -> field.

  • And create a service module.

when the new vehicle adds through the dashboard the code will run like these.
1. vehicle added into the DB as a document with their respective fields.
2. if the vehicle added & then the dummy collection will be created through the script for no reason just the avoid complexity and inconsistency.

add Test Cases

Add test cases for the dashboard

  • It could be client-side or server-side.

  • also test fetching the data from the firestore basically firestore DB testing.

  • design more test cases are per more feature added in future.

FirebaseError: Installations: Missing App configuration value: "apiKey" (installations/missing-app-config-values).

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

  1. Go to 'https://smart-vehicle-fleet-manager.web.app/'
  2. See an error in the console

Screenshots

It looks like you're using the development build of the Firebase JS SDK.
When deploying Firebase apps to production, it is advisable to only import
the individual SDK components you intend to use.

For the module builds, these are available in the following manner
(replace <PACKAGE> with the name of a component - i.e. auth, database, etc):

CommonJS Modules:
const firebase = require('firebase/app');
require('firebase/<PACKAGE>');

ES Modules:
import firebase from 'firebase/app';
import 'firebase/<PACKAGE>';

Typescript:
import * as firebase from 'firebase/app';
import 'firebase/<PACKAGE>';
Uncaught FirebaseError: Installations: Missing App configuration value: "apiKey" (installations/missing-app-config-values).
    at J (extract-app-config.ts:54)
    at extract-app-config.ts:41
    at e.instanceFactory (index.ts:48)
    at e.getOrInitializeService (provider.ts:194)
    at e.getImmediate (provider.ts:95)
    at e.instanceFactory (index.ts:61)
    at e.getOrInitializeService (provider.ts:194)
    at e.getImmediate (provider.ts:95)
    at e._getService (firebaseApp.ts:127)
    at e.<computed> [as performance] (firebaseNamespaceCore.ts:228)

Desktop (please complete the following information):

  • OS: [Linux]
  • Browser [Chrome]
  • Version [92.0.4515.107 (Official Build) (64-bit)]

Additional context
Add any other context about the problem here.

add ModuleStatus indicator

Module Status indicator

  • Capture the status signal sent by the module.
  • Process that signal and turns into the Active or Inactive state.
  • Display on top of the dashboard for users

add Accident alert through notification

Accident Alert Notification

  • Capture newly added data from firestore.
  • Add data into the accident_log.
  • Notify the user through snakbar when notification is new.
  • In case of mark as read do not toggle the snakbar pop up.

Render the data on the Dashboard

Data fetch successfully from the firestore, but the problem is that put the data_values in pagination table and most recent data_values display using charts & widgets & also improve the overall performance of application

Note:- Please refer to the CONTRIBUTE.md for a detailed description of the problem.

add | modify, some CSS for enhancement

Add some CSS for making a dynamic dashboard

  • added your own custom CSS.

  • use MDBootsrap, MaterialUI or React-Bootstrap.

  • using [dot]class CSS if you write your own.

  • comments are present for more readable code

  • tested at your side.

NOTE- if you send a PR for this issue, make sure tick all the checkbox if you do it code for as requested or unchecked if not

add New Vehicle module

New Vehicle addition section

  • add new vehicle using a simple GUI.

  • added in DB vehicle

  • & connect with DB.

make it more RealTime

  1. Instantly fetch data from Firestore and render.
  2. Without refreshing quickly databind with UI.
  3. Suggestion:- Write an efficient listener for connectivity.

manual maintenance module

  • create a UI for the maintenance component.

  • establish a connection with the Firestore.

  • store data into the docs & check validation at client side.

Verification at registation stage

Update in Login page

  • delete the signup module.

  • manual register user or org by sysadmin.

  • only register user logged in into system but via third way is not possible.

  • all the access level distribution is under the sysadmin only.

bug arrise in b0606b54d0e7abde5676ba4914b5d339b6c53618

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

  1. Go to navigation panel
  2. Click on 'all navigation buttons'
  3. See all buttons are not working due to preventDeafault.

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: [e.g. Mint20.1]
  • Browser [e.g. chrome]
  • Version [e.g. 89]

Smartphone (please complete the following information):

  • Device: [e.g. iPhone6]
  • OS: [e.g. iOS8.1]
  • Browser [e.g. stock browser, safari]
  • Version [e.g. 22]

Additional context
Add any other context about the problem here.

Update the README.md file

Change in README.md file*

Description

    • describe the problem statement
    • how to we solve the probelm

Road Map

    • create our project folder structure

Installation

    • prerequisite
    • installation guide

Contribution

    • contribution guidelines
    • define rules for contribution

Documentation: How to get a login for demo page https://smart-vehicle-fleet-manager.web.app/

I assume that https://smart-vehicle-fleet-manager.web.app/ is a demo application, that a new user can see and test the features for this project.
Unfortunately there is no documentation how to login

  • are there demo credentials?
  • where is it possible to register a demo account?

as developer I tried to build and run the docker but that fails at step 9

RUN npm run build

I guess freezing the versions at the previous steps would be good

RUN npm install npm@latest
RUN npm install react-scripts@latest

Fix the logo

Put the logo

  • inside the navbar before the name "Smart Vehicle Fleet Manager".

make sure the size of the logo is doesn't break the navbar.

logo is always before the name "Smart Vehicle Fleet Manager".

keep it simple and float at the left side of the navbar.

@MuskanKabir @AshutoshMourya

Fetch data from Firestrore and visualize

If you want to contribute in then you must be read first CONTRIBUTE.md

Problem will be described in CONTRIBUTE.md

Overview

Fetching data from firestore database and render in-app.

There are 2 things:-

  • first the chart for updated with real-time data
  • second will be a log table to keep track of each record and display

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.