Merge pull request #134 from vonbearshark/master

Big overhaul. MVP for TPN integration

README.md

@@ -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:

data.js

@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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%'",
@@ -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'",
@@ -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>

index.html

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