11 |
12 | [INSERT DRAFT FROM THE Recruit volunteers for team open roles issue]
13 |
--------------------------------------------------------------------------------
/pre_commit_lint.sh:
--------------------------------------------------------------------------------
1 | for file in $(git diff --cached --name-only | grep -E '\.(js|jsx)$')
2 | do
3 | git show ":$file" | node_modules/.bin/eslint --fix-dry-run --stdin --stdin-filename "$file" # we only want to lint the staged changes, not any un-staged changes
4 | if [ $? -ne 0 ]; then
5 | echo "ESLint failed on staged file '$file'. Please check your code and try again. You can run ESLint manually via npm run eslint."
6 | exit 1 # exit with failure status
7 | fi
8 | done
--------------------------------------------------------------------------------
/src/assets/facebook-round.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/common/ReactDayPicker/Weekday.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { WeekdayElementProps } from 'react-day-picker';
3 |
4 | function Weekday({
5 | weekday, className, localeUtils, locale,
6 | }) {
7 | const weekdayName = localeUtils.formatWeekdayLong(weekday, locale);
8 | return (
9 |
14 |
26 |
27 | Contact Us
28 |
29 |
32 |
33 |
34 | );
35 | }
36 |
37 | export default Contact;
38 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/emergent-request.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: Emergent Request
3 | about: When you discover something in your issue that is out of scope and it needs
4 | a new issue or discussion.
5 | title: 'ER: (title, required)'
6 | labels: 'Complexity: Small, Discussion, Emergent Request, Feature: Missing, Question,
7 | Role: Missing, size: 0.25pt'
8 | assignees: ''
9 |
10 | ---
11 |
12 | ### Emergent Request - Problem Description
13 | - (short-answer, required)
14 |
15 | ### Relevant Issue(s)
16 | - (issue-hyperlink, required)
17 |
18 | ### Date discovered
19 | - (date, required)
20 |
21 | ### Did this require a temporary workaround? If yes, what was it?
22 | - (Y/N, required)
23 | - (short-answer, optional)
24 |
25 | ### Who was involved
26 | - (@name, optional)
27 |
28 | ### What happens if this is not addressed
29 | - (short-answer, required)
30 |
31 | ### Resources
32 | - (hyperlink-list, optional)
33 |
34 | ### Recommended Action Items
35 | - (checkbox-list, optional)
36 | - [ ] Share issue link with team Lead
37 | - [ ] Add to upcoming agenda
38 |
39 | ### Potential Solutions
40 | - (short-answer, optional)
41 |
--------------------------------------------------------------------------------
/src/components/common/MultiSelect/SelectItem.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import MenuItem from '@mui/material/MenuItem';
4 | import makeStyles from '@mui/styles/makeStyles';
5 |
6 | const useStyles = makeStyles(() => ({
7 | selectItemTextWrap: {
8 | whiteSpace: 'normal',
9 | },
10 | }));
11 |
12 | function SelectItem({
13 | text, value, onClick, disabled,
14 | }) {
15 | const classes = useStyles();
16 | return (
17 |
29 | );
30 | }
31 |
32 | export default SelectItem;
33 |
34 | SelectItem.propTypes = {
35 | text: PropTypes.string,
36 | value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
37 | onClick: PropTypes.func.isRequired,
38 | disabled: PropTypes.bool,
39 | };
40 |
41 | SelectItem.defaultProps = {
42 | text: '',
43 | disabled: false,
44 | };
45 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/blank-dev-issue.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: Blank Dev Issue
3 | about: Template for developers to create issues and prepare for engineering tickets.
4 | title: ''
5 | labels: 'Complexity: Missing, draft, Feature: Missing, Milestone: Missing, Role: Frontend,
6 | size: Missing'
7 | assignees: ''
8 |
9 | ---
10 |
11 | ### Overview
12 |
13 | We need to do X for Y reason.
14 |
15 | ### More Info (optional)
16 |
17 | Explain here if the issue requires additional info
18 |
19 | ### Action Items
20 |
21 | - [ ] Break the issue down into manageable and actionable steps here
22 | - [ ] action 2
23 | - [ ] action 3
24 | - [ ] action 4
25 |
26 | ### Resources/Instructions
27 |
28 | - Figma Section:
29 | - Related Design Ticket:
30 |
31 | Screenshot before proposed changes
32 |33 | [insert screenshot here] 34 |
35 |Screenshot of Figma
38 |39 | [insert screenshot here] 40 |
41 |Screenshot of new feature from localhost
44 |45 | [insert screenshot here] 46 |
47 |
11 | { Object.keys(REQUEST_TYPES).map(type => {
12 | if (Object.keys(selectedRequests).includes(type))
13 | return (
14 |
31 | );
32 | }
33 |
34 | export default RequestsBarChart;
35 |
--------------------------------------------------------------------------------
/src/main.jsx:
--------------------------------------------------------------------------------
1 | import 'core-js/stable';
2 | import 'regenerator-runtime/runtime';
3 | import React from 'react';
4 | import ReactDOM from 'react-dom';
5 | import { Provider } from 'react-redux';
6 | import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles';
7 | import { CssBaseline } from '@mui/material';
8 | import DbProvider from '@db/DbProvider';
9 | import theme from '@theme/theme';
10 | import store from '@src/redux/store';
11 | import App from '@src/App';
12 |
13 | if (import.meta.env.DEV && !import.meta.env.VITE_MAPBOX_TOKEN) {
14 | alert('Missing Mapbox token. Please run `npm run setup`.')
15 | }
16 |
17 | // Expose theme to debugging console like on mui.com.
18 | // https://mui.com/material-ui/customization/typography/#default-values
19 | window.theme = theme;
20 |
21 | ReactDOM.render(
22 |
15 |
26 | )
27 | else
28 | return null;
29 | })}
30 |
16 | { type } ({selectedRequests[type]})
17 |
18 |
25 |
20 |
30 | );
31 | }
32 |
33 | export default SelectGroup;
34 |
35 | SelectGroup.propTypes = {
36 | name: PropTypes.string.isRequired,
37 | items: PropTypes.arrayOf(PropTypes.shape({})),
38 | onChange: PropTypes.func,
39 | };
40 |
41 | SelectGroup.defaultProps = {
42 | items: [],
43 | onChange: () => null,
44 | };
45 |
--------------------------------------------------------------------------------
/.github/workflows/build_test_backend.yml:
--------------------------------------------------------------------------------
1 | name: Build and Test
2 | on:
3 | push:
4 | paths:
5 | - 'server/**'
6 | defaults:
7 | run:
8 | shell: bash
9 | working-directory: server
10 | jobs:
11 | build:
12 | runs-on: ubuntu-latest
13 | steps:
14 | - uses: actions/checkout@v2
15 | - name: Install and configure API
16 | run: |
17 | cp .env.example .env
18 | docker-compose up --no-start api
19 | - name: Run API (w/docker debugging)
20 | run: |
21 | docker-compose up -d api
22 | docker ps -a
23 | docker network inspect 311_data_default
24 | nc -zv localhost 5432
25 | docker-compose logs db
26 | docker-compose logs api
27 | - name: Lint API
28 | run: docker-compose run api flake8
29 | - name: Seed the test database
30 | run: docker-compose run -e TESTING=True api alembic upgrade head
31 | - name: Run unit tests
32 | run: |
33 | docker-compose run api pytest
34 | docker-compose run prefect pytest
35 | # - name: Run Postman tests
36 | # run: chmod +x postman/test.sh && postman/test.sh
37 |
--------------------------------------------------------------------------------
/src/theme/typography.js:
--------------------------------------------------------------------------------
1 | import fonts from '@theme/fonts';
2 |
3 | // Note to future maintainers...
4 |
5 | // Ideally, define only font-size in the typography object below.
6 |
7 | // Modifiers like font-weight and font-family, are component specific.
8 | // Therefore, consider defining them in the className property of the
9 | // {`${name} (${items.length})`}
21 | {items.map(item => (
22 |
19 | {children}
20 |
21 |
32 |
36 | );
37 | }
38 |
39 | ContactImage.propTypes = {
40 | children: PropTypes.node.isRequired,
41 | };
42 |
43 | export default ContactImage;
44 |
--------------------------------------------------------------------------------
/src/features/Map/districts.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 |
3 | import { COUNCILS, CITY_COUNCILS } from '@components/common/CONSTANTS';
4 | import ncGeoJson from '@data/nc-boundary-2019-modified.json';
5 | import ccGeoJson from '@data/la-city-council-districts-2012.json';
6 | import { isPointWithinGeo } from './geoUtils';
7 |
8 | export const ncBoundaries = ncGeoJson;
9 | export const ccBoundaries = ccGeoJson;
10 |
11 | export function ncNameFromId(ncId) {
12 | return COUNCILS.find(c => c.id == ncId)?.name;
13 | }
14 |
15 | export function ccNameFromId(ccId) {
16 | return CITY_COUNCILS.find(c => c.id == ccId)?.name;
17 | }
18 |
19 | export function ncInfoFromLngLat({ lng, lat }) {
20 | for (let i = 0; i < ncBoundaries.features.length; i++) {
21 | const feature = ncBoundaries.features[i];
22 | if (isPointWithinGeo([lng, lat], feature))
23 | return {
24 | name: ncNameFromId(feature.properties.nc_id),
25 | url: feature.properties.waddress || feature.properties.dwebsite,
26 | };
27 | }
28 | return null;
29 | }
30 |
31 | export function ccNameFromLngLat({ lng, lat }) {
32 | for (let i = 0; i < ccBoundaries.features.length; i++)
33 | if (isPointWithinGeo([lng, lat], ccBoundaries.features[i]))
34 | return ccNameFromId(ccBoundaries.features[i].properties.name);
35 | return null;
36 | }
37 |
--------------------------------------------------------------------------------
/src/redux/reducers/mapFilters.js:
--------------------------------------------------------------------------------
1 | import { REQUEST_TYPES, MAP_DATE_RANGES, COUNCILS } from '@components/common/CONSTANTS';
2 |
3 | export const types = {
4 | UPDATE_MAP_DATE_RANGE: 'UPDATE_MAP_DATE_RANGE',
5 | };
6 |
7 | export const updateMapDateRange = ({ dateRange, startDate, endDate }) => ({
8 | type: types.UPDATE_MAP_DATE_RANGE,
9 | payload: { dateRange, startDate, endDate },
10 | });
11 |
12 | // set all types to either true or false
13 | const allRequestTypes = value => (
14 | Object.keys(REQUEST_TYPES).reduce((acc, type) => {
15 | acc[type] = value;
16 | return acc;
17 | }, { All: value })
18 | );
19 |
20 | const allCouncils = COUNCILS.map(council => council.name);
21 |
22 | const initialState = {
23 | dateRange: MAP_DATE_RANGES[0].id,
24 | startDate: MAP_DATE_RANGES[0].startDate,
25 | endDate: MAP_DATE_RANGES[0].endDate,
26 | councils: allCouncils,
27 | requestTypes: allRequestTypes(true),
28 | };
29 |
30 | export default (state = initialState, action) => {
31 | switch (action.type) {
32 | case types.UPDATE_MAP_DATE_RANGE: {
33 | const { dateRange, startDate, endDate } = action.payload;
34 | return {
35 | ...state,
36 | dateRange,
37 | startDate,
38 | endDate,
39 | };
40 | }
41 | default:
42 | return state;
43 | }
44 | };
45 |
--------------------------------------------------------------------------------
/src/assets/typcn_export.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/features/Map/zoomTooltip.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import Tooltip from '@mui/material/Tooltip';
4 |
5 | function ZoomTooltip({ show }) {
6 | return (
7 |
33 | {children}
34 |
35 |
14 |
15 | Zoom features are limited while locked into a
16 | neighborhood council.
17 |
18 |
19 | To reset zoom features, please exit the boundary selection
20 | by clicking the 'X' on the selected Neighborhood Council
21 | within the 'Boundaries' filter of the 'Search & Filters'
22 | modal.
23 |
33 |
34 | We are open to suggestions and feedback and would love the opportunity to get connected.
35 |
36 |
37 |
22 |
25 | );
26 | }
27 |
28 | export default Desktop;
29 |
30 | Desktop.propTypes = {
31 | initialState: PropTypes.shape({
32 | councilId: PropTypes.string,
33 | rtId1: PropTypes.string,
34 | rtId2: PropTypes.string,
35 | rtId3: PropTypes.string,
36 | rtId4: PropTypes.string,
37 | rtId5: PropTypes.string,
38 | rtId6: PropTypes.string,
39 | rtId7: PropTypes.string,
40 | rtId8: PropTypes.string,
41 | rtId9: PropTypes.string,
42 | rtId10: PropTypes.string,
43 | rtId11: PropTypes.string,
44 | rtId12: PropTypes.string,
45 | requestStatusOpen: PropTypes.string,
46 | requestStatusClosed: PropTypes.string,
47 | startDate: PropTypes.string,
48 | endDate: PropTypes.string,
49 | }).isRequired,
50 | };
51 |
--------------------------------------------------------------------------------
/src/components/DateSelector/useStyles.js:
--------------------------------------------------------------------------------
1 | import makeStyles from '@mui/styles/makeStyles';
2 |
3 | const useStyles = makeStyles(theme => ({
4 | label: {
5 | marginBottom: 5,
6 | display: 'inline-block',
7 | fontFamily: 'Roboto',
8 | },
9 | selector: {
10 | fontFamily: 'Roboto',
11 | display: 'flex',
12 | justifyContent: 'space-between',
13 | alignItems: 'center',
14 | '& > div': {
15 | paddingTop: 0,
16 | paddingRight: 0,
17 | paddingBottom: 0,
18 | },
19 | marginLeft: -10,
20 | },
21 | separator: {
22 | marginLeft: theme.gaps.md,
23 | borderRight: `1.5px solid ${theme.palette.text.secondaryLight}`,
24 | height: '1.2rem',
25 | },
26 | option: {
27 | cursor: 'pointer',
28 | padding: 6,
29 | margin: '2px 0',
30 | fontFamily: 'Roboto',
31 | width: '100%',
32 | backgroundColor: theme.palette.primary.dark,
33 | border: 'none',
34 | textAlign: 'left',
35 | color: theme.palette.text.secondaryLight,
36 | '&:hover': {
37 | backgroundColor: theme.palette.selected.primary,
38 | },
39 | },
40 | selected: {
41 | backgroundColor: `${theme.palette.selected.primary} !important`,
42 | },
43 | tooltipParagraph: {
44 | margin: '1px',
45 | },
46 | iconStyle: {
47 | verticalAlign: 'middle',
48 | },
49 | header: {
50 | fontSize: '12.47px',
51 | fontWeight: theme.typography.fontWeightMedium,
52 | marginBottom: '8px',
53 | },
54 | }));
55 |
56 | export default useStyles;
57 |
--------------------------------------------------------------------------------
/src/components/Loading/FunFactCard.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react';
2 | import { styled } from '@mui/material/styles';
3 | import { Card, Box, Typography } from '@mui/material';
4 | import { seconds } from '@utils';
5 | import facts from '@data/facts';
6 |
7 | const StyledCard = styled(Card)({
8 | display: 'flex',
9 | alignItems: 'flex',
10 | justifyContent: 'center',
11 | });
12 |
13 | const StyledBox = styled(Box)(({ theme }) => ({
14 | position: 'absolute',
15 | bottom: '12vh',
16 | backgroundColor: '#424242',
17 | padding: theme.spacing(3, 3, 3),
18 | boxShadow: theme.shadows[5],
19 | textAlign: 'center',
20 | maxWidth: '533px',
21 | width: 'auto',
22 | borderRadius: '10px',
23 | zIndex: 50000, // This prevents from being overlay by LoadingModal's backdrop
24 | }));
25 |
26 | export default function FunFactCard() {
27 | const [currentFactIndex, setCurrentFactIndex] = useState(0);
28 | const factsLength = facts.length;
29 |
30 | useEffect(() => {
31 | const intervalId = setInterval(() => {
32 | setCurrentFactIndex(prevIndex => (prevIndex + 1) % factsLength);
33 | }, seconds(5));
34 | return () => clearInterval(intervalId);
35 | }, [factsLength]);
36 |
37 | return (
38 | 
5 |
7 |
20 |
31 |
32 |
33 |
--------------------------------------------------------------------------------
/src/components/DateSelector/DateRanges.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | function DateRanges({
5 | options, onSelect, dates, classes,
6 | }) {
7 | function highlightIfSelected(optionDays, selectedDays) {
8 | if (dates.length > 0) {
9 | const [from, to, start, end] = [
10 | ...optionDays,
11 | ...selectedDays,
12 | ].map(date => date.toLocaleDateString('en-US'));
13 | const isSelected = from === start && to === end;
14 |
15 | if (isSelected) return classes.selected;
16 | }
17 | return ' ';
18 | }
19 |
20 | return (
21 | {{to_name}},
8 |9 | We appreciate you taking the time to leave a suggestion for our 311 Data service request map. 10 | Your feedback is important to us, and we are always looking for ways to improve our data visualization tool. 11 | Please follow our LinkedIn for updates on this civic tech project and others within the Hack for LA organization. 12 |
13 | 14 |
15 | Sincerely,
16 |
17 | 311 Data Volunteers at Hack for LA.
18 |
22 | {options
23 | ? options.map(option => (
24 |
37 | ))
38 | : null}
39 |
40 | );
41 | }
42 |
43 | const {
44 | func, arrayOf, shape, string,
45 | } = PropTypes;
46 |
47 | const Option = shape({
48 | text: string,
49 | dates: arrayOf(Date),
50 | });
51 |
52 | DateRanges.propTypes = {
53 | onSelect: func.isRequired,
54 | options: arrayOf(Option).isRequired,
55 | dates: arrayOf(Date),
56 | classes: PropTypes.shape({
57 | selected: PropTypes.string,
58 | option: PropTypes.string,
59 | }),
60 | };
61 |
62 | DateRanges.defaultProps = {
63 | classes: { selected: '', option: '' },
64 | dates: [],
65 | };
66 |
67 | export default DateRanges;
68 |
--------------------------------------------------------------------------------
/src/components/common/SearchBar.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import makeStyles from '@mui/styles/makeStyles';
4 | import SearchIcon from '@mui/icons-material/Search';
5 |
6 | const useStyles = makeStyles(theme => ({
7 | wrapper: {
8 | display: 'flex',
9 | borderBottom: `1px solid ${theme.palette.primary.focus}`,
10 | paddingBottom: theme.gaps.xs,
11 | },
12 | input: {
13 | border: 'none',
14 | backgroundColor: theme.palette.primary.dark,
15 | color: theme.palette.text.secondaryLight,
16 | '&::placeholder': {
17 | ...theme.typography.body2,
18 | color: theme.palette.text.secondaryDark,
19 | },
20 | paddingLeft: theme.gaps.xs,
21 | width: '100%',
22 | },
23 | icon: {
24 | display: 'inline-block',
25 | fontSize: 20,
26 | color: theme.palette.primary.focus,
27 | },
28 | }));
29 |
30 | function SearchBar({
31 | value,
32 | placeholder,
33 | onChange,
34 | }) {
35 | const classes = useStyles();
36 |
37 | return (
38 |
39 |
50 | );
51 | }
52 |
53 | export default SearchBar;
54 |
55 | SearchBar.propTypes = {
56 | value: PropTypes.string,
57 | placeholder: PropTypes.string,
58 | onChange: PropTypes.func,
59 | };
60 |
61 | SearchBar.defaultProps = {
62 | value: null,
63 | placeholder: 'Search',
64 | onChange: () => null,
65 | };
66 |
--------------------------------------------------------------------------------
/src/assets/twitter-round.svg:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/src/components/layout/TextHeading/TextHeadingFAQ.jsx:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | import React from 'react';
3 | import makeStyles from '@mui/styles/makeStyles';
4 | import Typography from '@mui/material/Typography';
5 | import cityBackground from '@assets/city_background_header.png'
6 |
7 | const useStyles = makeStyles(theme => ({
8 | headingBackground: {
9 | background: `url(${cityBackground}) center 57% / cover`,
10 | backgroundPosition: 'center 57%',
11 | width: '100%',
12 | height: '240px',
13 | position: 'relative',
14 | },
15 | backdrop: {
16 | width: '100%',
17 | height: '100%',
18 | background: `linear-gradient(180deg, rgba(53, 82, 129, 0.4) 50%, rgba(41, 64, 79, 0.8) 100%, rgba(29, 63, 90, 0.4) 100%)`,
19 | backgroundPosition: 'center',
20 | },
21 | headingOverlayText: {
22 | left: '50%',
23 | color: 'white',
24 | position: 'absolute',
25 | textAlign: 'center',
26 | top: '50%',
27 | transform: 'translate(-50%, -70%)',
28 | },
29 | contentHeading: {
30 | fontWeight: theme.typography.fontWeightBold,
31 | },
32 | }));
33 |
34 | // TextHeading provides a standardized heading area and custom title
35 | // below the Header on all content pages.
36 |
37 | function TextHeadingFAQ({ children }) {
38 | const classes = useStyles();
39 |
40 | return (
41 |
42 |
43 |
49 | );
50 | }
51 |
52 | TextHeadingFAQ.defaultProps = {
53 | children: {},
54 | };
55 |
56 | TextHeadingFAQ.propTypes = {
57 | children: PropTypes.node,
58 | };
59 |
60 | export default TextHeadingFAQ;
61 |
--------------------------------------------------------------------------------
/src/components/layout/TextHeading/index.jsx:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | import React from 'react';
3 | import makeStyles from '@mui/styles/makeStyles';
4 | import Typography from '@mui/material/Typography';
5 | import cityBackground from '@assets/city_background_header.png'
6 |
7 | const useStyles = makeStyles(theme => ({
8 | headingBackground: {
9 | background: `url(${cityBackground}) center 57% / cover`,
10 | backgroundPosition: 'center 57%',
11 | width: '100%',
12 | height: '240px',
13 | position: 'relative',
14 | },
15 | backdrop: {
16 | width: '100%',
17 | height: '100%',
18 | background: `linear-gradient(180deg, rgba(53, 82, 129, 0.4) 50%, rgba(41, 64, 79, 0.8) 100%, rgba(29, 63, 90, 0.4) 100%)`,
19 | backgroundPosition: 'center',
20 | },
21 | headingOverlayText: {
22 | left: '50%',
23 | color: 'white',
24 | position: 'absolute',
25 | textAlign: 'center',
26 | top: '50%',
27 | transform: 'translate(-50%, -70%)',
28 | zIndex: '1',
29 | },
30 | contentHeading: {
31 | fontWeight: theme.typography.fontWeightBold,
32 | },
33 | }));
34 |
35 | // TextHeading provides a standardized heading area and custom title
36 | // below the Header on all content pages.
37 |
38 | function TextHeading({ children }) {
39 | const classes = useStyles();
40 |
41 | return (
42 |
44 |
45 |
47 |
48 | {children}
46 |
43 |
44 |
52 | );
53 | }
54 |
55 | TextHeading.defaultProps = {
56 | children: {},
57 | };
58 |
59 | TextHeading.propTypes = {
60 | children: PropTypes.node,
61 | };
62 |
63 | export default TextHeading;
64 |
--------------------------------------------------------------------------------
/backend/regions.js:
--------------------------------------------------------------------------------
1 | const regions = [
2 | {
3 | regionId: 1,
4 | regionName: 'North East Valley',
5 | latitude: 34.261460423152776,
6 | longitude: -118.38246002952808,
7 | },
8 | {
9 | regionId: 2,
10 | regionName: 'North West Valley',
11 | latitude: 34.26605708058946,
12 | longitude: -118.53919119943411,
13 | },
14 | {
15 | regionId: 3,
16 | regionName: 'South West Valley',
17 | latitude: 34.18202774052978,
18 | longitude: -118.56342162172783,
19 | },
20 | {
21 | regionId: 4,
22 | regionName: 'South East Valley',
23 | latitude: 34.17090721875934,
24 | longitude: -118.41457419030115,
25 | },
26 | {
27 | regionId: 5,
28 | regionName: 'Central 1',
29 | latitude: 34.09594947025774,
30 | longitude: -118.33731631698825,
31 | },
32 | {
33 | regionId: 6,
34 | regionName: 'Central 2',
35 | latitude: 34.04987724541125,
36 | longitude: -118.26900925500073,
37 | },
38 | {
39 | regionId: 7,
40 | regionName: 'East',
41 | latitude: 34.108763950739,
42 | longitude: -118.27630256279464,
43 | },
44 | {
45 | regionId: 8,
46 | regionName: 'North East LA',
47 | latitude: 34.089054958305475,
48 | longitude: -118.20459646824243,
49 | },
50 | {
51 | regionId: 9,
52 | regionName: 'South LA 2',
53 | latitude: 33.97653096878102,
54 | longitude: -118.27194409313499,
55 | },
56 | {
57 | regionId: 10,
58 | regionName: 'South LA 1',
59 | latitude: 34.01520365326597,
60 | longitude: -118.32558318464251,
61 | },
62 | {
63 | regionId: 11,
64 | regionName: 'West LA',
65 | latitude: 34.03265490602317,
66 | longitude: -118.42520518385855,
67 | },
68 | {
69 | regionId: 12,
70 | regionName: 'Harbor',
71 | latitude: 33.78488892465509,
72 | longitude: -118.27994494838939,
73 | },
74 | ];
75 |
76 | export default regions;
77 |
--------------------------------------------------------------------------------
/src/components/layout/Main/Desktop/Export/ExportFailure.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import {
4 | styled,
5 | Box,
6 | Icon,
7 | IconButton,
8 | Stack,
9 | Typography,
10 | } from '@mui/material';
11 | import Close from '@assets/close.svg';
12 | import Warning from '@assets/warning-error.svg';
13 | import useStyles from './useStyles';
14 |
15 | const StyledBox = styled(Box)(({ theme }) => ({
16 | position: 'absolute',
17 | top: '30%',
18 | backgroundColor: '#29404F',
19 | padding: theme.spacing(3),
20 | boxShadow: theme.shadows[5],
21 | textAlign: 'center',
22 | maxWidth: '317px',
23 | maxHeight: '220px',
24 | borderRadius: '10px',
25 | }));
26 |
27 | function ExportFailure({ onClose }) {
28 | const classes = useStyles();
29 |
30 | return (
31 |
45 |
46 |
50 |
51 |
47 | {children}
48 |
49 | 53 | went wrong. Please try 54 |
55 | again later. 56 |
50 |
56 |
58 |
65 |
66 | );
67 | }
68 |
69 | export default Reports;
70 |
--------------------------------------------------------------------------------
/src/features/Map/mapColors.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 |
3 | import { REQUEST_TYPES } from '@components/common/CONSTANTS';
4 |
5 | // carto schemes from: https://carto.com/carto-colors/
6 |
7 | const COLOR_SCHEMES = {
8 | original: Object.keys(REQUEST_TYPES).map(type => REQUEST_TYPES[type].color),
9 |
10 | // carto prism
11 | prism: [
12 | '#5F4690',
13 | '#1D6996',
14 | '#38A6A5',
15 | '#0F8554',
16 | '#73AF48',
17 | '#EDAD08',
18 | '#E17C05',
19 | '#CC503E',
20 | '#94346E',
21 | '#6F4070',
22 | '#994E95',
23 | // '#666666'
24 | ],
25 |
26 | // carto vivid
27 | vivid: [
28 | '#E58606',
29 | '#5D69B1',
30 | '#52BCA3',
31 | '#99C945',
32 | '#CC61B0',
33 | '#24796C',
34 | '#DAA51B',
35 | '#2F8AC4',
36 | '#764E9F',
37 | '#ED645A',
38 | '#CC3A8E',
39 | '#A5AA99'
40 | ],
41 |
42 | // carto bold
43 | bold: [
44 | '#7F3C8D',
45 | '#11A579',
46 | '#3969AC',
47 | '#F2B701',
48 | '#E73F74',
49 | '#80BA5A',
50 | '#E68310',
51 | '#008695',
52 | '#CF1C90',
53 | '#f97b72',
54 | '#4b4b8f',
55 | '#A5AA99'
56 | ],
57 |
58 | // carto pastel
59 | pastel: [
60 | '#66C5CC',
61 | '#F6CF71',
62 | '#F89C74',
63 | '#DCB0F2',
64 | '#87C55F',
65 | '#9EB9F3',
66 | '#FE88B1',
67 | '#C9DB74',
68 | '#8BE0A4',
69 | '#B497E7',
70 | '#D3B484',
71 | '#B3B3B3'
72 | ],
73 |
74 | club: Array.from({ length: 11 }).map((_, index) => {
75 | const hue = 170 + Math.round(190 * index / 11);
76 | return `hsl(${hue}, 100%, 50%)`;
77 | }),
78 |
79 | mono: [
80 | '#FFFFFF'
81 | ],
82 | }
83 |
84 | export const COLOR_SCHEME_NAMES = Object.keys(COLOR_SCHEMES);
85 |
86 | export function getColors(scheme) {
87 | const offset = scheme === 'prism' ? 2 : 0;
88 | const colors = COLOR_SCHEMES[scheme];
89 | return Object.keys(REQUEST_TYPES).reduce((out, type, idx) => {
90 | out[type] = colors[(idx + offset) % colors.length];
91 | return out;
92 | }, {});
93 | }
94 |
--------------------------------------------------------------------------------
/src/components/layout/Main/Desktop/Export/ExportWarning.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import {
4 | styled,
5 | Box,
6 | Button,
7 | Icon,
8 | IconButton,
9 | Stack,
10 | Typography,
11 | } from '@mui/material';
12 | import Close from '@assets/close.svg';
13 | import InfoAlert from '@assets/yellow_tips.svg';
14 | import useStyles from './useStyles';
15 |
16 | const StyledBox = styled(Box)(({ theme }) => ({
17 | position: 'absolute',
18 | top: '30%',
19 | left: '45%',
20 | backgroundColor: theme.palette.primary.main,
21 | padding: theme.spacing(4),
22 | boxShadow: theme.shadows[5],
23 | textAlign: 'center',
24 | maxWidth: '280px',
25 | maxHeight: '418px',
26 | borderRadius: '8px',
27 | whiteSpace: 'pre-wrap',
28 | }));
29 |
30 | function ExportWarning({ onClose, errorType }) {
31 | const classes = useStyles();
32 |
33 | return (
34 | Iteration 1
31 |32 | 33 | Link to notes: `REPLACE WITH COMMENT URL` 34 | 35 | `REPLACE WITH SCREENSHOT UPLOAD` 36 | 37 |
38 |Before Screenshot
47 |48 | 49 | `REPLACE WITH SCREENSHOT UPLOAD` 50 | 51 |
52 |After Screenshot (Finalized)
55 |56 | 57 | `REPLACE WITH SCREENSHOT UPLOAD` 58 | 59 |
60 |Iteration Dropdown Copy/Paste
65 |
66 |
67 | ```
68 |
70 |
71 | Link to notes: `REPLACE WITH COMMENT URL`
72 |
73 | `REPLACE WITH SCREENSHOT UPLOAD`
74 |
75 |
77 | ```
78 |
79 | Iteration X
69 |
Instructions for Engineering Hand Off
83 |84 | 85 | To Start Engineering Hand Off... 86 | 1. Ensure all Hand Off Materials are filled in 87 | 3. Add the "ready for dev lead" label 88 | 4. Leave a comment saying "This ticket is ready for engineering hand off." 89 | 90 | 91 |
92 |
55 |
56 | {toNonBreakingSpaces(
57 | `Data last updated ${moment(lastUpdated).format('MM/DD/YY')}`
58 | )}
59 |
60 |
61 | )
62 | );
63 | }
64 |
65 | export default LastUpdated;
66 |
--------------------------------------------------------------------------------
/src/pages/Blog/Blog.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactMarkdown from 'react-markdown';
3 | import {
4 | Container,
5 | Box,
6 | Grid,
7 | List,
8 | ListItem,
9 | } from '@mui/material';
10 | import makeStyles from '@mui/styles/makeStyles';
11 | import useContentful from '../../hooks/useContentful';
12 |
13 | const query = `
14 | query {
15 | blogPostCollection(order: publishDate_DESC) {
16 | items {
17 | sys { id }
18 | slug
19 | title
20 | body
21 | publishDate
22 | }
23 | }
24 | }
25 | `;
26 |
27 | const useStyles = makeStyles({
28 | root: {
29 | color: 'black',
30 | backgroundColor: 'white',
31 | padding: '2em',
32 | '& h1': {
33 | fontSize: '2.5em',
34 | },
35 | '& img': {
36 | maxWidth: '100%',
37 | height: 'auto',
38 | display: 'block',
39 | marginLeft: 'auto',
40 | marginRight: 'auto',
41 | },
42 | },
43 | });
44 |
45 | function Blog() {
46 | const { data, errors } = useContentful(query);
47 | const classes = useStyles();
48 |
49 | React.useEffect(() => {
50 | if (errors) console.log(errors);
51 | }, [errors]);
52 |
53 | if (!data) {
54 | return null;
55 | }
56 | return (
57 | {item.title}
63 |64 | {new Date(item.publishDate).toLocaleDateString()} 65 |
66 |-
72 | { data.blogPostCollection.items.map(item => (
73 |
38 |
43 | INFORMATION
44 |
45 | {address && (
46 |
47 | Address:
48 | {address}
49 |
50 | )}
51 | {nc && (
52 |
53 | Neighborhood Council District:
54 |
61 | {nc.councilName}
62 |
63 |
64 | )}
65 |
66 | );
67 | }
68 |
69 | export default LocationDetail;
70 |
71 | LocationDetail.propTypes = {
72 | address: PropTypes.string,
73 | nc: PropTypes.shape({
74 | website: PropTypes.string,
75 | councilName: PropTypes.string,
76 | }),
77 | };
78 |
79 | LocationDetail.defaultProps = {
80 | address: undefined,
81 | nc: null,
82 | };
83 |
--------------------------------------------------------------------------------
/.github/workflows/Continuous_Deployment_Frontend_Dev.yml:
--------------------------------------------------------------------------------
1 | name: Deploy_Frontend_Dev
2 |
3 | on:
4 | push:
5 | branches:
6 | - dev
7 | paths:
8 | - 'client/**'
9 | workflow_dispatch:
10 |
11 | defaults:
12 | run:
13 | working-directory: client
14 |
15 | jobs:
16 | deploy_frontend_dev:
17 | runs-on: ubuntu-latest
18 | steps:
19 | - name: Checkout Repository Code
20 | uses: actions/checkout@v1
21 | - name: Setup Node
22 | uses: actions/setup-node@v3
23 | with:
24 | node-version: 12
25 | - name: Rebuild sass
26 | run: npm rebuild node-sass
27 | - name: Install Packages
28 | run: npm install
29 | - name: Setup environment
30 | run: |
31 | echo VITE_MAPBOX_TOKEN=${{ secrets.VITE_MAPBOX_TOKEN }} > .env
32 | echo MAPBOX_STREETS_URL=${{ secrets.MAPBOX_STREETS_URL }} >> .env
33 | echo MAPBOX_SATELLITE_URL=${{ secrets.MAPBOX_SATELLITE_URL }} >> .env
34 | echo API_URL=${{ secrets.API_URL_DEV }} >> .env
35 | echo REPORT_URL=${{ secrets.REPORT_URL }} >> .env
36 | echo SENTRY_CLIENT_DSN=${{ secrets.SENTRY_CLIENT_DSN }} >> .env
37 | echo MIXPANEL_ENABLED=${{ secrets.MIXPANEL_ENABLED }} >> .env
38 | echo MIXPANEL_TOKEN_PROD=${{ secrets.MIXPANEL_TOKEN_PROD }} >> .env
39 | echo MIXPANEL_TOKEN_DEV=${{ secrets.MIXPANEL_TOKEN_DEV }} >> .env
40 | echo VITE_CONTENTFUL_SPACE=${{ secrets.VITE_CONTENTFUL_SPACE }} >> .env
41 | echo VITE_CONTENTFUL_TOKEN=${{ secrets.VITE_CONTENTFUL_TOKEN }} >> .env
42 | echo GITHUB_SHA=${{ github.sha }} >> .env
43 | - name: Build project
44 | run: npm run build
45 | - name: Configure AWS Credentials
46 | uses: aws-actions/configure-aws-credentials@v1
47 | with:
48 | aws-access-key-id: ${{ secrets.AWS_CI_ACCESS_KEY_ID }}
49 | aws-secret-access-key: ${{ secrets.AWS_CI_SECRET_ACCESS_KEY }}
50 | aws-region: us-east-1
51 | - name: Sync Development Build To S3
52 | run: |
53 | aws s3 sync dist s3://${{ secrets.S3_BUCKET_DEV }} --follow-symlinks --delete
54 | - name: Invalidate Cloudfront Cache
55 | run: |
56 | aws cloudfront create-invalidation --distribution-id ${{ secrets.CDN_DISTRIBUTION_ID_DEV }} --paths "/*"
57 |
--------------------------------------------------------------------------------
/.github/workflows/create_release_dev_v1.yml:
--------------------------------------------------------------------------------
1 | # This Action is specifically for creating and deploying a new API Image from the 'dev' branch.
2 | # The API image is used only by the prod server that serves the v1 frontend.
3 | # It differs from create_release_dev.yml in that its configured for prod usage.
4 | name: Create API Image (DEV) (v1)
5 | on:
6 | push:
7 | branches:
8 | - dev
9 | paths:
10 | - "server/api/**"
11 | workflow_dispatch:
12 |
13 | jobs:
14 | build:
15 | name: Create Docker Image
16 | runs-on: ubuntu-latest
17 | steps:
18 | - name: Checkout code
19 | uses: actions/checkout@v2
20 | - name: Get branch name
21 | uses: nelonoel/branch-name@v1.0.1
22 | - name: Setup environment
23 | run: |
24 | echo GITHUB_CODE_VERSION=${{ env.BRANCH_NAME }} >> server/api/.env
25 | echo GITHUB_SHA=${{ github.sha }} >> server/api/.env
26 | echo GITHUB_TOKEN=${{ secrets.GH_ISSUES_TOKEN }} >> server/api/.env
27 | echo GITHUB_PROJECT_URL=${{ secrets.GH_PROJECT_URL }} >> server/api/.env
28 | echo GITHUB_ISSUES_URL=https://api.github.com/repos/hackforla/311-data-support/issues >> server/api/.env
29 | echo SENDGRID_API_KEY=${{ secrets.SENDGRID_API_KEY }} >> server/api/.env
30 | echo API_ALLOWED_ORIGINS=https://311-data.org,https://www.311-data.org >> server/api/.env
31 | - name: Build and Push Image to Docker Hub
32 | uses: docker/build-push-action@v1
33 | with:
34 | username: ${{ secrets.DOCKER_USERNAME }}
35 | password: ${{ secrets.DOCKER_PASSWORD }}
36 | path: server/api
37 | repository: la311data/311_data_api
38 | tag_with_sha: true
39 | tags: latest # Tag with 'latest' since the prod service uses the 'latest' image.
40 |
41 | - name: Configure AWS Credentials
42 | uses: aws-actions/configure-aws-credentials@v1
43 | with:
44 | aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
45 | aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
46 | aws-region: ${{ secrets.AWS_REGION }}
47 | - name: (Rolling) Restart ECS Tasks
48 | run: |
49 | aws ecs update-service --cluster prod-la-311-data-cluster --service prod-la-311-data-svc --force-new-deployment
50 |
--------------------------------------------------------------------------------
/backend/agencies.js:
--------------------------------------------------------------------------------
1 | const agencies = [
2 | {
3 | agencyId: 1,
4 | agencyName: 'Street Lighting Bureau',
5 | socrataOwner: 'BSL',
6 | website: 'http://bsl.lacity.org/',
7 | twitter: 'LAlight',
8 | },
9 | {
10 | agencyId: 2,
11 | agencyName: 'Sanitation Bureau',
12 | socrataOwner: 'LASAN',
13 | website: 'http://lacitysan.org/',
14 | twitter: 'lacitysan',
15 | },
16 | {
17 | agencyId: 3,
18 | agencyName: 'Sanitation Bureau',
19 | socrataOwner: 'LASAN',
20 | website: 'http://lacitysan.org/',
21 | twitter: 'lacitysan',
22 | },
23 | {
24 | agencyId: 4,
25 | agencyName: 'Office of Community Beautification',
26 | socrataOwner: 'OCB',
27 | website: 'http://www.laocb.org/',
28 | twitter: 'LA_OCB',
29 | },
30 | {
31 | agencyId: 5,
32 | agencyName: 'Information Technology Agency',
33 | socrataOwner: 'ITA',
34 | website: 'http://ita.lacity.org/',
35 | twitter: '',
36 | },
37 | {
38 | agencyId: 6,
39 | agencyName: 'Department of Water & Power',
40 | socrataOwner: 'LADWP',
41 | website: 'https://www.ladwp.com/',
42 | twitter: 'LADWP',
43 | },
44 | {
45 | agencyId: 7,
46 | agencyName: 'Bureau of Street Services',
47 | socrataOwner: 'BSS',
48 | website: 'https://streetsla.lacity.org/',
49 | twitter: 'BSSLosAngeles',
50 | },
51 | {
52 | agencyId: 8,
53 | agencyName: 'Transportation Department',
54 | socrataOwner: 'LADOT',
55 | website: 'http://ladot.lacity.org/',
56 | twitter: 'LADOTofficial',
57 | },
58 | {
59 | agencyId: 9,
60 | agencyName: 'Department of Animal Services',
61 | socrataOwner: 'LAAS',
62 | website: 'http://www.laanimalservices.com/',
63 | twitter: 'lacitypets',
64 | },
65 | {
66 | agencyId: 10,
67 | agencyName: 'Recreation & Parks',
68 | socrataOwner: 'RAP',
69 | website: 'http://www.laparks.org/',
70 | twitter: 'LACityParks',
71 | },
72 | {
73 | agencyId: 11,
74 | agencyName: 'Engineering Bureau',
75 | socrataOwner: 'ENG',
76 | website: 'http://eng.lacity.org/',
77 | twitter: '',
78 | },
79 | {
80 | agencyId: 12,
81 | agencyName: 'Department of Building and Safety',
82 | socrataOwner: 'LADBS',
83 | website: 'https://www.ladbs.org/',
84 | twitter: '',
85 | },
86 | ];
87 |
88 | export default agencies;
89 |
--------------------------------------------------------------------------------
/src/components/layout/Main/Desktop/Export/ExportDownload.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import {
4 | styled,
5 | Box,
6 | Icon,
7 | Stack,
8 | Typography,
9 | } from '@mui/material';
10 | import DownloadCircle from '@assets/download-circle.svg';
11 | import CheckCircle from '@assets/round-check-circle.svg';
12 | import LoadingDots from '@assets/loading dots.svg';
13 | import useStyles from './useStyles';
14 |
15 | const StyledBox = styled(Box)(({ theme }) => ({
16 | position: 'absolute',
17 | top: '80px',
18 | backgroundColor: theme.palette.primary.main,
19 | boxShadow: theme.shadows[5],
20 | textAlign: 'center',
21 | maxWidth: '450px',
22 | maxHeight: '65px',
23 | borderRadius: '8px',
24 | }));
25 |
26 | function ExportDownload({ dialogType }) {
27 | const downloadingMessage = 'Data downloading';
28 | const downloadSuccessMessage = 'Data exported successfully!';
29 | const classes = useStyles();
30 | const { imageIcon } = classes;
31 |
32 | return (
33 |
53 |
61 |
54 |
60 |
62 |
69 |
70 | );
71 | }
72 |
73 | export default CouncilsList;
74 |
75 | CouncilsList.propTypes = {
76 | items: PropTypes.arrayOf(PropTypes.shape({})),
77 | onClick: PropTypes.func.isRequired,
78 | searchTerm: PropTypes.string.isRequired,
79 | setSearchTerm: PropTypes.func.isRequired
80 | };
81 |
82 | CouncilsList.defaultProps = {
83 | items: [],
84 | };
85 |
--------------------------------------------------------------------------------
/src/features/Map/geoUtils.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 |
3 | import {
4 | circle,
5 | mask,
6 | bbox,
7 | point,
8 | polygon,
9 | pointsWithinPolygon,
10 | booleanPointInPolygon,
11 | multiPolygon,
12 | } from '@turf/turf';
13 |
14 | import ncGeojson from '@data/ncGeojson';
15 |
16 | import { isEmpty } from '@utils';
17 |
18 | export function emptyGeo() {
19 | return {
20 | type: 'FeatureCollection',
21 | features: [],
22 | };
23 | }
24 |
25 | // removes holes in a MultiPolygon
26 | export function removeGeoHoles(feature) {
27 | if (feature.geometry.type === 'MultiPolygon')
28 | return {
29 | ...feature,
30 | geometry: {
31 | ...feature.geometry,
32 | coordinates: feature.geometry.coordinates.map((poly) => [poly[0]]),
33 | },
34 | };
35 | else return feature;
36 | }
37 |
38 | export function makeGeoCircle(center, radius = 1, opts = { units: 'miles' }) {
39 | return circle([center.lng, center.lat], radius, opts);
40 | }
41 |
42 | export function makeGeoMask(poly) {
43 | return mask(poly);
44 | }
45 |
46 | export function boundingBox(geo) {
47 | return bbox(geo);
48 | }
49 |
50 | export function pointsWithinGeo(points, geo) {
51 | return pointsWithinPolygon(points, geo);
52 | }
53 |
54 | export function isPointWithinGeo(point, geo) {
55 | return booleanPointInPolygon(point, geo);
56 | }
57 |
58 | export function getNcByLngLatv2({
59 | longitude = undefined,
60 | latitude = undefined,
61 | }) {
62 | try {
63 | if (isEmpty(longitude) || isEmpty(latitude)) {
64 | throw new Error(
65 | `longitude: ${longitude} and latitude: ${latitude} must be defined`
66 | );
67 | }
68 | console.log({ longitude, latitude });
69 | const features = ncGeojson.features;
70 | console.log({ features });
71 |
72 | let foundNcGeoObj;
73 |
74 | for (const feature of features) {
75 | let featurePolygon;
76 | if (feature.geometry.type == 'MultiPolygon')
77 | featurePolygon = multiPolygon(feature.geometry.coordinates);
78 | else {
79 | featurePolygon = polygon(feature.geometry.coordinates);
80 | }
81 |
82 | if (booleanPointInPolygon(point([longitude, latitude]), featurePolygon)) {
83 | foundNcGeoObj = feature
84 | }
85 | }
86 | console.log({ foundNcGeoObj });
87 |
88 | return foundNcGeoObj?.properties?.NC_ID;
89 | } catch (e) {
90 | console.error('In getNcByLngLatv2: Error occured: ', e);
91 | }
92 | }
93 |
--------------------------------------------------------------------------------
/src/components/Dashboards/DashboardOverview.jsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | import React, { useState, useEffect, useContext } from 'react';
3 | import { getDbRequest, getDbRequestSuccess } from '@reducers/data';
4 | import PropTypes from 'proptypes';
5 | import { useSelector, useDispatch } from 'react-redux';
6 | import ContentBody from '@components/common/ContentBody';
7 | import QuadLayout from '@dashboards/layouts/QuadLayout';
8 |
9 | import ddbh from '@utils/duckDbHelpers.js';
10 | import DbContext from '@db/DbContext';
11 |
12 | /* Ideally these Quadrants should be imported from widgets as standalone React components */
13 | import TotalByDayOfWeek from '@dashboards/widgets/TotalByDayOfWeek';
14 |
15 | const Quadrant2 = ({ data }) => Total Requests by Source
;
16 | const Quadrant3 = ({ data }) => (
17 | Median Days to Close Tickets by Request
18 | );
19 | const Quadrant4 = ({ data }) => Division Fulfilling Requests
;
20 |
21 | const DashboardOverview = () => {
22 | const dispatch = useDispatch();
23 |
24 | const [requestsData, setRequestsData] = useState([]);
25 |
26 | // TODO: Need isDataLoading state to indicate whether duckDb data is still loading
27 | const isDbLoading = useSelector((state) => state.data.isDbLoading);
28 |
29 | const { conn } = useContext(DbContext);
30 |
31 | useEffect(() => {
32 | /* Here is some boilerplate code to fetch data from duckdb */
33 | async function fetchRequests() {
34 | dispatch(getDbRequest());
35 | const requestsAsArrowTable = await conn.query(
36 | 'select * from requests limit 10'
37 | );
38 | const requests = ddbh.getTableData(requestsAsArrowTable);
39 |
40 | setRequestsData(requests);
41 | }
42 |
43 | if (!isDbLoading) {
44 | fetchRequests();
45 | dispatch(getDbRequestSuccess());
46 | }
47 | }, [isDbLoading]);
48 |
49 | if (isDbLoading) return null;
50 |
51 | return (
52 | {item.title}
63 |64 | {new Date(item.publishDate).toLocaleDateString()} 65 |
66 |-
72 | { data.blogPostCollection.items.map(item => (
73 |
77 |
78 |
79 | )
80 | }
81 | }
82 |
83 | RequestsDonut.propTypes = {
84 | selectedRequests: PropTypes.shape({}),
85 | colorScheme: PropTypes.string.isRequired,
86 | };
87 |
88 | RequestsDonut.defaultProps = {
89 | selectedRequests: {},
90 | };
91 |
92 | export default RequestsDonut;
93 |
--------------------------------------------------------------------------------
/src/components/common/ChipList/StyledChip.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import makeStyles from '@mui/styles/makeStyles';
4 | import Chip from '@mui/material/Chip';
5 | import CloseIcon from '@mui/icons-material/Close';
6 | import { useTheme } from '@mui/styles/';
7 |
8 | const useStylesSolid = makeStyles(theme => ({
9 | root: {
10 | backgroundColor: props => props.color,
11 | height: 'auto',
12 | '& .MuiChip-label': {
13 | whiteSpace: 'normal',
14 | },
15 | },
16 | label: {
17 | fontFamily: 'Roboto',
18 | color: theme.palette.secondary.light,
19 | },
20 | deleteIcon: {
21 | color: theme.palette.secondary.light,
22 | },
23 | }));
24 |
25 | const useStylesOutlined = makeStyles(theme => ({
26 | root: {
27 | backgroundColor: theme.palette.secondary.light,
28 | height: 'auto',
29 | '& .MuiChip-label': {
30 | whiteSpace: 'normal',
31 | },
32 | },
33 | outlined: {
34 | borderColor: props => props.color,
35 | },
36 | label: {
37 | fontFamily: 'Roboto',
38 | color: theme.palette.text.primaryDark,
39 | },
40 | deleteIcon: {
41 | color: theme.palette.text.primaryDark,
42 | '&:hover': {
43 | color: theme.palette.secondary.main,
44 | },
45 | },
46 | }));
47 |
48 | function StyledChip({
49 | label,
50 | value,
51 | color,
52 | onDelete,
53 | outlined,
54 | sx,
55 | }) {
56 | const theme = useTheme();
57 | const classesSolid = useStylesSolid({ color });
58 | const classesOutlined = useStylesOutlined({ color });
59 |
60 | return (
61 |
78 | {children.map(component => addClasses(component))}
79 |
80 | );
81 | }
82 |
83 | ToggleGroup.propTypes = {
84 | onToggle: PropTypes.func,
85 | rounded: PropTypes.bool,
86 | value: PropTypes.string,
87 | children: PropTypes.arrayOf(PropTypes.node).isRequired,
88 | };
89 |
90 | ToggleGroup.defaultProps = {
91 | rounded: false,
92 | value: '',
93 | onToggle: undefined,
94 | };
95 |
--------------------------------------------------------------------------------
/src/utils/checkEnv.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-console */
2 |
3 | // Checks to see if .env has all keys in .example.env. Any missing keys will be copied.
4 | // If no .env file is found, one is created from .example.env.
5 |
6 | import fs from 'fs';
7 | import path from 'path';
8 | import { fileURLToPath } from 'url';
9 | import dotenv from 'dotenv';
10 |
11 | const __dirname = path.dirname(fileURLToPath(import.meta.url));
12 | const red = '\x1b[31m%s\x1b[0m';
13 | const green = '\x1b[32m%s\x1b[0m';
14 | const vitePrefix = 'VITE_';
15 |
16 | const envPath = path.resolve(__dirname, '../.env');
17 | const exampleEnvPath = path.resolve(__dirname, '../.example.env');
18 |
19 | function getEnv(fileName) {
20 | return dotenv.parse(fs.readFileSync(fileName));
21 | }
22 |
23 | (function checkEnv() {
24 | console.log('Checking .env file...');
25 |
26 | if (fs.existsSync(envPath)) {
27 | const env = getEnv(envPath);
28 | const exampleEnv = getEnv(exampleEnvPath);
29 | const envKeys = Object.keys(env);
30 | let missingKeys = Object.keys(exampleEnv).filter(key => !envKeys.includes(key));
31 | const keysToRenameForVite = envKeys.filter(key =>
32 | missingKeys.some(missingKey => missingKey === vitePrefix + key)
33 | );
34 |
35 | // for variables that client-side code needs to access, ensure their names begin with `VITE_`
36 | // https://vitejs.dev/guide/env-and-mode.html#env-files
37 | if (keysToRenameForVite.length > 0) {
38 | console.log('These keys in your .env file are not compatible with Vite:', keysToRenameForVite, '\n');
39 | console.log('Renaming incompatible keys...');
40 | let envText = fs.readFileSync(envPath, 'utf8');
41 | keysToRenameForVite.forEach(key => envText = envText.replace(key, vitePrefix + key));
42 | fs.writeFileSync(envPath, envText)
43 | console.log(green, `File updated: ${envPath}\n`);
44 | }
45 |
46 | missingKeys = missingKeys.filter(key =>
47 | !keysToRenameForVite
48 | .map(missingViteKey => vitePrefix + missingViteKey)
49 | .includes(key)
50 | );
51 |
52 | if (missingKeys.length > 0) {
53 | console.log('You are missing these keys in your .env file:', missingKeys, '\n');
54 | console.log('Copying missing keys to .env...');
55 | missingKeys.forEach(key => fs.appendFileSync(envPath, `\n${key}=${exampleEnv[key]}`));
56 | console.log(green, `File updated: ${envPath}\nDon't forget to update the values!`);
57 | } else {
58 | console.log(green, 'Your .env file has all required keys.');
59 | }
60 | } else {
61 | console.error(red, `No .env file found in ${__dirname}`);
62 | console.log('Creating .env file from .example.env...');
63 | fs.copyFileSync(exampleEnvPath, envPath);
64 | console.log(green, `File created: ${envPath}\nDon't forget to update the values!`);
65 | }
66 | }());
67 |
--------------------------------------------------------------------------------
/src/components/Loading/AcknowledgeModal.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import {
4 | styled,
5 | Box,
6 | Modal,
7 | Typography,
8 | Link,
9 | Button,
10 | } from '@mui/material';
11 | import colors from '@theme/colors';
12 |
13 | const StyledModal = styled(Modal)({
14 | display: 'flex',
15 | alignItems: 'center',
16 | justifyContent: 'center',
17 | });
18 |
19 | const StyledBox = styled(Box)(({ theme }) => ({
20 | position: 'absolute',
21 | backgroundColor: '#29404F',
22 | padding: theme.spacing(4),
23 | boxShadow: theme.shadows[5],
24 | textAlign: 'center',
25 | maxWidth: '464px',
26 | borderRadius: '10px',
27 | outline: 'none',
28 | }));
29 |
30 | const ExternalLink = styled(Link)({
31 | color: colors.primaryFocus,
32 | textDecoration: 'none',
33 | '&:hover': {
34 | textDecoration: 'underline',
35 | },
36 | });
37 |
38 | const buttonStyle = {
39 | width: '104px',
40 | height: '29px',
41 | borderRadius: '5px',
42 | backgroundColor: '#ECECEC',
43 | border: '1px solid #ECECEC',
44 | '&:hover': {
45 | backgroundColor: '#DADADA',
46 | borderColor: '#DADADA',
47 | },
48 | color: '#29404F',
49 | fontWeight: '500',
50 | };
51 |
52 | function AcknowledgeModal({ onClose }) {
53 | const [open, setOpen] = React.useState(true);
54 | const handleClose = () => {
55 | setOpen(false);
56 | onClose();
57 | };
58 | return (
59 | 71 | for LA and is not affiliated with the city of Los Angeles. 72 |
73 | For official information about 311 services in Los 74 |
75 | Angeles, please visit 76 | {' '} 77 |
70 | For official information about 311 services in Los Angeles, 71 |
72 | please visit 73 | {' '} 74 |
68 |
72 |
73 | 72 |