skycatch / acopio-ui Goto Github PK
View Code? Open in Web Editor NEWUI para centros de acopio
Home Page: https://acopio.sismomexico.org
UI para centros de acopio
Home Page: https://acopio.sismomexico.org
Each acopio
has products
and each product
has a fechaDeActualizacion
string. Surface the latest fechaDeActualización
on AcopioCard
If needed, use date-fns
to sort the dates.
La primer página de la app muestra una lista de centros de acopio cerca de donde estás. Pero si no encuentra ninguno cercano te da el mensaje "No encontramos centros de acopio". Si yo como usuario novato entro y lo primero que me sale es eso, pienso que es un error porque parece que no hubiera centros de acopio en ningún lado. Así que hay que modificar el texto para que diga "No encontramos centros de acopio cerca de ti".
Once you create a center, you should be able to add contacts.
The endpoint to work with is /acopios/{acopio-id}/contactos (it should already support POST/PUT/)
A contact object would end up looking like:
{ "nombre": "Juan Perez", "email": "[email protected]", "twitter": "@blah", "facebook": "fb.com/blah", "telefono": "55 2561 9561", "id": "59c4c11400220a53359e0983", "acopioId": "59c4c11400220a53359e0982" }
id: being the id of the contact (auto-generated) and acopioId being the id of the center in question.
Some centers only provide an email, others a facebook page, others the name of a person and a phone. Therefore, all fields are optional but we need at least one of the fields to be filled.
This is more of a nice to have, but we should be able to translate between Spanish and English for the site.
No estamos usándolo. Quitarlo de dependencias y scripts
We need to display a marker on the map for each collection center. The markers should also be in clusters since there may be quite a few centers in a relatively small area. They will need to be clickable (especially on mobile); clicking a marker should bring up a card with the center's information on it, but building the card will be a separate task.
Import Material UI for quick development of nicer forms
Implement a form so that users can create new "Centro de acopio".
Info: Name of the center, address.
The user will be able to geolocate the map on themselves. We should automatically find the closest center to them and display its card. This works roughly in tandem with #13 Geolocate user on the map
.
Es muy probable que los centros de acopio actualizados más recientemente sean los que necesitan más ayuda. Tenemos que ordenar siempre los centros de acopio por fecha de última actualización.
related: #72
If we're unable to get the user's geolocation, the best UX is to present a useful list of featured centers. Decide on a list of 5-10 centers to feature.
https://github.com/Skycatch/acopio-api
Should have CRUD functionality for:
Add/edit the needs (productos) for a center.
/admin/centers
<- Agregar bulk delete aquí.
El componente de la tabla ya trae opcion para checkboxes
La API regresa cosas como "voluntarios para relevos en Alvaro Obregon 286". Necesidades es una mejor descripción.
Mostrar al usuario necesidades y en la medida de lo posible cambiar el código.
discusión: https://codeandomexico.slack.com/archives/C76TGK6AG/p1506214440000053
Usar CardActions
para enlazar al telefono, twitter, y direcciones via Google Maps.
Al buscar por producto, hay teléfonos que por default te ponen mayúscula la primer letra. Entonces si tecleas 'agua' sale 'Agua' y la búsqueda no regresa resultados (porque todo está lower case en la api).
The user should be able to press a button to center the map on their current location.
Mar (slack) y yo estamos trabajando en el UI (diseño y estilos)
Use the AppBar
component for Layout component. Ideally it will be positioned as a sticky header
Queremos una nueva homepage que muestre resultados y permita al usuario navegar rápidamente a lo que quiere. La pantalla debería de mostrar
AcopioCard
s con los centros de acopio actualizados más recientementeAcopioCard
s con los productos necesitados más recientescurrentPosition
), mostrar AcopioCard
s 5 centros de acopio más cercanos, de lo contrario, mostrar un mensaje que lo invite a activar su posicionamiento.Para puntos extras de karma, los AcopioCards pueden ser mostrados en un carrusel.
cc @clasig
Actualmente hay 3 vistas con lista
y una vista Map.
La idea de esta es tener sólo las 3 vistas de Lista, y en cada una un Floating Action Button que permita mostrar la misma información de la lista en el Mapa.
Adicionalmente, quitar de la navegación el botón de mapa.
According to mockups
Change the loader in withLoading
to a RefreshIndicator
File https://github.com/Skycatch/acopio-ui/blob/develop/src/components/withLoading.js
Necesitamos una vista para buscar centros de acopio por producto.
APIs a usar:
api.getProductosByPartialName
Componentes
We should be able to search and filter the centers that appear on the map based on products that they need. This will help facilitate the movement of goods from centers with extra of an item to centers that need the item. It might be good to filter based on what the centers have as well to allow people who need certain items to find the closest center with that item.
"Quiero ayudar" (I want to help) => Opens the detail bar with a prompt to search by product needed
Necesitamos una vista más completa del centro de acopio a la cual se pueda acceder desde AcopioCard
Debe de tener una ruta
/acopios/:id
Y debe de cargar los datos necesarios para que sea compartible via URL
Esta vista debe de tener
Right now there's a commented out test function in App.js
that makes requests to the endpoints of the Acopio API. We should remove this and write test cases for interacting with each endpoint.
When you click a marker to bring up a center's details, the map should center on that marker. It would be nice if the active marker also displayed differently than the other markers (maybe a different color).
/admin/centers
En esa lista hay que agregar paginación.
We need further definition on what the API is expecting before we can implement this. I believe the API is using auth0 so we may be able to get away with using their built in UI, maybe just customized with the project logo.
Once a user has geolocated themselves and selects a center, we should provide them with the option to get directions to the center. This can be achieved with Mapbox's directions API.
Se necesita limpiar el código del mapa para que sea útil
withCurrentLocation
Necesitamos una mejor forma de navegación. Actualmente tenemos
Tambien estamos desarrollando
El entregable de este PR crea navegación usando el componente Tabs
This might have to be one of the Skycatch team members @chubas @javierbyte or myself
Mapbox GL will be used to render a map of collection centers. Expect the API to return lat/lng coordinates for each center.
A full page map has disadvantages like long load time and has issues being displayed in mobile phones. We will make a new proposal to see how it works and decide what to do.
Yesterday we changed the url of the endpoint, and eventually it might end up being somewhere else under the sismomexico.org domain, so it would be nice to be able to change that value quickly and it not be hardcoded in the calls.
Al iniciar la app, el usuario debería de ver una lista limitada de centros (20 items). En esta pantalla el usuario puede explorar y permitir el acceso a geolocalización.
Cuando se permite la geolocalización, se debe de cambiar la información por los centros más cercanos.
Current UI has some usability issues.
Proposal is to
Link to discussion: https://codeandomexico.slack.com/messages/C76TGK6AG/convo/C76TGK6AG-1506134554.000011/
We need a new Index screen that shows all the acopios. We can use the api.getAcopios()
call and display the resulting data on an AcopioList
This screen will be very similar to Supply
but without geolocation
Sort the list of products alphabetically.
Relevant file: https://github.com/Skycatch/acopio-ui/blob/develop/src/components/AcopioCard.js
REACT_APP_NAME
environment variable to save app nameA 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.