Giter Club home page Giter Club logo

hackforla / heart Goto Github PK

View Code? Open in Web Editor NEW
31.0 15.0 40.0 19.03 MB

Heart is a project working directly with the LA City Attorney’s Homeless Engagement and Response Team. We are building a database and case management system to streamline their workflow and enable them to scale their program. Find us on the Hack for LA Slack #heart.

Home Page: https://www.lacityattorney.org/community-justice

License: MIT License

JavaScript 89.23% HTML 4.95% CSS 4.64% Dockerfile 0.12% PLpgSQL 1.06%
hack-for-la code-for-america record-expungement homeless la-county civic-tech code-for-all civictechindex

heart's Introduction

HEART Project

🚩🚩🚩ALERT! ALERT! ALERT!🚩🚩🚩

develop is now the default branch to work against for all development (edited)

Tien or Roland will merge develop into master periodically when it’s time to update the demo!

(more info here on how to work with master, develop and feature branches: https://www.atlassian.com/git/tutorials/comparing-workflows/gitflow-workflow)

Project Leaders

  • Marie-Aimée Brajeux (Project Lead)
  • Tien Yuan and Roland Abregorivas (joint Tech Lead)

Table of Contents

  1. About the project
  2. Quick Start Guide
  3. Detailed Start Guide
  4. Loging into App
  5. Using Postgres
  6. Using pgadmin

About the Project

This project meets on Monday at the westside hacknight. We are working with a program of the City of LA's Attorney's Office which supports the Criminal Record Clearing Project by administering the Los Angeles County Homeless Court Program. HEART (Homeless Engagement and Response Team) works with adults who are experiencing homelessness or are at risk of experiencing homelessness to help them resolve eligible traffic and pedestrian infraction citations by engaging in services instead of paying fines and fees they cannot afford.

HEART staff connects with potential program participants in person at events providing access to a variety of social, medical and human services. Provided they engage with a certain number of service providers, the HEART team will collect relevant personal information to research and investigate any outstanding eligible citations participants may have. Staff will then file motions with the relevant courts to request a dismissal and/or suspension of fines, and a recall of associated warrants.

Hack for LA has been working with the program's staff to design and build a better processing system, helping to streamline in-person client intake, data processing and the filing of motions.

Find us on the Hack for LA Slack on the channel #heart, or join us at one of our meetings, every Monday night in Santa Monica.

Installation Guide

This serves both the backend api and frontend pages for the processing system and will be used to review and process participant info. Below is a brief overview of the tech involved in this project.

  • Express is serving the api and an index page
  • Jest runs the tests
  • Linting is setup with the airbnb style guide
  • CI is setup with Travis-CI
  • Some simple routes exist for a notes table
  • Postgres is seeded with participant table and a citations table

QuickStart

Recomendations

  • Latest version of Docker is required must be installed on your computer.
  • Node and NPM does not have to be installed but it is highly recommended.

Installation Instructions

  1. cd into main-app
  2. run docker-compose build
  3. run docker-compose up once the obove command is finished running. This will bring up heart_node, heart_postgres, and heart_pgadmin containers and start the application.
  4. Go to localhost:3000 to access main-app using user: demo password: pwd123
  5. Go to localhost:8080 to access pgadmin using user: [email protected] password: pgadmin.

See "How to browse postgres using pgadmin" section below if you wish to see the db structure.

To run tests

  1. ensure your containers are up with docker-compose up
  2. run docker exec -it heart_node npm test (This will work for now but it is slow so we are exploring other options)

DetailedGuide

This project provides a dockerized node app, postgres and pgadmin. A local database is not required to start working on this project.

To use what we've provided, you'll need the latest version of NodeJS, Docker and Docker Compose (comes with a standard Docker Desktop installation for Mac and Windows.)

File Structure

\design                 // contains design files
\main-app               // contains the full application
  \api                  // contains all the backend code
  \client               // contains the front-end code
  docker-compose.yml
README.md               // you are reading it

Logins

App Login

User: demo Password: pwd123

PGAdmin Login

User: [email protected] Password: pgadmin

Start Guide

Use your favorite Command Line Interface (e.g. bash or powershell) and change into the main-app directory.

Enter the commands:

 docker-compose build
 docker-compose up (after above command finishes)

This downloads and builds the base Docker images (if needed), and starts all services.

node can now be accessed from http://localhost:3000. It serves the main-app.

pgadmin can now be accessed from http://localhost:8080. It's a GUI for browsing postgres.

postgres service exposes the standard PostgreSQL port 5432. It serves the main-app database.

Docker Commands

[SERVICE] is node, postgres or pgadmin

If one service or another is already started:

docker-compose up [SERVICE]

To stop the service(s):

docker-compose stop [SERVICE]

Postgres

Connecting to the postgres service

The default port is 5432

The default postgres credentials are:

POSTGRES_USER=postgres
POSTGRES_PASSWORD=postgres

Connecting from an application**

Use the PostgreSQL connection URI:

postgresql://<user>:<password>@<host>:<port>/<database>

With our defaults:

postgresql://postgres:postgres@localhost:5432/heart

Pgadmin

The default pgadmin login credentials are:**

[email protected]
PGADMIN_DEFAULT_PASSWORD=pgadmin

How to browse postgres using pgadmin**

Go to localhost:8080 and login.

Then trom the top navbar Object > Create > Server.

On the General tab, fill in whatever Name you want.

On the Connection tab, fill in:

  • Hostname/address: postgres (the name of the local service, as noted in docker-compose.yml

  • Port: 5432 (default)

  • Maintenance database: postgres (default)

  • Username: postgres (from POSTGRES_USER)

  • Password: postgres (from POSTGRES_PASSWORD)

The rest of the fields can be left blank. Click Save to connect.

In the future, the server you saved can be used again

Local Data Persistence / How to Destroy

If the services are started and stopped as outlined above, changes made within the postgres database server (e.g. creating tables, inserting data) and the pgadmin client (e.g. server connections, preferences) will persist between restarts.

An alternative command can stop and completely remove all services and any associated local storage. *This is destructive*:

docker-compose down [SERVICE]

heart's People

Contributors

abregorivas avatar brentjayingram avatar calexity avatar charlottesauce avatar dbyeung avatar gabriellapernama avatar gianbun avatar jasonlev avatar jeremy-d avatar jonmelvin avatar kevin-crawford avatar kkchu791 avatar mbrajeux avatar mitchellwandrews avatar randyunger avatar serpient avatar shlomibe21 avatar tabatahg avatar thekaveman avatar thomasjinlo avatar tienyuan avatar ultamatt avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  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  avatar  avatar  avatar  avatar

heart's Issues

Make more seed data

We'd like to make testing easier by having more seed data.

Please add 10-30 additional participants in different states.

  • many citations
  • no citations
  • done status
  • new status

Start the offline-first intake-app

On Hold until the Main App is completed

Goals

Setup the base and file structure for the offline-first intake app using electron to serve as the basis for the intake form

  • Setup an electron app

Background

After discussion at 12/10's hacknight, (see #2), we've decided to use electron to build the offline first intake form. The form will save to a csv for the main app to import.

The fields necessary are in the Information Architecture wiki page.

Note that the intake form's design is still in progress.

Explore an offline-first client intake app

Goal

To vet the 'offline-first client intake app' idea for collecting participant information electronically. The data will be used with a separate web application for further processing back at the office.

Desired Result

Try this approach. Then write down your thoughts/opinions/notes for the potential framework.

Code/prototypes produced should be used to form your opinions. Demos are nice to have, not required

Examples of what to include:

  • "I really liked bleh bleh, but it was hard to blah blah"
  • Pros (what was good, reasons to do it, likes)
  • Cons (what was hard, reasons to skip it, dislikes)
  • Is this possible? 👍/ 👎
  • Is this time consuming/super hard? - 👍/ 👎
  • Is it worth the effort? 👍/ 👎
  • Did this inspire another idea/approach?

Background

Assumptions
At a Connect Day event, Gina may have laptops/smartphones, but no internet access because she's under a freeway overpass.

At an event, there can be:

  • up to 70 participants??
  • up to 2 laptops
  • up to 5?? staff/volunteers to type the information while speaking with a participant

Hypothesis
JS can run in the browser and store participant data offline. Therefore, Gina can open "client-intake.js" in her browser and save data.

But then what should happen?

  • Option A: once online, the offline-app can automatically connect and push data to database.
  • Option B: once Gina is at the office, she can manually export data to a file, copy/move the file to a desktop running the main app and manually import data into a database.

Resources

Offline db links

The original forms, work-in-progress mockups etc available in in slack.


For the sake of our future selves/volunteers, we're trying to document the intent/thoughts/assumptions/decisions that lead up to the code.

So this is an extra wordy issue description 😃

Design log in screen

As a lawyer in the City Attorney's office OR as a volunteer
When I want to access the HEART web app
Then I want to be able to log in
So that HEART is secure and so I have the proper access.

Consider

  • Different permission levels (admin and guest?)
  • Simplicity!
  • Error states
  • Responsive behavior (mobile to desktop)

Be able to upload a CSV into the main app

As Gina
When I want to get users into the system
Then I want to be able to upload the CSV (from Google Form)
So that I can work with the files

Notes

  • First
  • Middle
  • Last
  • Driver's License
  • Date of Birth
  • AKAs
  • Phone number
  • Email address
  • Clinic attended
  • Date input into system (could be part of the progress history) < Google form timestamp

The design is tbd with #85

Profile Design - Adding Citation design

As an attorney working on HEART
When I add or edit a citation to include violations
Then I want to be able to add/edit up to 4 violations
So that I can send the correct records the the courts

Considerations

  • auto suggested and completed codes with text
  • how the long descriptive text describing the violation fits after the code (if possible)
  • rendering the court code names

5/5/2019:

  • how to add violations not currently in the database?
  • 1 in 5 violations are not in the common violations list sent by Gina

Start the base and file structure for the main app

Goals

Setup the base and file structure for the main app using express.
Stub out the base pages for

  • login
    • list of individuals page
    • individual profile page
    • search page

Background

After discussion at 12/10's hacknight, (see #3), we've decided to use express as the backend and serve pages for the frontend. Pages will use react components and the database will be Postgres.
This will be a multipage app and we're keeping code for the front and backend in the same repo.

Example Site Map

Sails / Docker install on windows

Configuring Sails app in docker, on Windows. Am getting:

sails_1 | No sails.config.custom.stripeSecret was configured.
sails_1 | No sails.config.custom.stripePublishableKey was configured.
sails_1 | No sails.config.custom.mailgunSecret was configured.
sails_1 | No sails.config.custom.mailgunDomain was configured.
sails_1 |
sails_1 | Until this is addressed, this app's billing and email features
sails_1 | will be disabled and/or hidden in the UI.
sails_1 |
sails_1 | [?] If you're unsure or need advice, come by https://sailsjs.com/support
sails_1 | ---------------------------------------------------------------------
sails_1 | verbo: custom hook loaded successfully. (1ms)
sails_1 | verbo: Starting app at /app...
sails_1 | verbo: Running the setup logic in sails.config.bootstrap(done)...
sails_1 | error: Bootstrap encountered an error: (see below)
sails_1 | verbo: Lowering sails...
sails_1 | error:
sails_1 | error: TypeError: Cannot read property 'readJson' of undefined
sails_1 | at Object.module.exports.bootstrap (/app/config/bootstrap.js:40:55)
sails_1 | at /usr/local/lib/node_modules/sails/lib/app/private/bootstrap.js:73:34
sails_1 | at Sails.runBootstrap (/usr/local/lib/node_modules/sails/lib/app/private/bootstrap.js:97:5)
sails_1 | at Sails.wrapper [as runBootstrap] (/usr/local/lib/node_modules/sails/node_modules/@sailshq/lodash/lib/index.js:3275:19)
sails_1 | at Sails.initialize (/usr/local/lib/node_modules/sails/lib/app/private/initialize.js:67:9)
sails_1 | at Sails.wrapper [as initialize] (/usr/local/lib/node_modules/sails/node_modules/@sailshq/lodash/lib/index.js:3275:19)
sails_1 | at /usr/local/lib/node_modules/sails/lib/app/lift.js:63:13
sails_1 | at /usr/local/lib/node_modules/sails/node_modules/async/dist/async.js:3853:24
sails_1 | at replenish (/usr/local/lib/node_modules/sails/node_modules/async/dist/async.js:946:17)
sails_1 | at iterateeCallback (/usr/local/lib/node_modules/sails/node_modules/async/dist/async.js:931:17)
sails_1 | at /usr/local/lib/node_modules/sails/node_modules/async/dist/async.js:906:16
sails_1 | at /usr/local/lib/node_modules/sails/node_modules/async/dist/async.js:3858:13
sails_1 | at /usr/local/lib/node_modules/sails/lib/app/load.js:278:13
sails_1 | at /usr/local/lib/node_modules/sails/node_modules/async/dist/async.js:421:16
sails_1 | at processQueue (/usr/local/lib/node_modules/sails/node_modules/async/dist/async.js:1565:20)
sails_1 | at taskComplete (/usr/local/lib/node_modules/sails/node_modules/async/dist/async.js:1588:9)
sails_1 |
sails_1 | error: Could not load Sails app.
sails_1 | error:
sails_1 | error: Tips:
sails_1 | error: • First, take a look at the error message above.
sails_1 | error: • Make sure you've installed dependencies with npm install.
sails_1 | error: • Check that this app was built for a compatible version of Sails.
sails_1 | error: • Have a question or need help? (http://sailsjs.com/support)
main-app-sails_sails_1 exited with code 1

Create a way to download a report CSV

As Gina
When I want to share a report of my work
Then I want to be able to download a CSV from the web app
So that I don't manually have to create it.

Notes
From "Reports" in the top nav, that should instantly download the CSV which would include:

  • Number of people seen
    
  • Number of people at each status in the process
    
  • Number of intakes
    
  • Number of clinics
    
  • Number of citations sent to court
    
  • Number of citations dismissed
    
  • Number of participants who worked with service providers
    
  • What services people did and how many did each (broken down by service provider or activity. i.e. HepA vaccine- 45 people)
    

Create a project brief for Github

Create a project brief that explains:

  • what the project is (but be kind of vague)
  • where we are with it now
  • how to get involved in the project

Be able to view/edit an individual profile

As Gina
When I want to work on a file
Then I want to be able to get more info on that individual
So I can work to get rid of their tickets. Cool!

Notes

  • Be able to view profile
  • Be able to edit and save basic profile info
  • Be able to see and change status

Profile design - edit state

When Gina taps into "edit" a profile,
define what she can edit and define what that looks like

Considerations

  • What can be editable?
  • Where do you save?

Design account creation/deletion + privileges flow

As Gina:
When 10-week externs come/go
I want to be able to create/delete accounts
So that they have permissions to access the system while they are externs and lose access when they leave

Notes

  • Externs and full time staff should be able to view all the same info (no special permission difference)
  • Make sure create/delete user power only appears inside admin's profile

We need a flow to:

  • Create accounts
  • Delete accounts
  • Change passwords (For all users?)
  • Reset passwords (For all users?)

Profile index + profile design - delineate urgent rush

We need a way to designate urgent rush profiles. This ticket is to:

  • Surface "Urgent rush" on the profile

Considerations

  • Consider also surfacing it on the profile index/homepage
  • Consider if we should allow toggling of urgent rush

Profile Design - Case Status

Create an interaction to show the progress of a participant's case, allowing a case manager to quickly understand how far along a case is and what's required to push it along further.

Considerations

  • Timestamping
  • Progress Bars
  • Undoing

Statuses To-Do:

  • Background checks = add ‘JPP’
  • Ready to export
  • Exported (automated only?)
  • Ready to send to court
  • Closed (with additional checkboxes, including other + free text or just notes)

Profile Design - Notes

Create a notes section for case managers to log updates and issues, such as database access, incomplete citation information, or general updates.

Considerations

  • Time stamps

Implement log in/authentication

Implement authentication for Gina and her team

Notes

  • Ability to create more than one log in
  • All have admin access to everything
  • Hardcode passwords

Create a Design Prototype of the Intake Form

Create a design prototype of the intake form using a consistent set of UI components, so we can try it out and make sure nothing is missing before building in functionality

The prototype should:

  • follow the latest version of the intake form https://invis.io/MNPV2LSU4ZE#/370477840_HEAR-Intake-Form-Prototype-pdf_1
    (form is based on the Information Architecture as detailed in https://github.com/hackforla/heart/wiki/Information-Architecture)

  • The design intent is to save changes for every user until saved

  • Call to Action Button to submit form is "Save and Complete"

  • When form submits successfully, should say "firstName lastName intake saved" as a toast on top of a new blank form.

  • If form is not saved successfully, show "Intake not saved. Please retry." AND keep them on the form with all the info filled in

  • Form should cache info so a page refresh doesn't clear it out. Only clear on submit.

  • If any of the required fields are not filled in, kick them up to the first unfilled field and show the error near the field

Design & document a sql database schema

Goal

Design & document a sql database schema based on the information architecture.

Desired Result

A diagram like those pictured here so we can put it into the Wiki/Discuss/Implement

Resources/Content

Information Architecture from 11/26/18 Design Sprint is:
https://github.com/hackforla/heart/wiki/Information-Architecture

Please also review the 12/3/18 Mockup Discussion notes:
https://hackforla.slack.com/files/U9TEHKS8M/FEHVD4B33/notes_from_design_review_12_3_19.txt

  • acknowledgements from the back of the original paper intake form
  • electronic signature (checkbox + typed name)
  • "Why are you applying to clear your record?"
  • Assume separate accounts and a login are required
  • Assume that profile notes act more like comments added by the logged in user, not a general text field
  • Urgent rush / ordering needs (see below)

Ordering Needs
"What happens with the urgent rush people? Would it prioritize them or allow us to sort it?"
People should be sorted by clinic attended date except when "urgent rush", then move to top in order of urgent rush.

Aka Gina and her team may opt to prioritize certain participants because of special circumstances. For example, someone may need their record expunged to pass a background check for a job application. All urgent-rush people should be before non-urgent-rush people.


For the sake of our future selves/volunteers, we're trying to document the intent/thoughts/assumptions/decisions that lead up to the code.

So this is an extra wordy issue description 😃

Build navigation

As Gina and her team
She'd like to be able to navigate between pages in the main app
And logout

Add a status/timeline component

As Gina and her team
When I work on a individual participant,
I want to be able to track the status of their file
So I know where they are in the process.

Notes

Build main-app's db tables in postgres

We should use a script to create all the necessary database tables in Postgres that will be used by the main-app.

This is currently blocked by

  • #1 the final database schema
  • #9 the docker container for postgres

Build a docker container with postgres

Since we've decided to use Postgres (#3), we want to make it easy to spin up a consistent postgres database for local development

  • Make a Dockerfile for spinning up Postgres 10.6
  • Postgres container should expose port
  • Write docs on how to setup and use pgadmin with the container

We've also discussed setting up a little hosted test db for shared use

Design main navigation

Design the top navigation for the web app. It should include:

  • Home (aka profiles)
  • Intake
  • Reports
  • Search (maybe a search widget or maybe goes to new page)
  • Log out (could also move to footer)

Considerations

  • Does everything need to be in top nav?
  • Should search be a widget or go to new page?
  • How do we show what page you're on?
  • Responsive behavior - and make it easy and nice!
  • Should any of this go in footer? (maybe log out and/or reports?)

Design the intake form

Design the intake form using bootstrap or a similar set of UI components.

Notes

  1. Form needs to include everything listed in the IA up to Profile:
    https://github.com/hackforla/heart/wiki/Information-Architecture
    Should match the paper form.

  2. Put the clinic attended at the top as two fields
    Location and Date (where date autopopulates but is editable)
    Design intent is for this to save for every user until changed and saved

  3. CTA to submit form is "Save and Complete"

  4. Add the checkboxes for all the agreements (we'll hold on signature for now)

  5. Include email, phone OR mailing address as a way to get notified about status (with the agreement)

  6. When form submits successfully, should say "firstName lastName intake saved" as a toast on top of a new blank form.

  7. If form is not saved successfully, show "Intake not saved. Please retry." AND keep them on the form with all the info filled in

  8. Form should cache info so a page refresh doesn't clear it out. Only clear on submit.

  9. If any of the required fields are not filled in, kick them up to the first unfilled field and show the error near the field

Explore framework options for main profile app

Goal

To vet a possible framework for the 'main profile app' to store participant profile info at the office. Note that we will need authentication, this is a CRUD app and we're leaning towards using a sql db.

Possible frameworks are:

Desired Result

Pick a possible framework and try it out. Then write down your thoughts/opinions/notes for the potential framework.

Code/prototypes produced should be used to form your opinions. Demos are nice to have, not required

Examples of what to include:

  • "I really liked bleh bleh, but it was hard to blah blah"
  • Pros (what was good, reasons to do it, likes)
  • Cons (what was hard, reasons to skip it, dislikes)
  • Did this inspire another idea/approach?
  • Can I hook up a sql db? 👍/ 👎
  • Can I make a tiny CRUD form? 👍/ 👎
  • Is this possible? 👍/ 👎
  • Is this time consuming/super hard? 👍/ 👎
  • Is it worth the effort? 👍/ 👎

Background

Assumptions
We'll be able to use what we want as the database.
We'll want to write tests.

Hypothesis
We should go with Python, NodeJS or Ruby as the main backend language because we think many developers coming to Hack for LA will know one of them.


For the sake of our future selves/volunteers, we're trying to document the intent/thoughts/assumptions/decisions that lead up to the code.

So this is an extra wordy issue description 😃

Profile design - expand personal information

When you tap "show more information"
the profile expands to show the rest of the information

  • Mailing Address (text input) - optional
  • Age (radio)
  • Ethnicity (radio)
  • Race (radio)
  • Gender (radio)
  • Income source (radio)
  • Income amount per month (radio)
  • Family status (radio)
  • Housing status (radio)
  • If homeless, are they chronically homeless? (yes/no)
  • Veteran status (radio)

Considerations

  • What order should this info be in?
  • Should everything be the same hierarchy?
  • Should things be editable?

Create basic style guide

Create the visual styling for:

  • typography (h1-h4, field labels, paragraph)
  • buttons (primary, secondary, links)
  • cards (elevation, border radius)
  • colors (background, typography colors, highlight color for actions)
  • field styling (text input, radio, checkboxes, dropdown)
  • table styling (headings and rows)

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.