codeforkansascity/meep

Mapping Energy Efficiency & Public Health

meep

Mapping Energy Efficiency & Public Health

Project Overview

Metropolitan Energy Center (MEC) is a nonprofit promoting energy efficiency, economic development, and environmental vitality in and around Kansas City. As the host of Kansas City's local Clean Cities Coalition, the organization works to assist fleets in converting to alternative fuels. Their projects improve air quality and reduce the use of foreign oil. MEC also takes an active role in reducing energy consumption of residential and commercial buildings by providing training, online tools, and low cost audits.

The aim of this project is to create a central database that consolidates MEC's data on the impact their programs have on air quality and improving public health, and then to create a map-based interface to the data. This app will provide MEC with a means to summarize the impact of their work to their funders. It will also be used to increase the general public's awareness of local projects dedicated to improving sustainabilty.

This repository is only for front-end. Please check back-end repo in https://github.com/codeforkansascity/meep-backend.

Installation

With docker

If you haven't installed docker, go do so now. Make sure that you also install docker-compose.

1. from the project root directory, do docker-compose up --build -d
2. Poulate the development database with docker container exec meep_api_1 python db_operations.py reset. You should only need to do this the first time you run the app.
3. In a browser, go to http://localhost:8200. You should see the frontend running.
4. In another browser tab, go to http://localhost:8000/locations. You should see a bunch of json served by the api.
5. When you are done working on the project, do docker-compose down to shut down the containers.

Without docker

This assumes that you have already installed node.

1. Clone the project from github git clone [email protected]:codeforkansascity/meep.git
2. Change into the frontend directory.
3. npm install or yarn install
4. npm run dev-server or yarn run dev-server
5. In a browser, navigate to http://localhost:8200. You should see the app running.

Wireframe

This is what we want to replicate: https://preview.uxpin.com/3ebaab4bf3defd232e90c32218050bb67db4e8bb#/pages//simulate/no-panels.

How to Contribute

1. Check out the issues page to see what work currently needs to be done. For a more organized layout, try installing the ZenHub plugin.
2. Leave a comment under the issue you want to work on. A project owner will invite you to collaborate on the project and then assign you the issue.
3. Clone the repo to your machine. See here for details on how to do this.
4. Create a branch whose name adheres to the following format: {{issue number}}_{{name of issue}}. For example, if you are working on issue number 4, which is titled "Style super awesome widget", you might name your branch 4_style_widget. For more info on working with branches in git, see here. =======
5. Do some work on your branch.
6. Push your branch back to github and open a pull request. See here for details. A project owner will review your changes and either approve a merge, or leave comments on what needs to be done before your changes can be merged.

Member

Piero A. Pretto : [email protected] Wes Galbraith : [email protected]

meep's Issues

Project Images

React UI/UX

Design database schema

Identify the data fields we will need in the app. Organize the fields into tables, and identify relationships between the tables. Make an ER diagram that we can later use to implement the schema.

MacOS npm install fails due to fsevents

npm install fails on MacOS due to fsevents being required.

Adding it to the dev dependencies resolves the issue.

"fsevents": "~> 2.0.7",

Windows installation section in README

Write detailed instructions on what to install and what commands to run in order to get the flask app running in development mode on a windows machine.

SASS - component styling

Warnings on Installation

There are several deprecation warnings and notices on npm install. Should these be resolved?

npm WARN deprecated [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated [email protected]: The package has been renamed to `open`
npm WARN deprecated [email protected]: core-js@<2.6.8 is no longer maintained. Please, upgrade to core-js@3 or at least to actual version of core-js@2.
npm WARN deprecated [email protected]: I wrote this module a very long time ago; you should use something else.
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN [email protected] requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected] - 3 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react@^15 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:
 - webpack-cli (https://github.com/webpack/webpack-cli)
   The original webpack full-featured CLI.
We will use "yarn" to install the CLI via "yarn add -D".
Do you want to install 'webpack-cli' (yes/no):

SVG Components - Gas Station, Cloud

SASS - panel container styling

React UI - Welcome Panel and subcomponents

Geomapping Integration

Dockerfile

Make a Dockerfile to build an image and run the frontend in a container.

Create project types model

Create a new model ProjectType in meep/models/init.py, and implement a one to many relationship between ProjectType and Project. ProjectType should have a db.Column attribute storing the project type as a string. Make sure to add tests for the new model in tests/test_models.py. For help implementing the Project/ProjectType relationship, you can reference the relationship between Fuel and FuelType.

Project overview in README.md

Write a project overview detailing the purpose of the project. It should describe the problem we are trying to solve, and give a high level overview of the solution our app will provide. Please make sure the file is saved in the project root directory and is named README.md

Add event handler to CheckBoxRow.js

when clicking on checkbox label, checkbox 'checked' view should toggle.

Add map component to frontend

Wireframe for project details page

Create a wireframe for a project details page. The wireframe should include at least one image, address info, contact info, the organization that owns the project, a project summary, and emissions statistics (GHG, GGE, NO_x, and PM2P)

Style ProximitySlider.js component to match uxpin design

Automate data extraction from xlsx

Write a script in read_xlsx.py that pulls data from the two sample excel spreadsheets and converts it into a form that can be passed as arguments to the model constructors.

Front end documentation

React UI Router

CSV data parsing

Set up docker

Create a docker image for the project to make onboarding faster.

Geomapping init

Implement a simple restful api

Implement a simple restful api using flask-restful that we can build off of later. The api should include post, get, put, and delete routes for two resources, Project and User.

Nginx reverse proxy for frontend

See this blog post.

how to build

Hi,
I am interested in this project and I want to learn more to see if I can contribute to some issues.
can you explain how to build it ? since there is no instruction about building in readme.md

React UI - Project List Panel and sub components

Data Collection

Identify data sources for the app, and collect them in one place. Data sources could include the Metropolitan Energy Center's data, an organization that may be willing to contribute their data, or open databases on efforts to improve energy efficiency.

package.json missing jquery

npm install reports jquery > 1.9.1 is required by bootstrap but it not included. Including jquery 3.4.1 in pacakge.json resolves the issue.

GIS/Geomapping pricing

React UI - Filter Panel and sub components

Set up React dependencies

npm install failure on MacOS 10.14

There is a problem with XCode and node-sass 4.11.0. Upgrading to 0.4.12 resolves the issue.

React UX - Dynamic SVG Location Marker

Assign location svg marker color by project type prop.

Style DateRangeSlider.js component to match uxpin design

Seed test database with fake data

Write a function in seed_db.py that inserts fake data into the database.

Zenhub managament

Implement a simple flask-sqlalchemy schema

Implement a simple schema that we can later build off of. The schema only needs to include two or three models, maybe Projects and Users. There should be at least one 1-many relationship implemented, perhaps projects submitted by a user.

Write unit tests for models

Write tests that check that each model can be created, can write to the database, that relationships were defined correctly, and that queries work as expected.

package.json issues

All of the packages are listed as dependencies. They should be broken out into dependencies and devDependencies respectively. If it isn't required to run behind nginx or pm2 in production, it's not a dependency.

Helper function for converting address info to GIS coordinates

Write a function in the utils folder that takes a street address, city, state, and zip, and returns latitude and longitude. Use of any third party library is acceptable here.

SASS - setup folder construction

Create a table for admins

Add a model for Admin accounts in the file meep/models/init.py. It should at least include email, name and password_hash attributes. There are already several models to bootstrap off of. Make sure to add tests similar to the ones found in /tests/test_models.py

Determine LOE to bring project under some standards

Investigate the team's receptiveness and LOE to convert the existing code into a more standardized format; such as basing from https://github.com/react-boilerplate/react-boilerplate

Wireframe for add a project page

Create a wireframe for a page that allows a user to add information for a new project. The page should at least include form fields for project name, description, location, year started, emissions statistics (GHGs, GGEs, PM2P, and NOx), and a file upload field for a project photo.

SASS styling

Ideas

Ideas for features

Linux/MacOS installation instructions in README

Write detailed instructions on what to install and what commands to run in order to get the flask app running in development mode on a linux or macos machine.

Change default argument of create_app to a string

Thanks to Adam Mertz for pointing this out.

As explained in this article, using a mutable type as a default argument to a python method can result in unexpected behavior if the object state changes during runtime. Accordingly, we should change create_app to accept string arguments which map to config classes via a dictionary.