actosoft / buntiappfrontend Goto Github PK
View Code? Open in Web Editor NEWFrontend App for Taxi App
Frontend App for Taxi App
Using Adobe XD on Web artboard, design the UI of an admin panel.
The Admin Panel need to show a list view where the admin can see the news taxi requests.
The list view need to have the next columns:
1.- Usuario
2.- Localización
3.- Hora de solicitud
4.- Acciones (Aceptar / Declinar)
If you have more questions about this, you can ask me or @Inatedy
We'll use Boostrap 4 as CSS framework to this project. So you'll need to add it to the project. Read docs about installation https://getbootstrap.com/docs/4.0/getting-started/introduction/
When on row of the list view of request the action Aceptar is clicked, you'll need to open a modal. In this modal, you'll create a little form with an input to specify the time in minutes to indicate to the user how many time ir will need to wait. With a button, get this info and close the modal.
When the Web App is rendered, you need to show all the requests on the database, ordered by Date (Recently on the top). So you need yo handle this with jquery and Firebase. in this moment don't worry for design, when @Emily-Garcia finishes #3 you could go ahead with design
Read about the component available on Boostrap 4 and which could be the best option to show the requests. When you have been selected a Boostrap component, you can start to show the Firebase data into that component.
When the admin accepts a taxi request and he indicates the time in minutes of user waiting, you'll need to update the doc into the Firestore DB. The doc has this structure:
Latitud: number Longitude: number PaymentMethod: string User Reference: ref
Add the next attributes:
Accepted: Bool (true) TimestampAccepted: DateTime WaitingTime: number
Firebase handle to work with realtime data. Check the Firebase method to handle a function every time the database info change (CRUD)
We need to add Firebase to our project. The credential are available on Firebase Project
When the admin click on Rechazar action on a row of the listview of the taxi requests, show a confirm modal when the user need to confirm that action to perform it. Check on boostrap if exists a component to handle this in a pretty way, instead of use the classical Javascript version.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.