Code Monkey home page Code Monkey logo

crisiscleanup / crisiscleanup-3-web Goto Github PK

View Code? Open in Web Editor NEW
18.0 11.0 7.0 32.26 MB

[OLD] Crisis Cleanup Version 3 Web Application based on Vue 2. This version was launched March 27, 2020 and retired March 10, 2023 when it was superseded by a Vue 3 version.

Home Page: https://crisiscleanup.org

License: Apache License 2.0

JavaScript 11.19% HTML 1.24% Vue 74.56% CSS 0.01% Dockerfile 0.14% Handlebars 3.99% SCSS 0.06% Shell 0.09% TypeScript 8.73%
crisis-cleanup disaster coordination collaboration volunteer disaster-relief gis

crisiscleanup-3-web's Introduction

Crisis Cleanup

Crisis Cleanup is a collaboratative disaster relief platform that connects relief organization volunteers with people who need help. The Crisis Cleanup platform has been used to connected 631,620 volunteers from 1,919 organizations with 128,080 households in 55 states/provinces and 157 disasters in 7 countries; a new disaster every two weeks.

Crisis Cleanup works best in a collaborative environment where multiple voluntary organizations and agencies work together and coordinate efforts. Because these organizations do not take orders from one another, Crisis Cleanup is designed to facilitate Collaborative Accountability models of inter-agency interaction, rather than command-and-control operations, or or heirarchical accountability models of interaction.

Other Project Stats (As of 2020-10-17)

  • 25%: Increase in volunteer efficiency through re-engagement and elimination of time spent on travel, coordination, collaboration, and management.
  • 32,020: Households that could not have been helped without Crisis Cleanup.
  • 7.7 Million: Number of volunteer hours facilitated.
  • 1,920,000: Volunteer hours that would have otherwise been wasted in management, travel, and overhead without Crisis Cleanup.
  • $733.2 Million: Minimum total market value of services to survivors.
  • $1,161: Value of each cleanup volunteer to his/her community.
  • $183.3 Million: Market value of services to survivors that would have otherwise been wasted in travel, management, overhead, and standing in lines.
  • $60,839: Money Crisis Cleanup has saved survivors every single day since July 18, 2012.
  • $9,052: Average commercial value of service to each homeowner.
  • $157: Return on investment to survivors, for every $1 invested in Crisis Cleanup. How we calculate these statistics: http://blog.crisiscleanup.org/2017/10/how-we-calculate-value-of-services.html

Contributing

To preserve our ability to provide open source humanitarian disaster software, all contributions are subject to the terms of the relevant Contributor License Agreement (CLA) downloadable at crisiscleanup.org/contributions.

Please read CONTRIBUTING.md for important details.

Getting Started

Project Setup

Clone the repository to your machine and install the dependencies via:

 $ git clone https://github.com/CrisisCleanup/crisiscleanup-3-web.git
 $ cd ./crisiscleanup-3-web
 $ yarn install

Configuration

To enable all of Crisis Cleanup's features, you must create and populate a .env file.

A sample of what this should look like can be found here.

Running Locally

When modifying Crisis Cleanup, you can begin serving it via:

  $ yarn serve-dev
  $ sensible-browser http://localhost:8080 # defaults to port 8080

You can also serve the site via a docker service:

 $ docker-compose build
 $ docker-compose up dev # or prod for production

This will enable hot module reloading among other developer tools to aid you.

To preview a production build locally, execute:

 $ yarn serve
 $ sensible-browser http://localhost:8080 # default port

This will enable the code optimizations that would be present in a live environment.

Finally, you can compile a production-ready, minified version via:

  $ yarn build
  $ npx http-server ./dist
  $ sensible-browser http://localhost:8080

Testing

For unit tests, Crisis Cleanup uses Jest. You can run the full test suite via:

  $ yarn test:unit

For end-to-end testing, Cypress is utilized. You can run all e2e specs via:

  $ yarn serve
  $ yarn test:e2e  # or test:e2e:hl to run headlessly

Any recorded e2e test sessions can be found at: http://cypress.crisiscleanup.io

Linting

Utilizing prettier and ESLint, CrisisCleanup enforces strict code style guidelines.

You can automagically format your code to comply with:

  $ yarn format  # executes eslint --fix and prettier --write

Storybook

We use Storybook for building our components in isolation and for documentation.

You can run our storybook locally and add additional ones via:

  $ yarn storybook
  $ sensible-browser http://localhost:6006 # port defaults to 6006

The live storybook can be found at: https://storybook.crisiscleanup.io

crisiscleanup-3-web's People

Stargazers

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

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

crisiscleanup-3-web's Issues

Design Print Functionality and Print Format

When a user clicks the Print icon from the Case view/edit feature, the following should happen:

  • If the case(s) IS NOT claimed or reported by the user's organization, then an modal alert appears: "You must claim this case before you may send it to others. Claim now? [Yes] [No]"
    • If [Yes], claim the case for the user's organization and continue. Otherwise, return to screen.
  • If the case(s) IS claimed or reported by the user's organization:
    • Allow user to enter one or more email addresses.
    • As the user types, the address book filters based upon name cell phone, or email. (Issue CrisisCleanup/old-crisiscleanup-3-web#31 )
    • Create a PDF file using the Print Template (Issue CrisisCleanup/old-crisiscleanup-3-web#32 ) containing all selected cases, sorted by Case Number.
    • User clicks "Send/Download". A PDF file is downloaded, and emailed from noreply@[domain] (if email option was selected.

When a user clicks the Print icon for multiple selected cases from the Table View feature, the following should happen:

  • All of the requirements above.
  • Create a PDF with one case per page that can be printed all together.

Other Requirements

  • Make this module implementable on any page
  • All labels, messages and instructions must be translated into user's browser's language
  • Log this user action
  • Create a test for this feature

Design: Default Email and SMS Templates

Crisis Cleanup contains many alerts. Design 5 email templates that facilitate these use cases:

  TEMPLATE DESCRIPTION
1 Setup Template Any communication related to the mechanics of the site:  new accounts, new organizations, moving organizations, etc.  This is all primary handled via email.  The illustrations below probably fit this category the best.
2 Cases Template Any communication related to active cases or case management, scheduling etc.  Thinking out loud here, possibly could have some familiar look or feel as the case print out format (https://projects.invisionapp.com/d/main#/console/14746784/402738499/preview)
3 Report Template All of our reports can have some familiar header/footer content.  See task (#154)
4 Survivor Template Communication to surivors (at least in this first round) should only be via SMS.   This way we can delay a survivors direct interaction with the website and keep our and their focus on the relief organizations we serve.  Because our SMS communications are super limited in size, there may not be much formatting to do here (but give it a shot)
5 Other Template We need a generic email template for any future message that does not fit any of the buckets above.
TEMPLATE EMAIL SMS MESSAGE
Cases x   Post-disaster invitations to engage with community
Cases x x Check-in request. Will you be there on [date]?
Cases x x Email to phone volunteers whenever one of their cases has been helped
Cases x   Email report with outstanding invitations
Other x   Any other alerts or notifications
Report x   Daily or weekly reports
Report x   Weekly report including hours, completions, overdue cases, over-all status
Setup x   Invitation to activate account/ Join Crisis Cleanup
Setup x   Notification of organization acceptance/approval
Setup x   Invitation to register organization
Setup x   Confirmation of request to register
Setup x   Notification of acceptance or rejection of request to register
Setup x   Notification of moving to another organization/ accept or reject
Survivor   x SMS to survivor with links to photos of home before/ after, 1 week, 1 month, 3 months, 6 months
Survivor   x Automated SMS  requests to survivors asking if they still need help

Design for the following Formats:

  • Email (any sized screen)
  • SMS
    Final Output
  • Wireframe or PSD

GOAL: Design a look for each of the 5 types. Each should be common enough to know they come from Crisis Cleanup, but different enough to really fit their category. The text is not as important right now as is getting the template right.

  • Setup Template
  • Cases Template
  • Report Template
  • Survivor Template
  • Other Template

Design: Manage Users/Workers

By default, all users/workers should be able to manage other users in their organization.

  • Invite New Workers via phone or email
  • Edit Current Workers (name, phone number, roles)
  • See list of current workers (name, phone, roles, who invited, last login (days ago), number of logins, number of cases entered, number of cases claimed, number of other workers invited. Each stat is hyperlinked to a report)
  • See list of incomplete invitations (email, who invited, expired/not expired, when invited)
    • Send re-invitations
    • Revoke/delete invitation
  • See list of current requests (name, phone, to whom the request went, when requested)
    • Approve, reject, or ignore requests
  • Remove/ Deactivate/ Disassociate Users

Design for the following Formats:

  • Desktop
  • Tablet
  • Smartphone
  • App
    Final Output
  • Wireframe or PSD

Design: Move to New Organization

Occasionally a person will be invited to an existing organization when they should have registered a new organization. If not fixed, then that person invites dozens of other workers, who then invite others, etc. They claim and create cases. Then later they want to move the entire tree over to a new organization due to the original mistake.
Also, sometimes volunteers switch organizations between incidents.
This feature allows a person to move him/herself and optionally his/her entire tree to another existing organization, or an entirely new organization. See "EXAMPLE LIST BELONGING TO AARON TITUS" in Issue CrisisCleanup/old-crisiscleanup-3-web#40 for some interface requirements.

  • Place this functionality in User Settings: Move Organizations

  • STEP 1: "To where do you want to move?" [Existing Organization] [New Organization]

    • If Existing Organization, then prompt the user to enter the email address of someone in that organization.
      • Go to STEP 2, then follow the steps in Issue CrisisCleanup/old-crisiscleanup-3-web#34, except the user does not need to register or choose a new password.
    • If New Organization, then prompt the user to immediately register a new organization, and go to STEP 2.
  • STEP 2: "Who do you want to move to [$Target/New Organization]?"

    • Create a cascading list of other users the current user invited.
    • Create options in "EXAMPLE LIST BELONGING TO AARON TITUS" in Issue CrisisCleanup/old-crisiscleanup-3-web#40
    • Follow steps in Issue CrisisCleanup/old-crisiscleanup-3-web#40

Design for the following Formats:

  • Desktop
  • Tablet
  • Smartphone
  • App
    Final Output
  • Wireframe or PSD

Map Dissapears on Claim

Describe the bug
When claiming a case, the map disappears.

To Reproduce
Steps to reproduce the behavior:

  1. Go to Map view of Cases.
  2. Click on a red case.
  3. Click the "Claim" button at the bottom of the page.
  4. Upon Claiming all, the map disappears. Note: Map does not reappear if map is moved or "jiggled."

Expected behavior
Map should not disappear.

Screenshots
Map Disappear on Claim

Desktop:

  • OS: Windows
  • Browser: Firefox
  • Version: 71.0

Right Case Interaction Frame should always Exist in Cases

Problem*
From the map there is currently no readily apparent way to create a new case.

Solution
The Case Interaction Frame ("New Case" and/or "View Case") should always be present in the map and table view in the Cases tab.
By default, "+ New Case" should be selected.

Design Real-time Collaborative Chat

Design a Slack-like chat interface that includes channels for:

  • The Current Incident
  • The User's Organization
  • Each Crew for the organization
  • Each custom module to which the user has access (e.g. translation, phone, advanced mapping)
  • The ability to create custom channels and invite any user from any organization

Design for the following Formats:

  • Desktop
  • Tablet
  • Smartphone
  • App
    Final Output
  • Wireframe or PSD

Design New "Zoom To" Icons

Problem
In addition to having a + and - to zoom in and out, the map will also have two preset zoom icons:

  • Zoom Active: Zooms to the level in the map at which the icons become active (e.g. turn from circles to work type icons like trees and boots. Suggested Icon: A common map icon, like a tree or boot.
  • Zoom All: Zooms out to the extent of the incident. Suggested Icon: An odd, closed-shaped dotted line indicating a boundary.

These icons need to be designed.

Design: SitRep Signup

On the public page, design a subscription to Situational Reports (SitReps).

  • Daily or Weekly
  • One incident, all incidents affecting a state, or all incidents
  • Highlight new information since last report

Realtime Map Pin Selections

The realtime map should follow this design:
https://projects.invisionapp.com/share/3NMOYE6VB74#/screens/307337817
Based upon recent activity, dots will appear on the map. The most recent will be highlighted, and the most recent will go in a scrolling box, with the most recent on top.

Select the 5 most recently updated pins each from the 20 most recent incidents (total of 100), then rotate through them. For example, if the most recent incident number is 93, I would select 5 locations from incident 93, 5 from 92, and 5 each from every incident down to incident 74. These would be labeled 93[0], 93[1], 93[2], 93[3], 93[4]. Then sort them so that they sequentially appear like so:

92[0]
91[0]
...
74[0]
93[1]
92[1]
...
74[1]
93[2]
92[2]
...
74[4]```

Output: 

```Aaron in Longmont, CO
was helped by Jim from Team Rubicon
3 days ago```

Consolidate My Cases on Dashboard

My Cases
On the Dashboard, under "My Cases," Consolidate all worktypes for a case to a single line/case. Choose the color using the same algorithm used to choose map icons. List the worktypes as a comma-delimited list if there is more than one per case. E.g. "K6314 Muck Out, Rebuild, Mold Remediation, Debris."

Design: Automated Survivor Interactions

After multiple portals are built, these portals may choose to directly interact with survivors via intake forms and automated messages that ask the survivor to update his/her case.

  • Intake Form (with duplicate detection in a way that is secure)
  • Automated alerts (email, SMS) asking whether the survivor still needs help; then updating the status and interactions accordingly. With a warning: "Volunteer engagement has fallen to 20% of its peak. The chances of getting help lower with time."
  • Automatically sending a link to photographs of the home before and after for insurance purposes.

Design for the following Formats:

  • Desktop
  • Tablet
  • Smartphone
  • App
    Final Output
  • Wireframe or PSD

Design: Badging Module

Volunteer badging is a big issue in some local jurisdictions. This module would create a verifiable badging system that is primarily app-based, and offers multiple identity "levels of assurance" (based upon identity industry standards).
In each of the cases below, imagine the user presenting his/her smart phone app that contains a badge (with the information listed below) to a law enforcement officer at a checkpoint, who must decide whether to let the person through.

Level 1 Assurance Use Case

  • User is invited by someone in the organization
  • User shares name and phone number
  • User logs in using a username and password.

Level 2 Assurance Use Case

  • All Level 1 requirements.
  • User takes a selfie.
  • Selfie and name match government-issued ID
  • Current location is verifiable. (e.g. a temporary, one-time link shows the location of the user on a map, based upon the cell phone's location, which should be the location of the checkpoint)

Level 3 Assurance Use Case

  • All Level 2 requirements
  • An independent third party (such as a background checking company) has independently confirmed the user's identity and not raised any objections to the person's background.
    • Integration with Verified Volunteers (or other background-checking system) that allows a user to apply their background check to their Crisis Cleanup profile.
    • Integration with other badging or certification systems to allow a user to apply their certifications (e.g. a registered nurse or chainsaw certification) to their Crisis Cleanup profile.

Badge Contents and Requirements

  • Level of Assurance declaration and explanation:
    • "Level 1: This person is known to [$Org Name] and has logged in with a username and password."
    • "Level 2: This person is known to [$Org Name], has securely logged in, and you may match the person's photograph with a government-issued ID. You may also visit the link to independently verify that their current location is here."
    • "Level 3: This person is known to [$Org Name], and has been independently verified by [$Background Check Company]. You may match the person's photograph with a government-issued ID. You may also visit the link to independently verify that their current location is here."
  • User's Name
  • User's Organization
  • A short link (and QR code) to a temporary one-time link showing the location of the user's cell phone.
    • A new short link may be generated at any time.
  • Photo(s)
    • If available, the selfie photo

Design for the following Formats:

  • Desktop
  • Tablet
  • Smartphone
  • App
    Final Output
  • Wireframe or PSD

Design: Advanced Mapping Agent

The Google Geocoder often guesses the location of an address incorrectly; placing it across the country or simply in the wrong part of the county. While any user can move the map pin to a new location, most do not have time. However, a growing corps of virtual volunteers are willing to investigate misplaced pins and place them in the correct location. These Mapping Super Users need additional tools to easily identify the correct location and place the pin in the correct location. Sometimes they are placed on the wrong incident (e.g. when Harvey and Irma requests were coming in at the same time, some volunteers placed Florida requests on Harvey, and some Texas requests on Irma). These include:

  • A list of cases that have been flagged as in the wrong location, or are outside of the incident's geofence.
  • Geo Coordinate returns from multiple geocoding services (Google, Mapbox, Pitney-Bowers, Open Street Maps, etc).
  • Links to Google Maps and Google Street view to verify location visually.
  • Automatic external links to people-finding and address services
  • The phone number and case information, so the user may call the survivor for more information
  • An interface to easily permit relocating the pin by:
    • Dragging-and dropping
    • Pasting latitude/longitude
    • Clicking on a geocoder suggestion
  • Easily moving a case to another incident.
  • Ability to mark a flagged case as "resolved."

Design for the following Formats:

  • Desktop
  • Tablet
  • Smartphone
  • App
    Final Output
  • Wireframe or PSD

Clicking "Done" on Case Edit Should Revert to New Case

Bug
When editing a case, two buttons are at the bottom: Claim and Done.
Done
When you click "Done", the case editor disappears. Instead, it should forward to /#/incident/[incident_id]/cases/new, rather than /#/incident/193/cases.

Increase the number of address matches to 10?

For discussion. While doing support calls, one hang up is that the address someone is looking for somehow is NOT in the top 5 results quick enough for a typical user.. While this is an exception rather than the rule, is it possible to display the top 10 matches while searching instead of 5?
image

Use "Claimed" color schema inside Dropdown

Describe the bug
Many of the "Open" statuses are associated with more than one color, depending on the claimed status. For example, "Open, unassigned" is red when the work_type is unclaimed, but orange when it is claimed.
When clicking the status dropdown, the schema of the table DOTS and the clickable STATUS indicator should always reflect reality.
However, when we click the dropdown, the colors displayed should always be the Claimed version of the color schema.

Confirm Leaflet Tiles are Free/Open Source

  1. Please confirm that the current leaflet tiles are free to use. I received a solicitation from a company saying I'd have to pay for them.
  2. If not, please identify and implement free & open source map tiles similar to CrisisCleanup/old-crisiscleanup-3-web#38

Add "(Incident Name) to Dashboard Stats, Format Numbers

Problem
The Dashboard stats need some minor clarifications:

  • After each title, add "(Incident Name)". E.g. "My Claimed Cases (Hurricane Irma)", "Total Claimed (Hurricane Irma)", etc.
  • Format numbers to add comma delimiters to show thousands. E.g. "9,961" vs. "9961"
  • For Total Claimed, add "of Total" after the percentage. E.g. "9,961 (64% of Total)"
  • For In Progress and Closed, add "of Claimed" after the percentage. E.g. "6,297 (40% of Claimed)"

Design: User Profile and Settings

Design a User Profile and Settings dashboard with the following options

  • Update Role (See Issue CrisisCleanup/old-crisiscleanup-3-web#66 )
  • Update Assets (chainsaws, heavy equipment, vans, etc.)
  • Update Settings
    • Share location while logged in
    • Social Media Sharing
    • Reminder Settings
    • Saved Reports
  • Update Profile
    • Update Name
    • Update Phone Number
    • Update Email address (requires confirmation)
    • Switch Organizations (See Issue CrisisCleanup/old-crisiscleanup-3-web#40 )
    • Update or connect certifications/badges (e.g. background checks)
    • Sign in with Social Media
  • View ID Badge
  • Log out

Design for the following Formats:

  • Desktop
  • Tablet
  • Smartphone
  • App
    Final Output
  • Wireframe or PSD

Design Education Center

Design a central (public) training library where volunteer organizations can post their online training content. Through Crisis Cleanup, relief agencies will be able to share their training material with their own volunteers, other relief agencies, or the general public. All training materials will be categorized by subject, such as muck out safety, tree cutting safety, and other helpful instructional videos to improve efficiency and safety of disaster relief volunteerism.
The module will also include a search engine to quickly access, save, and share video content with others. These features will be fully integrated with the existing Crisis Cleanup platform, which will maximize training at the time it is needed most.
Responding organizations may upload or post their own educational and training material. These could include best practices, or internal procedures that organizations require their volunteers to master.

Design for the following Formats:

  • Desktop
  • Tablet
  • Smartphone
  • App
    Final Output
  • Wireframe or PSD

Re-Order and Expand Statuses Dropdown, Remove Depreciated Statuses

Feature
Based on https://github.com/CrisisCleanup/crisiscleanup-3-api/issues/54

  • Make sure that any work statuses with a non-null depreciated_date do not appear in the worksite status dropdown (I depreciated a couple, which we might use in the future).
  • Implement the list_order column to determine the order in which they appear in the dropdown. This order is based upon an analysis of the most commonly used statuses.
  • Expand the drop-down to show all twelve active statuses.
  • Also, use the "claimed" color schema.

Screenshot
Statuses

Design: Portal Admin Module

The Portal Admin is a special role that is designated by the Admin. Crisis Cleanup is currently one website: crisiscleanup.org. However, in the future we anticipate that several relief agencies will have their own branded portals, like NECHAMA or the Baptists, each powered by Crisis Cleanup, but at a separate domain and with a different look and feel. The portal admin controls the messaging on his/her portal, and decides which organizations may have access to the portal.
The portal Admin Module is only accessible to Portal Admins, and would include the following components:

  • CMS to update and amend the website content and branding (including translations)
  • Approve, reject, or modify translations suggested by users
  • Manage organizations/ approve or ban from portal
  • Create an incident

Design for the following Formats:

  • Desktop
  • Tablet
  • Smartphone
  • App
    Final Output
  • Wireframe or PSD

Add Download, Print, Share to Cases View

Problem
Add Flag, Download, Print, and Share buttons to Cases (Map and Table Views).

Solution

  • Flag: See #92, #91 for workflow requirements.
  • Download: Download either a CSV or XLSX file (user chooses). If 0 cases are selected, download all cases that meet the filter requirements (if any). If 1+ cases are selected, download only the selected cases.
  • Print: Create a downloadable PDF file which is a combination of printable work orders for the selected cases. If 0 cases are selected, print all cases that meet the filter requirements (if any). If 1+ cases are selected, print only the selected cases.
  • Share: See Issue https://github.com/CrisisCleanup/crisiscleanup-3-api/issues/53

Note: This issue is to just add the buttons. Other issues cover any complex functionality.
Be sure to add alt text to all buttons. (See #48 ).

Screenshots
More Alt Text2

Reset. Yikes!!

I think on the bottom the button should be "Cancel" instead of Reset". For example, I was curious to see what the other fields were behind a case so I clicked "Edit". looked around, but didn't change anything. Tried the reset button hoping would close the window without changing anything but instead, it wiped out the homeowner information. I didn't take the original call, so I have no idea what it is and have no escape. The only way to close the window now is to hit "Save" and permanently store empty fields... ... so Cancel and do nothing would be better than re-set. (Also, reset only emptied the top fields and not the rest of the record. I think a user really wanted to start over, they could hit "Cancel" then "New" and get the same effect.
image

Design: Crew/Team Management

Anyone in an organization with a Level 0-3 rank may edit crews/team

  • List of Teams/ Crews
  • Manage Teams/ Crews
    • Create new crew
    • Delete Crew
    • Move members to and from crews
  • Team Name or Leader:
  • Car
  • Assigned Cases (Case Number with link, Status)
    • Assign a new case
    • Unassign or reassign a case to another team/crew
  • List of assets
  • Completion rate: %
  • Last Login:
  • List of Members (Name, Phone, Email)
  • List of Assets in Team
  • Send Message
    • Email
    • SMS
    • Via Online Chat (Issue CrisisCleanup/old-crisiscleanup-3-web#58 )
  • See Current Location of Members
  • Notes

Design for the following Formats:

  • Desktop
  • Tablet
  • Smartphone
  • App
    Final Output
  • Wireframe or PSD

Design: Affiliate Organizations Module

Only an Organization's Primary Contact(s) may affiliate his/her organization with another. Affiliating an organization shares all information about that organization (users, cases, etc.) with another organization, and with other affiliates. Each affiliation becomes a group. For example, if two United Methodist churches decide to affiliate after the Boulder Floods, they would create a group called "United Methodists Group." Then when another United Methodist church wishes to join, they simply join the "United Methodists Group."
Groups are available across incidents, but affiliation requires: 1. The organizations are part of the same group, and 2. The organizations have access to at least one common incident. That way client data from an old incident is not accidentally shared with new affiliates years later, without the knowledge of the organization.
A primary contact may leave a group, form a new group, or join more than one group at any time.
Affiliation is a handy way to share user hours, contact information, and client information without having to run reports.
A Primary Contact requests to affiliate:

  • Choose from a list of existing groups (sorted to the top) and organizations (sorted below)
  • Optional but encouraged: Include a personal message explaining why they want to join the group.
  • Primary Contact clicks "Submit", and all primary contacts from other organizations and the portal admin receive an alert (email, SMS, and dashboard), requesting approval to join. They may choose Yes, No, or I don't know (ignore).
  • The first click wins. If someone clicks "No," then the request is denied. If one clicks "Yes," then the request is approved.
  • The second click is presented with a message:
    • "This organization has already been approved by [$User Full Name] at [$Org Name], ([$User Email], [$User Phone] on [$Date] at [$Time]. Please contact this person if you believe it was an error."

Design for the following Formats:

  • Desktop
  • Tablet
  • Smartphone
  • App
    Final Output
  • Wireframe or PSD

Update OSM/ Leaflet Tiles

Add Translated Alt Text to All Buttons

Problem
Add Translated alt text to all buttons, so that when you hover over the buttons, you can tell what they do. The alt text should automatically be translated when choosing another language. Note: please consider accessibility, which favors alt text versus a css equivalent.

Solution
Add alt text to each button, including the ones circled, but please make a habit of adding alt text to all buttons.

  • Layers: "Turn on layers"
  • Filters: "Filter the cases in table and map views"
  • More (three dots): "Additional actions"
  • New Case: "Create a new case"
  • View: "View case"
  • Go to: "Go to case"
  • History: "View history"
  • Download: "Download" (See design)
  • Share: "Share"
  • Print: "Print"
  • Edit: "Edit"
  • Map View: "Map View"
  • Table View: "Table View"
  • Zoom In: "Zoom in"
  • Zoom Out: "Zoom out"
  • Zoom Close: "Zoom to neighborhood
  • Zoom Medium: "Zoom to active level"
  • Zoom All: "Zoom to entire incident"
  • Claim (Work Type): "Claim this work type"
  • Claim (All): "Claim all available work types"
  • Done: "Save changes and close this case"

Add Alt Text
More Alt Text
More Alt Text2
More Alt Text3

The translated text above has been added to the "actions" group (~Line 20), and the labels are all named "*_alt" here: https://docs.google.com/spreadsheets/d/1-D43_Ot26GQlHL3_6i3YVFDR9qIVVRgyMDncTcyatR4/edit#gid=1832562229
Add any additional text to the "actions" group, as necessary.

When clicking on "Cases," Default to Map

After logging in, click "Cases."
Unless the user has a saved state in user_users.states, the map view should open by default.
When testing, the table view first appeared.

On Select Case, add info and fade mini popup after 3-5 seconds

Bug
When clicking the "Go to" icon, the map pans and zooms to the case, and a mini popup appears above the icon, labeling and highlighting it.

  1. This is great.
  2. The text in the mini popup should be "[Name] ([Case])" E.g. "Aaron Titus (A407)"
  3. Remove the mini popup the sooner of: a. The user clicks the "x", or b. 3-5 seconds, and then fade it out. The actual time should be chosen on whatever seems least intrusive.

Mini popup

Design: Change Role

A user may change roles at will.
General Rules

  • If a user changes roles to another role of equal or lesser level/rank, then no approval is necessary.
  • If the person requests a role of a higher level/rank, then approval from anyone of the target or higher role.
    • An alert (email, SMS, and dashboard) requesting change of role is sent to everyone of higher roles.
  • First click wins (approval or disapproval).
    • For any role equal to or greater than 2, inaction after 36 hours automatically results in promotion to new role.
  • Anyone may change the role of any other user of equal or lesser level/rank.

List of Roles

  • Admin
    • Rank: 0
    • System administrator of the entire system, and all portals
  • Portal Admin
    • Rank: 1
    • The portal admin controls the messaging on his/her portal, and decides which organizations may have access to the portal.
  • Primary Contact
    • Rank: 2
    • A Primary Contact is the face of the organization to other relief agencies using Crisis Cleanup. A Primary Contact may also affiliate his or her organization with other organizations. An organization can (and should) have more than one Primary Contact.
  • Team Leader
    • Rank: 3
    • A Team Leader leads a crew of workers or volunteers in the field.
  • Worker
    • Rank: 3
    • A Worker is a person who assists survivors over the phone or in person by doing activities like assessments, cleanup, debris removal, tree removal, etc. By default, all users are Workers.
  • Phone Agent
    • Rank: 3
    • A Phone Agent answers and returns phone calls when the cleanup assistance hotline is active.
  • Map Specialist
    • Rank: 3
    • Focuses on updating misplaced pins.
  • Translator
    • Rank: 3
    • A Translator is able to translate website content and/or phone calls into another language.
  • Support Agent
    • Rank: 3
    • A Support Agent is someone who knows how to use Crisis Cleanup well enough to help others. They can provide technical support to others and share their knowledge in written help documents.
  • Guest Worker
    • Rank: 4
    • A Guest Worker is an limited-trust member of the public, usually a spontaneous unaffiliated volunteer, that has been organized by a relief agency.
  • Public
    • Rank: 5
    • Any unauthenticated member of the public.

Design for the following Formats:

  • Desktop
  • Tablet
  • Smartphone
  • App
    Final Output
  • Wireframe or PSD

Design: Translation Module

Goal: Crowdsource better translations of the website, based on user feedback. When this module is turned on:

  • All text on the website becomes editable/suggestable.
  • The user may click on any text; a modal opens up with three fields:
    • The original text (in whatever their current language is) (not editable)
    • A field for the user to suggest a new translation and declare the language from a drop-down (required)
    • A space for the user to explain why his/her translation is correct (optional).
  • Upon submitting, the suggestion is placed in a queue for the Portal Admin to review and approve.

Design for the following Formats:

  • Desktop
  • Tablet
  • Smartphone
  • App
    Final Output
  • Wireframe or PSD

Create Print Template

Design a printable case template based upon the attached file, with the following differences:

  • The information shown on the form must be customized to the incident. E.g. A Tornado form should not include Depth of Flood information.
  • Include the name, email address, and phone number of the person who printed the form.
  • Include a link & instructions to request access to Crisis Cleanup (Issue CrisisCleanup/old-crisiscleanup-3-web#34 )

https://crisiscleanup.slack.com/files/U06BWDLMP/FSS0RCXHC/current_print.pdf

Other Requirements

  • All labels, messages and instructions must be translated into user's browser's language
  • Create a test for this feature

Design: Field Work View

The field worker's view should be focused on reporting completion and gathering case information (particularly for the app). It should include:

  • * Easily find nearby cases based upon location and filters identified in CrisisCleanup/old-crisiscleanup-3-web#12 and CrisisCleanup/old-crisiscleanup-3-web#48
  • Easily claim cases and assign/unassign to team
  • * Mark when each work type is completed
  • Update the over-all status of the work order
  • Log in/log out
  • * Check in/check out (e.g. start a passive timer that tracks volunteer time for easy reporting)
  • Easily form or join a team
  • Declare assets in user's possession (e.g. chainsaws, heavy equipment, van, food, water)
  • Capture the names of other workers on a team who are not signed in.
  • * Take photographs of home, before and after
  • * Video of after/feel-good
  • Get homeowner's email address
  • * Get homeowner's signature for liability release
  • Share photographs and messages on Social Media
  • Record a brief video/oral summary of the day's activities
  • Mark a location as in the wrong place on the map (See Issue CrisisCleanup/crisiscleanup-3-web#21)
  • Link to Badge (See Issue CrisisCleanup/crisiscleanup-3-web#20).

Design for the following Formats:

  • Desktop
  • Tablet
  • Smartphone
  • App
    Final Output
  • Wireframe or PSD

Implement "Zoom To" Icons on Map View; Remove Closest Zoom

Problem
Replace the three current "Zoom To" icons in the Map View, with the icons developed in issue #50 . This issue is dependent upon #50.
After discussion with the team, we decided to remove the closest preset zoom level. It's confusing, and the functionality does not add any value.

Implement https://projects.invisionapp.com/d/main?origin=v7#/console/14746784/333052398/preview
Add optional zoom slider if possible: https://projects.invisionapp.com/share/4NVERU5ET9K#/screens/399285880_Map_Hide_slider
Zoom Slider

New Zoom Icons

Zoom to

Design Table View for Cases

Design a Table view for cases, accessible in multiple locations (e.g. Worker Dashboard, Map, etc.). Include the following columns. Note: Subcolumns are hyperlinks to additional information (or items in a dropdown, as appropriate):
Header:

  • Bulk Actions
    • Unclaim
    • Claim (Limit 3 at a time)
    • SMS (Limit 3 at a time, only cases claimed by or reported by the organization)
    • Update Status
    • Print (only applies to cases claimed by or reported by the organization)
    • Download CSV
  • Search
    • Search by Name, Case Number, Address, City, State, Zip, phone1, phone2
  • Filter
    • Advanced
      • Modal that permits the user to filter by ANY data collected in the current incident
    • County (ideally, the county dropdown is powered by GIS objects that filter by GIS rather than the "County" text field, which can be incorrect.) Operator: AND
    • Open. Operator: AND
    • Closed. Operator: AND
    • Claimed by [Org Name]. Operator: AND
    • Unclaimed. Operator: AND
    • [Each Work Type in the current incident] Operator: OR
      (Note: Clicking any filter with an "AND" operator decreases the total number of pins displayed. Clicking an "OR" filter increases the number.)

Body: The Table is sortable by each column

  • Select Checkbox (e.g. to apply bulk actions)
  • View/ Map Icon
  • Claim/Unclaim Icon
  • Edit Icon
  • SMS Icon (only active for cases claimed by or reported by the organization)
  • Print Icon (only active for cases claimed by or reported by the organization)
  • Case Number
  • Work Type
  • Status
  • Name
  • Full Address
  • City
  • County
  • State
  • Zip
  • Phone 1
  • Phone 2
  • Claimed By
  • Requested Date
  • Last Updated

Other Requirements

  • All labels must be translated
  • Write a test for these requirements

Open Dashboard in New Tab not Working

  1. Log in
  2. Go to the map view of "Cases."
  3. Attempt to open the Dashboard in a new tab by right clicking and opening in a new tab.
  4. Unexpected: Taken to the login screen, instead of the Dashboard.

Design: Organization Settings

The Primary Contact should be able to update the organization Settings, including:

  • Manage Users
  • Manage Teams/ Crews (See Issue CrisisCleanup/old-crisiscleanup-3-web#67 )
  • Upgrade
  • Affiliate Organization (See Issue CrisisCleanup/old-crisiscleanup-3-web#63 )
  • Update Organization Profile
    • Update Response Territory
    • Update Organization Name, Contact, URL, Social Media, location, etc.
    • Upload Custom Map Layers
    • Upload custom images
    • Upload custom Terms for users
    • Upload custom training videos/materials for users
    • Sign in with Social Media (Post all users' content on organization social media, or just specific things by Primary Contacts)

Design for the following Formats:

  • Desktop
  • Tablet
  • Smartphone
  • App
    Final Output
  • Wireframe or PSD

Design: Activate Special Modules/User Edit Nav Bar

Problem
Different users will have access to different modules of the system. For example, the Phone module is hidden by default, to simplify the UI. Users should be able to add it very easily.

Solution
Add a "+" at the bottom of the nav bar, where users can add additional modules to the nav bar, such as "Phone." Or in the future, "Donations."

Create an easy way for users to activate any/all of the following modules:

  • Helpdesk Support Agent Module (See Issue CrisisCleanup/old-crisiscleanup-3-web#57 )
  • Advanced Mapping Module (See Issue CrisisCleanup/old-crisiscleanup-3-web#61 )
  • Phone Agent Module (See Issue CrisisCleanup/crisiscleanup-3-web#8 )
  • Translation Module (See Issue CrisisCleanup/old-crisiscleanup-3-web#39 )
  • Any other module created in the future

Some modules will automatically appear depending on the user's role. For example:

  • Affiliate Organizations/ Organization Settings Modules: Appears if user is a Primary Contact (See Issues CrisisCleanup/old-crisiscleanup-3-web#63, CrisisCleanup/crisiscleanup-3-web#12 )
  • Portal Admin Module: Appears only if the user is a Portal Admin (See Issue CrisisCleanup/crisiscleanup-3-web#17 )
  • Also, some modules will automatically activate if a user chooses a specific role (e.g. "Support Agent", Issue CrisisCleanup/crisiscleanup-3-web#16 )

Other Instructions:

  • If a module requires a higher-level role, then the user is directed to Switch Roles, which may require approval from someone else in the organization.

Design for the following Formats:

  • Desktop
  • Tablet
  • Smartphone
  • App
    Final Output
  • Wireframe or PSD

Design: View/ Enter Cases

  • Map View
  • Table View (see Issue CrisisCleanup/crisiscleanup-3-web#30 )
  • Filter by:
    • Social Vulnerability Index (SVI). One slider for over-all SVI, and multiple sub-sliders for various SVI data subsets.
    • Status
    • Claimed by My Organization
    • Claimed by My Crew/Team
    • Unclaimed
    • Available work types
    • Each attribute available in the data set
    • County
    • Zip code
    • Custom SHP/KML file
    • Freshness of Data
  • Layers
    • SVI
    • Heatmap of PDA/ all data
    • County
    • Zip Code
    • Custom SHP/KML files
    • Current location of my organization volunteers
    • Current location of my crew/team
    • Current location of assets
  • Enter Cases
  • Claim/Unclaim cases
  • Print
  • Email/Send Case
  • Request Case from another Organization
  • Assign case to crew
  • SMS/TXT Case data
  • View on map
  • Case History
  • Interactions (See Issue CrisisCleanup/old-crisiscleanup-3-web#35 )
  • Download CSV
  • Flag the case as in the wrong location (See Issue CrisisCleanup/crisiscleanup-3-web#21 )
  • Easily move the map pin to a different location.

Design for the following Formats:

  • Desktop
  • Tablet
  • Smartphone
  • App
    Final Output
  • Wireframe or PSD

Design: Import Tool

Relief organizations begin working long before they hear about Crisis Cleanup and want to import cases they've already collected or completed. This is a very intensive process. This would be a simple Import tool.

  • Download an Excel template
  • User Uploads the list to import, in the correct format.
  • User is asked whether they want to claim all, none, or some of them.
  • User is taken to resolution center for errors:
    • Lack of required information (User is given the option to Enter the information in the UI, e.g. Status)
    • Duplicate (User is given the option to compare the two cases and edit/merge/ or submit as non-duplicate if necessary.)
    • Location Unknown (User given access to Advanced Mapping Tools in Issue CrisisCleanup/old-crisiscleanup-3-web#61 to pick location)
  • User may ignore errors, in which case they are not uploaded.
  • A complete report with all case data, including case numbers is downloaded automatically
    • Any un-imported cases are also included, with an explanation of why they were not uploaded.

Design for the following Formats:

  • Desktop
  • Tablet
  • Smartphone?
  • App?
    Final Output
  • Wireframe or PSD

Design: Request Case

Design interface for CrisisCleanup/old-crisiscleanup-3-web#51

Design for the following Formats:

  • Desktop
  • Tablet
  • Smartphone
  • App
    Final Output
  • Wireframe or PSD

Design: View Phases

Disaster relief happens in phases. For example: Rescue/Response, Cleanup, Recovery, Long-term Recovery, etc. Crisis Cleanup helps with the "Cleanup" sub-phase, but has a natural relationship with the "Preliminary Damage Assessment" (PDA) sub-phase prior to cleanup, and the "Rebuilding" sub-phase after cleanup.
During PDA, a lot of data pours in about the location of damage due to the disaster from various sources. While useful for situational awareness, the information is not directly actionable.

PDA Phase

  • Zero organizations work on any cases. This is simply situational awareness information.
  • Minimum Data Set: Location, Type of damage, severity (small)
  • Actionable when: Appears on the map. Triggers an assessment.
  • Closed when: Assessment occurs.

Cleanup Phase

  • One organization typically works on a single case. E.g. One organization will tarp the roof and chop up the downed tree.
  • Minimum Data Set: Damage information plus needs and priority information (medium)
  • Actionable when: Assessment occurs.
  • Closed when: Cleanup work is completed.

Rebuild Phase

  • More than one organization typically works on a single case. E.g. one organization does HVAC, another does drywall, roofing, plumbing, etc.
  • Minimum Data Set: Detailed assessment (large)
  • Actionable when: Cleanup work is completed.
  • Closed when: Rebuilding is done.

We would like to develop a way for organizations to view and interact with the data in multiple phases. This is a challenging design and UX issue will need some additional brainstorming.

Design for the following Formats:

  • Desktop
  • Tablet
  • Smartphone
  • App
    Final Output
  • Wireframe or PSD

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.