codeforboston / communityconnect Goto Github PK
View Code? Open in Web Editor NEWLicense: MIT License
License: MIT License
We need to make sure the application looks and works similar to the normal application in a phone view. Fixing minor issues like being able to click the "Category" drop-down while viewing on a phone, could be a start.
Decrease the font size and spacing between each row
Goal is to surface more listings on the left column of the page so that users can view more within their search/filter. When the list grows, it's helpful to see more than 2-3 results on a single page.
After the user enables location, a search option should be available to see all health resources within a specific radius. This options allows users in between 2 communities to access whatever is closer
(copied from todo list tab on spreadsheet)
Currently, the category list is a drop down feature that only allows user to select 1 category to filter resources. It also requires users to refresh the page to select another category or view the entire list again. However, we should add boxes next to the resources so that a user can select 1 or more categories and then have the option to clear them to bring back the full resource list (see image below).
Finda Github- https://github.com/codeforboston/finda
This can be done towards the end of the project so we can see the actual usage of our cool product!
The category list should stay open until the user has selected a sufficient amount of health categories. For example, if a user wanted to select 3 options, they would have to re-click the Category list after making their first and second selection. This will also help for mobile devices once the Category list becomes clickable.
We should use the Enzyme library to perform regression test on the application. We could create test that make sure the project renders and our components are working correctly.
I think app.js is getting pretty long and will be hard to read for newcomers. Can we refactor this with some javascript structure standard that I'm not aware of?
In the database, there's a column that includes the services provided by each resource (Column I). Currently, that information is not displayed on the org pin when the pin is selected on the map. Information like Email (Column Q), Phone (Column R), and Social Media (Column V-X) should also be displayed. For the org card, we could have a [more...] option that would direct the user to the org pin that already has the full information.
Each org now as a key called id
.
If the URL contains an id (something like https://communityconnect.netlify.com?id=3
), set the state as though the user has searched by that orgs name & clicked the pin on the map.
It would make sense in the callsheets function to create a hash where the key is the org's id
and the value is the index of the org in the orgs
array. @microcat49 is doing something similar for lat & long, so talk to him or @galiat if you have any questions about this
related to #93
If we can use an API to show relevant T stations and bus routes along with giving users the option of viewing the best route using public transportation between their location and the location of the business/organization, then I think it will further increase access by removing transportation barriers for individuals in vulnerable situations.
At a meeting with Social Workers and a few of their clients, I saw that they were having trouble finding a place to start with the tool. Emphasizing filtering through the resources rather than the map and full list of resources would give users an easier place to start from. Similar to TripAdvisor.com
I think it would be helpful for users if along with the address of the location, we could add a distance in miles from the current user's location for each of our displayed result.
Rather than passing around haveCoords
, see value of currentPos
Found during code review.
If a resource is selected on the left side, then the map should show that pin with the box of information open above it. Conversely, when a pin on the map is selected, the left side of the page should display relevant information for that resource. Currently, the two sides of the screen are acting like 2 separate entities.
For example, the hotlines are not displaying a phone number right now.
(Note: not critical)
Inspired by
#81
it would be best if the map's defaultZoom & defaultCenter were computed based on the data we want to display rather than hard coded
I think having a home button or something similar on the top bar would be a great feature to have so that when someone is looking at information from the box of a selected resource, they can easily navigate back to where they started (original screen) without having to refresh the whole page.
Each org now as a key called id.
If the user is looking at 1 org update the URL in the browser, to look something like https://communityconnect.netlify.com?id=3
related to #92
Maybe as a followup task add something like this to the Org Card. I've never tried to do something & might be tricky, but worth quickly looking into.
https://stackoverflow.com/questions/3024745/cross-browser-bookmark-add-to-favorites-javascript
Yes or no questions that filter through all the resources to only display relevant to the users situation. Ex. A young man with no children with a low SES status should not have pins for WIC and breastfeeding clinics. Some questions could include: "Do you have children?", "Is English your first language?", "Have you ever experienced food or housing insecurity?"
If someone selects a resource from the list, then the box with the pin to its physical location should come up - this way an individual doesn't have to manually find the address in the map after scrolling through the list and seeing a resource they want to visit/learn more about.
Format those boxes to include the information from its row. A designated place for each row (ie. services provided, social media, comments, contact info, etc). Currently the box says "undefined" so maybe that is something to look at too!
We need to add comments to our code for all the new people who come in and start working on it. It would be really helpful as the code is growing with every PR. We can do this along with code refactoring.
We can start by adding comments to our important files like app.js and header.js.
For each resource listing, we can add an icon right next to the name of the organization so it's easy to see what type of resource it is. For example, if it's a park, the icon chosen can be a tree and if it's a farm, it can be represented it with a carrot or corn.
The goal is to easily differentiate this resource from other categories once we implement the free-text search input
Free icons/assets can be found here: https://fontawesome.com/
Login Form - username and password with forgot password/username option (see below - without the facebook, twitter, google, linkedin account option)
Login information will allow users to "favorite" certain resources to make them more accessible. This can be implemented by having a tab at the top of the web app. Currently, the category list is located on the top right of the web page. If we move the category list next to the resources themselves (similar to Finda - see below), this will free up the room at the top bar and to include user specific information.
Currently when you select multiple categories, the check box will show for what was selected, however the resource list only shows resources specific to the last category selected.
On mobile, the category function interferes with the search option and moves off the screen. Some reformatting needs to done so that the search bar and category drop down stay in place when using on a mobile device.
Would love for people with an eye for design to chime in. When a category is selected & we are filtering results, it would be handy for our user to know that a filter is in place & what that filter is.
How it currently looks is displayed below. Was thinking:
When multiple health resources have the same address, no information is shown when clicked on the cluster (goes from a blue cluster to yellow) at that point. It would be great to see a tiled list of all the resources available at the address in a similar fashion to the list on the left side of the screen.
Ex. 300 Ocean Avenue, Revere, MA 02151 has 10 health resources:
Expected behavior:
When accepting the browsers request to use location, the users current location should be loaded into the application and used when measuring the distance to organizations (as seen on the OrganizationCard components)
Actual behavior:
The distance shown on the OrganizationCard components is inaccurate.
I checked and all of the correct coordinates are getting fed into the getDistance function, so I think there is something wonky with the algorithm itself.
Before the recent header update, the "Community Connect - Revere" on the header was clickable and would refresh the page if a user wanted to start fresh after selecting multiple resources, categories, etc. This is no longer available. This could also be merged with #99 so that the logo is now the clickable option in the header.
On the top of the screen, a search bar that pulls from the Name (Column C) and Combined Address (Column M) so that a user can find a resource that they may already know of without having to go through the filtering process or scrolling down the list.
Expected behavior:
When clicking an organization on the map, the organizations sidebar should scroll to the selected organization.
Actual behavior:
The organizations sidebar is not effected by map clicks. When running locally the page an error is given.
An error is caused in the OrganizationCard component when trying to make this call:
this.refs.cardRef.scrollIntoView({block: "center", inline: "center"})
on line 17 of the OrganizationCard component.
It looks like <div ref="cardRef">
was recently removed from the JSX section of the OrganizationCard file and caused this to break, so I'm adding it back in.
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.