Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Big overhaul. MVP for TPN integration #134

Merged
merged 1 commit into from
May 7, 2017
Merged

Big overhaul. MVP for TPN integration #134

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 21 additions & 5 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,18 +11,34 @@ Thanks to @alexandrabush for the logo!
Since our project is just an HTML file, you can simply load the file into your browser.
Once you make edits, commit the changes, and push, your changes will be updated on GitHub.

## Including in an external Site:
In order to include this project in an existing HTML page you will need to first download the `main.css`, `ui.js`, `map.js`, and `data.js` files (we don't yet have them on a CDN). Then, you will need to add
```
<!-- necessary style -->
<link rel="stylesheet" href="./main.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://use.fontawesome.com/07694042f8.js"></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<!-- end necessary style -->
```
to the `head` tag, as well as
```
<!-- necessary HTML -->
<div id="ui"></div>
<div id="mapid"></div>
<script src="./ui.js"></script>
<script src="./map.js"></script>
<script src="./data.js"></script>
<!-- end necessary HTML -->
```
somewhere in the `body`.

## Getting started:
1. Fork the project
2. Add your name to `contributors.md`
3. Submit a pull request
4. Take a look at the Issues for more things to do

## Getting started (machine learning):
1. Do all the steps above
2. `cd` to the `ml` directory
3. Ensure you have Python 3.5.X installed, then run `pip install -r requirements.txt` (depending on config, may be `pip3` instead)

## Helpful links:

### Git and Github links:
Expand Down
94 changes: 63 additions & 31 deletions data.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,17 +150,29 @@
}
};

// generate a pop-up based on object map provided
// object simply contains the property values as found in the data set
// mapped to the corresponding human-readable text

function generatePopup(record, mapping) {
return Object.keys(mapping).map(property => `<p class="marker-text">
<span class="marker-key">${mapping[property]}</span>:
<span class="marker-value">${record[property]}</span></p>`)
.join("");
}

const WPRDC_DATA_SOURCES = {
"Police": {
id: "1797ead8-8262-41cc-9099-cbc8a161924b",
primaryFiltering: "WHERE \"INCIDENTNEIGHBORHOOD\" LIKE '%Oakland' AND \"INCIDENTTIME\" >= (NOW() - '30 day'::INTERVAL) ORDER BY \"INCIDENTTIME\" DESC",
latLong: ["Y", "X"],
icon: iconTypes.CITY_POLICE,
updateTime: 12*HOUR,

// TODO: Better title and popup messages?
title: (record) => record["OFFENSES"],
popup: (record) => record["OFFENSES"],
title: (record) => record["INCIDENTHIERARCHYDESC"],
popup: (record) => generatePopup(record, {
INCIDENTHIERARCHYDESC: "Description",
OFFENSES: "Offenses"
}),
table: (record) => `<td class="col1">Police</td>
<td class="col2">${record["OFFENSES"]}</td>
<td class="col3">${record.incidentMonth}/${record.incidentDay}/${record.incidentYear}</td>
Expand All @@ -181,9 +193,10 @@
icon: iconTypes.CITY_ARREST,
updateTime: 12*HOUR,

// TODO: Better title and popup messages?
title: (record) => record["OFFENSES"],
popup: (record) => record["OFFENSES"],
popup: (record) => generatePopup(record, {
OFFENSES: "Offenses"
}),
table: (record) => `<td class="col1">Arrest</td>
<td class="col2">${record["OFFENSES"]}</td>
<td class="col3">${record.incidentMonth}/${record.incidentDay}/${record.incidentYear}</td>
Expand All @@ -203,12 +216,13 @@
latLong: ["Y", "X"],
icon: iconTypes.CODE_VIOLATION,
updateTime: 12*HOUR,

// TODO: Better title and popup messages?
title: (record) => record["VIOLATION"],
popup: (record) => `<strong>${record["VIOLATION"]}:</strong>
${record["LOCATION"]}<br>
${record["STREET_NUM"]} ${record["STREET_NAME"]}`,
popup: (record) => generatePopup(record, {
VIOLATION: "Violation",
LOCATION: "Location",
CORRECTIVE_ACTION: "Description",
INSPECTION_RESULT: "Result"
}),
table: (record) => `<td class="col1">Code Violation</td>
<td class="col2">${record["VIOLATION"]}</td>
<td class="col3">${record.incidentMonth}/${record.incidentDay}/${record.incidentYear}</td>
Expand All @@ -229,11 +243,11 @@
latLong: ["Y", "X"],
icon: iconTypes.CITY_311_ICON,
updateTime: 10*MINUTE,

title: (record) => record["REQUEST_TYPE"],
popup: (record) => `
<strong>${record["DEPARTMENT"]}</strong>
<br> ${record["REQUEST_TYPE"]}`,
popup: (record) => generatePopup(record, {
REQUEST_TYPE: "Type",
DEPARTMENT: "Department"
}),
table: (record) => `<td class="col1">311</td>
<td class="col2">${record["DEPARTMENT"]} - ${record["REQUEST_TYPE"]}</td>
<td class="col3">${record.incidentMonth}/${record.incidentDay}/${record.incidentYear}</td>
Expand All @@ -246,8 +260,6 @@
record.incidentDay = parseInt(record.CREATED_ON.substring(8,10));
}
},

// Calls from the library db
"Library": {
id: "2ba0788a-2f35-43aa-a47c-89c75f55cf9d",
primaryFiltering: "WHERE \"Name\" LIKE '%OAKLAND%'",
Expand All @@ -256,20 +268,38 @@
updateTime: 24*HOUR*30,

title: (record) => record["Name"],
popup: (record) => `
<strong>${record.Name}</strong>
<br> Address: ${record.Address}
<br> Phone: ${record.Phone}
<br> Monday: ${record.MoOpen.substring(0, 5)} - ${record.MoClose.substring(0, 5)}
<br> Tuesday: ${record.TuOpen.substring(0, 5)} - ${record.TuClose.substring(0, 5)}
<br> Wednesday: ${record.WeOpen.substring(0, 5)} - ${record.WeClose.substring(0, 5)}
<br> Thursday: ${record.ThOpen.substring(0, 5)} - ${record.ThClose.substring(0, 5)}
<br> Friday: ${record.FrOpen.substring(0, 5)} - ${record.FrClose.substring(0, 5)}
<br> Saturday: ${record.SaOpen.substring(0, 5)} - ${record.SaClose.substring(0, 5)}
<br> Sunday: ${record.SuOpen.substring(0, 5)} - ${record.SuClose.substring(0, 5)}
`
popup: (record) => `<p class="marker-text">${record.Name}</p>
<p class="marker-text">${record.Address}</p>
<p class="marker-text">${record.Phone}</p>
<p class="marker-text">
<span class="marker-key">Monday</span>:
<span class="marker-value">${record.MoOpen.substring(0, 5)} - ${record.MoClose.substring(0, 5)}</span>
</p>
<p class="marker-text">
<span class="marker-key">Tuesday</span>:
<span class="marker-value">${record.TuOpen.substring(0, 5)} - ${record.TuClose.substring(0, 5)}</span>
</p>
<p class="marker-text">
<span class="marker-key">Wednesday</span>:
<span class="marker-value">${record.WeOpen.substring(0, 5)} - ${record.WeClose.substring(0, 5)}</span>
</p>
<p class="marker-text">
<span class="marker-key">Thursday</span>:
<span class="marker-value">${record.ThOpen.substring(0, 5)} - ${record.ThClose.substring(0, 5)}</span>
</p>
<p class="marker-text">
<span class="marker-key">Friday</span>:
<span class="marker-value">${record.FrOpen.substring(0, 5)} - ${record.FrClose.substring(0, 5)}</span>
</p>
<p class="marker-text">
<span class="marker-key">Saturday</span>:
<span class="marker-value">${record.SaOpen.substring(0, 5)} - ${record.SaClose.substring(0, 5)}</span>
</p>
<p class="marker-text">
<span class="marker-key">Sunday</span>:
<span class="marker-value">${record.SuOpen.substring(0, 5)} - ${record.SuClose.substring(0, 5)}</span>
</p>`
},

"Non-Traffic Violation": {
id: "6b11e87d-1216-463d-bbd3-37460e539d86",
primaryFiltering: "Where \"NEIGHBORHOOD\" LIKE '%Oakland'",
Expand All @@ -278,7 +308,9 @@
updateTime: 12*HOUR,

title: (record) => record["OFFENSES"],
popup: (record) => record["OFFENSES"],
popup: (record) => generatePopup(record, {
OFFENSES: "Offenses"
}),
table: (record) => `<td class="col1">Non-Traffic Violation</td>
<td class="col2">${record["OFFENSES"]}</td>
<td class="col3">${record.incidentMonth}/${record.incidentDay}/${record.incidentYear}</td>
Expand Down
132 changes: 55 additions & 77 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,88 +1,66 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>PantherView</title>
<meta name="description" content="Map for Oakland data.">
<link rel="icon" href="favicon.ico" />
<link rel="stylesheet" href="./main.css">
<!--Using fontawesome temporarily-->
<script src="https://use.fontawesome.com/07694042f8.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<!--favicons-->
<link rel="apple-touch-icon" sizes="57x57" href="./favicons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="./favicons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="./favicons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="./favicons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="./favicons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="./favicons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="./favicons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="./favicons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="./favicons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="./favicons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="./favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="./favicons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="./favicons/favicon-16x16.png">
<link rel="manifest" href="./favicons/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="./favicons/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
</head>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>PantherView</title>
<meta name="description" content="Map for Oakland data.">
<link rel="icon" href="favicon.ico" />
<!--favicons-->
<link rel="apple-touch-icon" sizes="57x57" href="./favicons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="./favicons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="./favicons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="./favicons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="./favicons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="./favicons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="./favicons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="./favicons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="./favicons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="./favicons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="./favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="./favicons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="./favicons/favicon-16x16.png">
<link rel="manifest" href="./favicons/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="./favicons/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">

<body>
<div id="ui">
<div id="notifications"></div>
<!-- necessary style -->
<link rel="stylesheet" href="./main.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://use.fontawesome.com/07694042f8.js"></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<!-- end necessary style -->

</head>

<body>
<div id="header">
<div id="title">
<a href="index.html">
<div id="logo">
<img src="./logo.png" alt="logo; credit: @alexandrabush" title="credit: @alexandrabush">
</div>
<h1>PantherView</h1>
</a>
</div>
<div id="navigation">
<div id="title">
<a href="index.html">
<div id="logo">
<img src="./logo.png" alt="logo; credit: @alexandrabush" title="credit: @alexandrabush">
</div>
<h1>PantherView</h1>
</a>
</div>
<div id="navigation">
<ul>
<li><a href="about.html">About</a></li>
<li><a href="about.html">About</a></li>
</ul>
</div>
</div>
<div id="sidebarToggleContainer">
<i id="sidebarToggle"></i>
</div>
<div id="sidebar">
<div id="controls">
<div id="displaySelection">
<button id="radioMap" checked>Map</button>
<button id="radioData">Data</button>
</div>
<div id="dateSelection">
<button id="radioMonth" checked>Past Month</button>
<button id="radioWeek">Past Week</button>
<button id="radioDay">Yesterday</button>
</div>
<h3>Legend</h3>
<div id="typeSelection">
</div>
</div>
<div id="dataArea" class="hidden">
<table id="dataTable"></table>
</div>
<footer>
&copy; 2017 University of Pittsburgh Computer Science Club.
Logo: @alexandrabush.
</footer>
</div>
</div>
<div id="mapid"></div>
<script src="https://unpkg.com/[email protected]/promise.min.js"></script>
<script src="https://unpkg.com/[email protected]/fetch.js"></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="./main.js"></script>
<script src="./data.js"></script>
</body>

<!-- necessary HTML -->
<div id="ui"></div>
<div id="mapid"></div>
<script src="./ui.js"></script>
<script src="./map.js"></script>
<script src="./data.js"></script>
<!-- end necessary HTML -->

</body>

</html>
Loading