From 0a935eb6a9bcdd98e24f27ed9f2e2991f0d719c5 Mon Sep 17 00:00:00 2001
From: Dalton Schwanke <schw1057@stthomas.edu>
Date: Mon, 13 Nov 2023 14:32:32 -0600
Subject: [PATCH 1/3] update

---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index 95470c0..920c0c9 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
         "email": ""
     },
     "contributors": [
+        "contributor 1"
     ],
     "repository": {},
     "dependencies": {

From 884fcb928003e7ebd7d16587f2dbfec023001d1b Mon Sep 17 00:00:00 2001
From: gcabdu <108958857+gcabdu@users.noreply.github.com>
Date: Mon, 13 Nov 2023 14:37:58 -0600
Subject: [PATCH 2/3] Update rest_server.mjs

---
 rest_server.mjs | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/rest_server.mjs b/rest_server.mjs
index 4edbc57..8ebc004 100644
--- a/rest_server.mjs
+++ b/rest_server.mjs
@@ -1,3 +1,5 @@
+//curl -X PUT "http://localhost:8000/new-incident" -H "Content-Type: application/json" -d "{\"case_number\": 1234, \"date\": \"2023-11-13\", \"incident\": \"student mischieft\"}"
+
 import * as path from 'node:path';
 import * as url from 'node:url';
 

From 29a6b21074e5fcbb8f18da778d7e4676e95029a4 Mon Sep 17 00:00:00 2001
From: yao07496 <146397248+yao07496@users.noreply.github.com>
Date: Wed, 20 Dec 2023 10:32:29 -0600
Subject: [PATCH 3/3] Add files via upload

---
 App.vue             | 599 ++++++++++++++++++++++++++++++++++++++++++++
 NewIncidentForm.vue | 108 ++++++++
 filters.vue         | 149 +++++++++++
 header.vue          |  21 ++
 sidebar.vue         | 210 ++++++++++++++++
 table.vue           | 170 +++++++++++++
 6 files changed, 1257 insertions(+)
 create mode 100644 App.vue
 create mode 100644 NewIncidentForm.vue
 create mode 100644 filters.vue
 create mode 100644 header.vue
 create mode 100644 sidebar.vue
 create mode 100644 table.vue

diff --git a/App.vue b/App.vue
new file mode 100644
index 0000000..b78df90
--- /dev/null
+++ b/App.vue
@@ -0,0 +1,599 @@
+<script setup>
+import { reactive, ref, onMounted } from 'vue';
+import pageSidebar from "./components/sidebar.vue"
+import pageLegend from "./components/legend.vue"
+import pageheader from "./components/header.vue"
+import pageFooter from "./components/footer.vue"
+import pageTable from "./components/table.vue"
+
+
+
+let crime_url = ref('http://localhost:5192');
+let dialog_err = ref(false);
+
+let crimeData = ref({
+  codes: [],
+  neighborhoods: [],
+  incidents: []
+});
+
+let crimeTableData = ref([]);
+let isLoading = ref(false);
+
+let map = reactive(
+    {
+        leaflet: null,
+        center: {
+            lat: 44.955139,
+            lng: -93.102222,
+            address: ''
+        },
+        zoom: 12,
+        bounds: {
+            nw: {lat: 45.008206, lng: -93.217977},
+            se: {lat: 44.883658, lng: -92.993787}
+        },
+        neighborhood_markers: [
+        { location: [44.942068, -93.020521], marker: 'Southeast', number:1 }, 
+                    { location: [44.977413, -93.025156], marker: 'Greater East Side', number:2 },
+                    { location: [44.931244, -93.079578], marker: 'West Side', number:3 },
+                    { location: [44.956192, -93.060189], marker: "Dayton's Bluff", number:4  },
+                    { location: [44.978883, -93.068163], marker: 'Payne - Phalen', number:5  },
+                    { location: [44.975766, -93.113887], marker: 'North End', number:6 },
+                    { location: [44.959639, -93.121271], marker: 'Frogtown', number:7 },
+                    { location: [44.947700, -93.128505], marker: 'Summit - University', number:8 },
+                    { location: [44.930276, -93.119911], marker: 'West Seventh - Fort Road', number:9 },
+                    { location: [44.982752, -93.147910], marker: 'Como Park', number:10 },
+                    { location: [44.963631, -93.167548], marker: 'Hamline - Midway', number:11 },
+                    { location: [44.973971, -93.197965], marker: 'Saint Anthony Park', number:12 },
+                    { location: [44.949043, -93.178261], marker: 'Union Park', number:13 },
+                    { location: [44.934848, -93.176736], marker: 'Macalestar - Groveland', number:14 },
+                    { location: [44.913106, -93.170779], marker: 'Highland', number:15 },
+                    { location: [44.937705, -93.136997], marker: 'Summit Hill', number:16 },
+                    { location: [44.949203, -93.093739], marker: 'Capital River', number:17 }
+        ]
+    }
+);
+
+// Vue callback for once <template> HTML has been added to web page
+onMounted(() => {
+
+    initializeCrimes().then(() => {
+        isLoading.value = false;
+    });
+
+    // Create Leaflet map (set bounds and valied zoom levels)
+    
+    map.leaflet = L.map('leafletmap').setView([map.center.lat, map.center.lng], map.zoom);
+    // Add this line to log the map object
+  console.log("Leaflet map initialized:", map.leaflet);
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+        minZoom: 11,
+        maxZoom: 18
+    }).addTo(map.leaflet);
+    map.leaflet.setMaxBounds([[44.883658, -93.217977], [45.008206, -92.993787]]);
+
+    // Get boundaries for St. Paul neighborhoods
+    let district_boundary = new L.geoJson();
+    district_boundary.addTo(map.leaflet);
+    fetch('data/StPaulDistrictCouncil.geojson')
+    .then((response) => {
+        return response.json();
+    })
+    .then((result) => {
+        result.features.forEach((value) => {
+            district_boundary.addData(value);
+        });
+    })
+    .catch((error) => {
+        console.log('Error:', error);
+    });
+});
+
+
+async function initializeCrimes() {
+  try {
+        const codesResponse = await fetch(`${crime_url.value}/codes`);
+        if (!codesResponse.ok) throw new Error(`HTTP error! Status: ${codesResponse.status}`);
+        const codesData = await codesResponse.json();
+        crimeData.value.codes = codesData;
+
+        const neighborhoodsResponse = await fetch(`${crime_url.value}/neighborhoods`);
+        if (!neighborhoodsResponse.ok) throw new Error(`HTTP error! Status: ${neighborhoodsResponse.status}`);
+        const neighborhoodsData = await neighborhoodsResponse.json();
+        crimeData.value.neighborhoods = neighborhoodsData;
+
+        const incidentsResponse = await fetch(`${crime_url.value}/incidents`);
+        if (!incidentsResponse.ok) throw new Error(`HTTP error! Status: ${incidentsResponse.status}`);
+        const incidentsData = await incidentsResponse.json();
+        crimeData.value.incidents = incidentsData;
+
+        crimeTableData.value = incidentsData.map(incident => ({
+            case_number: incident.case_number,
+            date_time: incident.date_time,
+            code: incident.code,
+            incident: incident.incident,
+            police_grid: incident.police_grid,
+            neighborhood_number: incident.neighborhood_number,
+            block: incident.block
+        })).sort((a, b) => new Date(b.date_time) - new Date(a.date_time));
+
+    } catch (error) {
+        console.error('Error initializing crimes', error);
+        // Handle the error appropriately
+    }
+}
+    /*return new Promise((resolve, reject) => {
+        fetch(crime_url.value + '/codes')
+        .then(response => response.json())
+        .then(data => {
+            crimeData.value.codes = data;
+        })
+        .catch(error => {
+            console.error('Error fetching codes', error);
+            reject(error);
+        })
+        fetch(crime_url.value + '/neighborhoods')
+        .then(response => response.json())
+        .then(data => {
+            crimeData.value.neighborhoods = data;
+        })
+        .catch(error => {
+            console.error('Error fetching neighborhoods', error);
+            reject(error);
+        })
+        fetch(crime_url.value + '/incidents')
+        .then(response => response.json())
+        .then(data => {
+            crimeData.value.incidents = data;
+
+            crimeTableData.value = data.map(incident => {
+                return{
+                    case_number: incident.case_number,
+                    date_time: incident.date_time,
+                    code: incident.code,
+                    incident: incident.incident,
+                    police_grid: incident.police_grid,
+                    neighborhood_number: incident.neighborhood_number,
+                    block: incident.block
+                };
+            });
+            crimeTableData.value.sort((a,b) => new Date(b.date_time) - new Date(a.date_time));
+            resolve();
+        })
+        .catch(error => {
+            reject(error);
+        }); 
+    });
+}
+*/
+
+
+function addNeighborhoodMarkers() {
+   // Assuming crimeData contains the necessary information
+   map.neighborhood_markers.forEach(neighborhood => {
+    // Create a marker for each neighborhood
+    const marker = L.marker(neighborhood.location).addTo(map.leaflet);
+    
+    // Fetch and display crime data for each neighborhood
+    // This can be done by filtering `crimeData` or making a new API call
+    const neighborhoodCrimes = crimeData.value.incidents.filter(incident => incident.neighborhood_number === neighborhood.number);
+    
+    // Update marker popup with the number of crimes
+    marker.bindPopup(`Neighborhood: ${neighborhood.marker}, Crimes: ${neighborhoodCrimes.length}`);
+  });
+
+  
+  map.neighborhood_markers.forEach((neighborhood) => {
+    const marker = L.marker(neighborhood.location)
+      .addTo(map.leaflet)
+      .bindPopup('Loading...'); // Display a loading message initially
+
+    // Fetch the number of incidents for the current neighborhood
+    fetch(`${crime_url.value}/incidents?id=${neighborhood.number}&limit=10000000`)
+      .then(response => {
+        if (!response.ok) {
+          throw new Error(`HTTP error! Status: ${response.status}`);
+        }
+        return response.json();
+      })
+      .then(data => {
+        // Check if the marker and map are available before updating the popup content
+        if (marker && map.leaflet) {
+          const popupContent = `
+            <div class="popup-header" style="width: 150px; text-align: center">${neighborhood.marker}</div>
+            <div class="popup-body" style="width: 150px; text-align: center"># of crimes: ${data.length}</div>
+          `;
+          marker.setPopupContent(popupContent);
+        }
+      })
+      .catch(error => {
+        console.error(`Error fetching incidents for ${neighborhood.marker}:`, error);
+        // Handle non-JSON response or other errors
+        if (marker && map.leaflet) {
+          marker.setPopupContent(`Error fetching incidents for ${neighborhood.marker}`);
+        }
+      });
+  });
+}
+
+function closeDialog() {
+    let url_input = document.getElementById('dialog-url');
+    if (crime_url.value !== '' && url_input.checkValidity()) {
+        dialog_err.value = false;
+        initializeCrimes();
+        addNeighborhoodMarkers();
+        
+    }
+    else {
+        dialog_err.value = true;
+    }
+}
+
+
+function deleteIncident(caseNumber) {
+  // Send DELETE request to the server
+  fetch(crime_url.value + '/remove-incident?case_number=' + caseNumber, {
+    method: 'DELETE',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({ case_number: caseNumber }),
+  })
+    .then(response => {
+      if (!response.ok) {
+        throw new Error(`HTTP error! Status: ${response.status}`);
+      }
+      return response.json();
+    })
+    .then(data => {
+      console.log('Incident Removed successfully:', data);
+
+      // Update the incidents array by filtering out the deleted incident
+      const updatedIncidents = crimeData.value.incidents.filter(incident => incident.case_number !== caseNumber);
+
+      // Sort the updated incidents array by date_time
+      updatedIncidents.sort((a, b) => new Date(b.date_time) - new Date(a.date_time));
+
+      // Update crimeData.value.incidents with the new sorted array
+      crimeData.value.incidents = reactive(updatedIncidents);
+
+      // Update crimeTableData
+      crimeTableData.value = reactive([...updatedIncidents]);
+
+      // Add new markers
+      addNeighborhoodMarkers();
+
+    })
+    .catch(error => {
+      // Handle errors or display a message to the user
+      console.error('Error Removing incident:', error.message);
+    });
+}
+
+function submitIncident(formData) {
+  // Validate form data
+  if (!formData.date_time /* Add other validations as needed */) {
+    // Show error message
+    dialog_err.value = true;
+    return;
+  }
+
+  // Make the PUT request to add a new incident
+  const putData = {
+    case_number: generateCaseNumber(), // Implement a function to generate a case number
+    date_time: formData.date_time,
+    // Add other form fields to putData as needed
+  };
+
+  fetch(`${crime_url.value}/new-incident/${putData.case_number}`, {
+    method: 'PUT',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(putData),
+  })
+    .then(response => response.json())
+    .then(data => {
+      console.log('Incident added successfully:', data);
+      initializeCrimes();
+      addNeighborhoodMarkers();
+    })
+    .catch(error => {
+      console.error('Error adding incident:', error);
+      // Handle error or display a message to the user
+    });
+}
+
+
+
+
+function plotData(caseNumber) {
+  const incident = crimeData.value.incidents.find(incident => incident.case_number === caseNumber);
+  if (incident) {
+    let blockAddress = incident.block.replace(/(\d*)X/g, '$10');
+
+    const nominatimEndpoint = 'https://nominatim.openstreetmap.org/search';
+    const params = new URLSearchParams({
+        q: `${blockAddress}, St. Paul, Minnesota`,
+        format: 'json',
+    });
+
+    fetch(`${nominatimEndpoint}?${params.toString()}`)
+      .then(response => response.json())
+      .then(data => {
+        if (data && data.length > 0) {
+          const latitude = data[0].lat;
+          const longitude = data[0].lon;
+
+          const customIcon = L.icon({
+            iconUrl: 'marker.jpeg', // Update the path based on project structure
+            iconSize: [32, 32], // Adjust as needed
+            iconAnchor: [16, 32], // Adjust as needed
+            popupAnchor: [0, -32], // Adjust as needed
+          });
+
+          L.marker([latitude, longitude], { icon: customIcon }).addTo(map.leaflet)
+            .bindPopup(`Case Number: ${caseNumber}`).openPopup();
+        }
+      })
+      .catch(error => console.error('Error geocoding:', error));
+  }
+}
+
+
+
+
+function getSearch(neighborhoodName) {
+  // Check if the search value is a valid neighborhood name
+  console.log("Searching for:", neighborhoodName); // Check if function is called
+  neighborhoodName = neighborhoodName.trim().toLowerCase(); // Normalize input
+
+  neighborhoodName = neighborhoodName.trim().toLowerCase();
+  const validNeighborhood = map.neighborhood_markers.find(neighborhood => neighborhood.marker.toLowerCase() === neighborhoodName.toLowerCase() === neighborhoodName);
+
+  if (validNeighborhood) {
+    // Zoom in on the selected neighborhood
+    console.log("Found neighborhood:", validNeighborhood.location); // Check coordinates
+    map.leaflet.setView(validNeighborhood.location, 14);
+
+    // Filter the incidents for the selected neighborhood
+    const filteredIncidents = crimeData.value.incidents.filter(incident => incident.neighborhood_number === validNeighborhood.number);
+
+    // Update the crimeTableData
+    crimeTableData.value = filteredIncidents.map(incident => ({
+      case_number: incident.case_number,
+      date_time: incident.date_time,
+      code: incident.code,
+      incident: incident.incident,
+      police_grid: incident.police_grid,
+      neighborhood_number: incident.neighborhood_number,
+      block: incident.block,
+    }));
+
+    // Clear existing markers
+    map.leaflet.eachLayer(layer => {
+      if (layer instanceof L.Marker) {
+        map.leaflet.removeLayer(layer);
+      }
+    });
+
+    // Add markers for the selected neighborhood
+    addNeighborhoodMarkers();
+
+    // Call plotData for each incident in the selected neighborhood
+    filteredIncidents.forEach(incident => {
+      plotData(incident); // Assuming plotData function takes an incident as an argument
+    });
+  } else {
+    console.error(`Invalid neighborhood: ${neighborhoodName}`);
+    alert(`Invalid neighborhood: ${neighborhoodName}`); // User feedback
+  }
+}
+
+function goToLocation() {
+  let locationInput = document.getElementById('locationInput').value.trim();
+  if (!locationInput) return;
+
+  // Check if input is coordinates (latitude, longitude)
+  let coords = locationInput.split(',').map(Number);
+  if (coords.length === 2 && !isNaN(coords[0]) && !isNaN(coords[1])) {
+    if (coordsAreWithinBounds(coords)) {
+      map.leaflet.setView(coords, 14);
+    } else {
+      alert("Coordinates are outside of St. Paul's boundaries.");
+    }
+  } else {
+    // Handle address input using geocoding
+    fetch(`https://nominatim.openstreetmap.org/search?q=${encodeURIComponent(locationInput)}&format=json`)
+    .then(response => response.json())
+    .then(data => {
+      if (data.length > 0 && coordsAreWithinBounds([data[0].lat, data[0].lon])) {
+        map.leaflet.setView([data[0].lat, data[0].lon], 14);
+      } else {
+        alert("Address not found or outside St. Paul city boundaries.");
+      }
+    })
+    .catch(error => console.error('Geocoding error:', error));
+  }
+}
+/*function goToLocation() {
+    console.log
+    let locationInput = document.getElementById('locationInput').value.trim;
+    if (!locationInput) return;
+
+    // Check if the Leaflet map is initialized
+    if (!map.leaflet) {
+        console.error("Leaflet map is not initialized.");
+        return;
+    }
+    // Check if input is coordinates (latitude, longitude)
+    let coords = locationInput.split(',').map(Number);
+  if (coords.length === 2 && !isNaN(coords[0]) && !isNaN(coords[1])) {
+    // Check if coordinates are within St. Paul's bounds
+    if (coordsAreWithinBounds(coords)) {
+      map.leaflet.setView(coords, 14);
+    } else {
+      alert("Coordinates are outside of St. Paul's boundaries.");
+    }
+  } else {
+    // Handle address input using geocoding
+    fetch(`https://nominatim.openstreetmap.org/search?q=${encodeURIComponent(locationInput)}&format=json`)
+    .then(response => response.json())
+    .then(data => {
+          if (data.length > 0 && coordsAreWithinBounds([data[0].lat, data[0].lon])) {
+            map.leaflet.setView([data[0].lat, data[0].lon], 14);
+          } else {
+            alert("Address not found or outside St. Paul city boundaries.");
+          }
+        })
+        .catch(error => console.error('Geocoding error:', error));
+    }
+}
+*/
+
+    function coordsAreWithinBounds([lat, lon]) {
+  // Replace with the correct bounding coordinates for St. Paul
+  let bounds = map.bounds;
+  return lat >= bounds.se.lat && lat <= bounds.nw.lat && lon >= bounds.nw.lng && lon <= bounds.se.lng;
+}
+
+</script>
+
+
+<template>
+    <pageheader style="margin-bottom: 30px !important;"></pageheader>
+    <div class="grid-x" style="padding-bottom: 20px;">
+        <div class="cell medium-12 large-8 columns chunk">
+            <div class="grid-container map">
+                <div class="grid-x">
+                    <div id="leafletmap" class="cell auto" style="border-radius: 20px;"></div>
+                </div>
+            </div>
+            <div>
+                <pageLegend></pageLegend>
+            </div>
+            <template v-if="!isLoading">
+                <pageTable :crimeTableData="crimeTableData" :deleteIncident="deleteIncident" :plotData="plotData" style="width: 100%;"></pageTable>
+            </template>
+            <template v-else>
+                <p>Loading data...</p>
+            </template>
+        </div>
+        <div class="cell large-3 columns bar">
+            <div style="padding-bottom: 15px;">
+                <div class="search-bar">
+                  <div>
+                    <input id="locationInput" type="text" placeholder="Enter coordinates or address">
+                    <button @click="goToLocation">Go to Location</button>
+                </div>
+                    <label>URL: </label>
+                    <div style="padding-bottom: 5px;">
+                        <input id="dialog-url" class="dialog-input" type="url" v-model="crime_url" placeholder="http://localhost:8000" />
+                        <p class="dialog-error" v-if="dialog_err">Error: must enter valid URL</p>
+                    </div>
+                    <button class="button" type="button" @click="closeDialog">OK</button>
+                </div>
+            </div>
+            <pageSidebar :getSearch="getSearch"></pageSidebar>
+        </div>
+    </div>
+    <pageFooter></pageFooter>
+
+ 
+</template>
+
+
+<style>
+
+.search-bar {
+    margin: 10px;
+    /* Add more styling */
+  }
+
+
+#rest-dialog {
+    width: 20rem;
+    margin-top: 100rem;
+    z-index: 1000;
+}
+
+#leafletmap {
+    height: 500px;
+}
+
+.dialog-header {
+    font-size: 1.2rem;
+    font-weight: bold;
+}
+
+.dialog-label {
+    font-size: 1rem;
+}
+
+.dialog-input {
+    font-size: 1rem;
+    width: 100%;
+}
+
+.dialog-error {
+    font-size: 1rem;
+    color: #D32323;
+}
+
+.main{
+    background-color: white;
+    border-radius: 30px;
+    padding: 10px;
+    padding-top: 25px;
+    width: 90%;
+}
+
+
+.chunk{
+    padding: 20px;
+    background-color: white;
+    border-radius: 30px;
+}
+
+.bar{
+    margin: 30px;
+}
+
+.map{
+    margin-bottom: 30px;
+}
+
+pageheader {
+    margin-bottom: 20px;
+}
+
+.test{
+    background-color: white;
+    border-radius: 20px;
+    padding: 20px;
+    margin-bottom: 30px;
+}
+
+.button{
+    margin-top: 30px;
+    font-weight: bold;
+    width: 100%;
+    background-color: rgb(221, 237, 237);
+    border-radius: 10px;
+    color: black;
+    border-width: 2px;
+    border-color: none;
+}
+
+.button:hover{
+    font-weight: bold;
+    color: black;
+    background-color: rgb(221, 237, 237);
+    border-width: 2px;
+    border-color: black;
+}
+
+
+</style>
\ No newline at end of file
diff --git a/NewIncidentForm.vue b/NewIncidentForm.vue
new file mode 100644
index 0000000..e9641fa
--- /dev/null
+++ b/NewIncidentForm.vue
@@ -0,0 +1,108 @@
+<!-- NewIncidentForm.vue -->
+
+<template>
+  <div class="popup">
+    <form @submit.prevent="submitForm">
+      <div class="pads">
+          <h4>New Incident Form</h4>
+      </div>
+      <div class="pads">
+          <label for="case_number">Case Number:</label>
+          <input v-model="formData.case_number" type="text" id="case_number" required />
+      </div>
+      <div class="pads">
+          <label for="date_time">Date/Time:</label>
+          <input v-model="formData.date_time" type="datetime-local" id="date_time" required />
+      </div>
+      <div class="pads">
+          <label for="code">Code:</label>
+          <input v-model="formData.code" type="number" id="code" required />
+      </div>
+      <div class="pads">
+          <label for="incident">Incident:</label>
+          <input v-model="formData.incident" type="text" id="incident" required />
+      </div>
+      <div class="pads">
+          <label for="police_grid">Police Grid:</label>
+          <input v-model="formData.police_grid" type="number" id="police_grid" required />
+      </div>
+      <div class="pads">
+          <label for="neighborhood_number">Neighborhood Number:</label>
+          <input v-model="formData.neighborhood_number" type="number" id="neighborhood_number" required />
+      </div>
+      <div class="pads">
+          <label for="block">Block:</label>
+          <input v-model="formData.block" type="text" id="block" required />
+      </div>
+      <div style="padding: 10px;">
+          <button class="button" type="submit">Submit</button>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script>
+import { reactive } from 'vue';
+
+export default {
+  data() {
+    return reactive({
+      formData: {
+        case_number: "",
+        date_time: "",
+        code: null,
+        incident: "",
+        police_grid: null,
+        neighborhood_number: null,
+        block: "",
+        // Add other form fields here
+      },
+    });
+  },
+  methods: {
+
+      submitForm() {
+    this.$emit("submit-incident", this.formData);
+  },
+
+  },
+};
+</script>
+
+<!-- NewIncidentForm.vue -->
+
+<style scoped>
+.popup {
+position: fixed;
+top: 50%;
+left: 50%;
+transform: translate(-50%, -50%);
+background: rgb(221, 237, 237);
+padding: 20px;
+border-radius: 10px;
+border-width: 5px;
+border-color: black;
+border-style: solid;
+width: 50%;
+height: 72%;
+box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+z-index: 1000; /* Set a value higher than the z-index of the map */
+}
+
+.button{
+  background-color: white;
+  border-radius: 10px;
+  color: black;
+  border-width: 2px;
+  border-color: none;
+}
+
+.button:hover{
+  border-width: 2px;
+  border-color: black;
+}
+.pads{
+  padding: 5px;
+  padding-bottom: 0px;;
+}
+</style>
\ No newline at end of file
diff --git a/filters.vue b/filters.vue
new file mode 100644
index 0000000..fbb493e
--- /dev/null
+++ b/filters.vue
@@ -0,0 +1,149 @@
+<script>
+  export default {
+    data() {
+      return {
+        checkboxesSection1: {
+          'murder' : [100, 110, 120],
+          'Rape' : [210, 220],
+          'Robbery' : [300, 311, 312, 314, 321, 322, 323, 324, 331, 333, 334, 341, 342, 343, 344, 351, 352, 353, 354, 361, 363, 364, 371, 373, 374],
+          'Aggravated Asssault' : [400, 410, 411, 412, 420, 421, 422, 430, 431, 432, 440, 441, 442, 450, 451, 452, 453],
+          'Burglary' : [500, 510, 511, 513, 515, 516, 520, 521, 523, 525, 526, 530, 531, 533, 535, 536, 540, 541, 543, 545, 546, 550, 551, 553, 555, 556, 560, 561, 563, 565, 566],
+          'Theft' : [600, 603, 611, 612, 613, 614, 621, 622, 623, 630, 631, 632, 633, 640, 641, 642, 643, 651, 652, 653, 661, 662, 663, 671, 672, 673, 681, 682, 683, 691, 692, 693],
+          'Motor Vehicle Theft' : [700, 710, 711, 712, 720, 721, 722, 730, 731, 732],
+          'Assault' : [810, 861, 862, 863],
+          'Arson' : [900, 901, 903, 905, 911, 913, 915, 921, 922, 923, 925, 931, 933, 941, 942, 951, 961, 971, 972, 975, 981, 982],
+          'Criminal Damage to Property' : [1400, 1401, 1410, 1415, 1416, 1420, 1425, 1426, 1430, 1435, 1436],
+          'Narcotics' : [1800, 1810, 1811, 1813, 1814, 1815, 1820, 1822, 1823, 1824, 1825, 1830, 1835, 1840, 1841, 1842, 1843, 1844, 1845, 1850, 1855, 1860, 1865, 1870, 1880, 1885],
+          'Weapons' : [2619],
+          'Death Investigation' : [3100],
+          'Proactive Police Visit' : [9954],
+          'Community Engagement Event' : [9959],
+          'Proactive Foot Patrol' : [9986]
+        },
+        selectedCheckboxesSection1: [],
+  
+        checkboxesSection2: {
+          'Conway/Battlecreek/Highwood' : 1,
+          'Greater East Side' : 2,
+          'West Side' : 3,
+          'Dayton\'s Bluff' : 4,
+          'Payne - Phalen' : 5,
+          'North End' : 6,
+          'Frogtown' : 7, 
+          'Summit - University' : 8,
+          'West Seventh' : 9,
+          'Como Park' : 10,
+          'Hamline - Midway' : 11,
+          'St. Anthony Park' : 12,
+          'Union Park' : 13,
+          'Macalester - Groveland' : 14,
+          'Highland' : 15,
+          'Summit Hill' : 16,
+          'Downtown' : 17
+        },
+        selectedCheckboxesSection2: [],
+  
+        startDate: '',
+        endDate: '',
+  
+        selectedOption: '',
+      };
+    },
+    methods: {
+      applyFilters() {
+        // Handle the logic to apply filters with the selected data
+        console.log('Incidents:', this.selectedCheckboxesSection1);
+        console.log('Neighborhoods:', this.selectedCheckboxesSection2);
+        console.log('Start Date:', this.startDate);
+        console.log('End Date:', this.endDate);
+        console.log('Selected Option:', this.selectedOption);
+      },
+    },
+  };
+</script>
+<template>
+    <div>
+      <!-- Section with 12 checkboxes -->
+      <div style="padding: 5px; background-color: rgb(221, 237, 237);">
+        <div style="background-color: white;">
+            <p>Incidents</p>
+            <div v-for="(value, key) in checkboxesSection1" :key="key">
+              <input type="checkbox" v-model="selectedCheckboxesSection1" :value="value" />
+              {{ key }}
+            </div>
+        </div>
+      </div>
+  
+      <!-- Section with 17 checkboxes -->
+      <div style="padding: 5px; background-color: rgb(221, 237, 237);">
+        <div style="background-color: white;">
+          <p>Neighborhoods</p>
+          <div v-for="(value, key) in checkboxesSection2" :key="key">
+            <input type="checkbox" v-model="selectedCheckboxesSection2" :value="value" />
+            {{ key }}
+          </div>
+        </div>
+      </div>
+  
+      <!-- Two date selectors -->
+      <div>
+        <div>
+          <label for="startDate">Select Start Date:</label>
+          <input type="date" id="startDate" v-model="startDate" />
+        </div>
+        <div>
+          <label for="endDate">Select End Date:</label>
+          <input type="date" id="endDate" v-model="endDate" />
+        </div>
+      </div>
+  
+      <!-- Selector with 8 options -->
+      <div style="padding-top: 10px; padding-bottom: 10px;">
+        <select v-model="selectedOption">
+          <option value="">Select Limit</option>
+          <option value="5">5</option>
+          <option value="10">10</option>
+          <option value="25">25</option>
+          <option value="50">50</option>
+          <option value="100">100</option>
+          <option value="250">250</option>
+          <option value="500">500</option>
+          <option value="1000">1000</option>
+        </select>
+      </div>
+  
+      <!-- Button to apply filters -->
+      <div>
+        <button class="button" @click="applyFilters">Apply Filters</button>
+      </div>
+    </div>
+  </template>
+  
+  
+<style scoped>
+ .button{
+    background-color: rgb(221, 237, 237);
+    border-radius: 10px;
+    color: black;
+    border-width: 2px;
+    border-color: none;
+  }
+
+  .button:hover{
+    border-width: 2px;
+    border-color: black;
+  }
+
+  p{
+    font-size: 20px;
+    font-weight: bold;
+  }
+
+  .line{
+    background-color: black;
+    width: 100%;
+    height: 3px;
+    border-radius: 10px;
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/header.vue b/header.vue
new file mode 100644
index 0000000..33ebd1d
--- /dev/null
+++ b/header.vue
@@ -0,0 +1,21 @@
+<template>
+    <div class="saint-paul-crime-header">
+      <h1>Saint Paul Crime</h1>
+    </div>
+  </template>
+  
+  <style scoped>
+  .saint-paul-crime-header {
+    margin-bottom: 30px;
+    background-color: white;
+    padding: 20px;
+    text-align: center;
+    border-bottom: 1px solid #ccc; /* Optional: Add a border at the bottom for separation */
+  }
+  
+  h1 {
+    margin: 0;
+    color: #333; /* Optional: Set text color */
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/sidebar.vue b/sidebar.vue
new file mode 100644
index 0000000..cecedb8
--- /dev/null
+++ b/sidebar.vue
@@ -0,0 +1,210 @@
+<script>
+import NewIncidentForm from "./NewIncidentForm.vue"
+import pageFilters from "./filters.vue"
+
+
+
+export default{
+    data(){
+        return {
+          showIncidentForm: false,
+
+            filtered: {
+                incidents: [],
+                neighborhoods: [],
+                startDate: '',
+                endDate: '',
+                limit: [],
+                removed: false
+            },
+            searchValue: '',
+            searchErr: false,
+            filters: false,
+            showIncidentDropdown: false,
+            showNeighborhoodDropdown: false,
+            neighborhood_names: {
+                'Conway/Battlecreek/Highwood' : 1,
+                'Greater East Side' : 2,
+                'West Side' : 3,
+                'Dayton\'s Bluff' : 4,
+                'Payne - Phalen' : 5,
+                'North End' : 6,
+                'Frogtown' : 7, 
+                'Summit - University' : 8,
+                'West Seventh' : 9,
+                'Como Park' : 10,
+                'Hamline - Midway' : 11,
+                'St. Anthony Park' : 12,
+                'Union Park' : 13,
+                'Macalester - Groveland' : 14,
+                'Highland' : 15,
+                'Summit Hill' : 16,
+                'Downtown' : 17
+            }
+        };
+  },
+    methods: {
+        searchNeighborhood() {
+            this.$emit('searchNeighborhood', document.getElementById('neighborhoodInput').value.trim());
+        },
+        incidentChange(value, targetArray) {
+            // ... implementation ...
+        },
+        neighborhoodChange(value, targetArray) {
+            // ... implementation ...
+        },
+        toggleFilters() {
+            // ... implementation ...
+        },
+        openIncidentForm() {
+            // ... implementation ...
+        },
+    methods: {
+   
+      incidentChange(value, targetArray) {
+      const index = targetArray.indexOf(value);
+      if (index !== -1) {
+        targetArray.splice(index, 1);
+      } else {
+        targetArray.push(value);
+      }
+    },
+    
+    submitIncident(formData) {
+            this.$emit("submitIncident", formData);
+            this.showIncidentForm = false;
+        },
+        
+    },
+    components: {
+        NewIncidentForm,
+        pageFilters
+    },
+    neighborhoodChange(value, targetArray) {
+      const index = targetArray.indexOf(value);
+      if (index !== -1) {
+        targetArray.splice(index, 1);
+      } else {
+        targetArray.push(value);
+      }
+    },
+    toggleFilters(){
+      this.filters = !this.filters;
+    },
+    openIncidentForm(){
+      this.showIncidentForm = true;
+    },
+    submitIncident(formData){
+      this.$emit("submitIncident", formData);
+      this.showIncidentForm = false;
+    },
+  },
+  components: {
+    NewIncidentForm,
+    pageFilters
+  },
+};
+
+
+</script>
+<template>
+    <div style="justify-content: space-evenly;">
+        <div class="select">
+              <div style="padding-bottom: 5px;">
+                    <input id="searchInput" class="dialog-input" style="height: 40px;" v-model="searchValue" placeholder="Neighborhood Name" />
+                    <p class="dialog-error" v-if="searchErr">Must Enter a Valid Neighborhood</p>
+              </div> 
+              <button class="button" type="button" @click="this.$parent.getSearch(searchValue);">Search</button>
+        </div>
+       
+        <div class="select">
+            <button class="button" @click="toggleFilters">Filters</button>
+            <pageFilters v-if="filters == true"></pageFilters>
+        </div>
+        <div class="select">
+            <button class="button" @click="openIncidentForm">Submit New Incident</button>
+            <NewIncidentForm v-if="showIncidentForm" @submits="submitIncident"></NewIncidentForm>
+        </div>
+    </div>
+  </template>
+  
+  <style scoped>
+  div {
+    background-color: white;
+    width: 100%;
+    border-radius: 20px;
+    text-align: center;
+    padding: 5px;
+  }
+  
+  .select {
+    margin-bottom: 40px;
+    width: 100%;
+    border-radius: 10px;
+    font-weight: bold;
+  }
+  
+  /* Style the dropdowns */
+  select {
+    width: 100%;
+    padding: 0.5rem;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+  }
+  
+  /* Style the date inputs */
+  input[type="date"] {
+    width: 100%;
+    padding: 0.5rem;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+  }
+
+  .button{
+    background-color: rgb(221, 237, 237);
+    border-radius: 10px;
+    color: black;
+    border-width: 2px;
+    border-color: none;
+  }
+
+  .button:hover{
+    border-width: 2px;
+    border-color: black;
+  }
+
+  .searchButton{
+    background-color: rgb(221, 237, 237);
+    border-radius: 10px;
+    color: black;
+    border-width: 2px;
+    border-color: none;
+  }
+
+  .searchButton:hover{
+    background-color: rgb(221, 237, 237);
+    border-radius: 10px;
+    color: black;
+    border-width: 2px;
+    border-color: none;
+  }
+
+  .search{
+    width: 80%
+  }
+
+.dropdown-content {
+  display: none;
+  position: absolute;
+  background-color: #f9f9f9;
+  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+  padding: 5px;
+  z-index: 1;
+}
+
+.dropdown-content input[type="checkbox"] {
+  display: block;
+  margin: 0;
+}
+  </style>
+  
\ No newline at end of file
diff --git a/table.vue b/table.vue
new file mode 100644
index 0000000..a24c5b2
--- /dev/null
+++ b/table.vue
@@ -0,0 +1,170 @@
+<script setup>
+defineProps(['crimeTableData', 'deleteIncident', 'plotData']);
+
+
+const violentCodes = [2619, 810, 861, 862, 863, 100, 110, 120, 210, 220, 400, 410, 411, 412, 420, 421, 422,
+                      430, 431, 432, 440, 441, 442, 450, 451, 452, 453, 300, 311, 312, 314, 321, 322, 323, 
+                      324, 331, 333, 334, 341, 342, 343, 344, 351, 352, 353, 354, 361, 363, 364, 371, 373, 374];
+const propCodes = [1400, 1401, 1410, 1415, 1416, 1420, 1425, 1426, 1430, 1435, 1436, 900, 901, 903, 905, 911, 913,
+                   915, 921, 922, 923, 925, 931, 933, 941, 942, 951, 961, 971, 972, 975, 981, 982, 700, 710, 711, 712, 720,
+                   721, 722, 730, 731, 732, 600, 603, 611, 612, 613, 614, 621, 622, 623, 630, 631, 632, 633, 640, 641, 642, 643,
+                   651, 652, 653, 661, 662, 663, 671, 672, 673, 681, 682, 683, 691, 692, 693, 500, 510, 511, 513, 515, 516,
+                   520, 521, 523, 525, 526, 530, 531, 533, 535, 536, 540, 541, 546, 553, 543, 545, 550, 551, 555, 556, 560, 
+                   561, 563, 565, 566];
+const otherCodes = [9986, 9959, 9954, 3100, 1800, 1810, 1811, 1813, 1814, 1815, 1820, 1822, 1823, 1824, 1825, 1830,
+                    1835, 1840, 1841, 1842, 1843, 1844, 1845, 1850, 1855, 1860, 1865, 1870, 1880, 1885];
+
+function getNeighborhood(n_id){
+    let neighborhood = "St.Paul";
+    if(n_id == 1){
+        neighborhood = "Southside";
+    }
+    if(n_id == 2){
+        neighborhood = "Greater East Side";
+    }
+    if(n_id == 3){
+        neighborhood = "West Side";
+    }
+    if(n_id == 4){
+        neighborhood = "Dayton's Bluff";
+    }
+    if(n_id == 5){
+        neighborhood = "Payne-Phalen";
+    }
+    if(n_id == 6){
+        neighborhood = "North End";
+    }
+    if(n_id == 7){
+        neighborhood = "Frogtown";
+    }
+    if(n_id == 8){
+        neighborhood = "Summit - University";
+    }
+    if(n_id == 9){
+        neighborhood = "West Seventh";
+    }
+    if(n_id == 10){
+        neighborhood = "Como Park";
+    }
+    if(n_id == 11){
+        neighborhood = "Hamline - Midway";
+    }
+    if(n_id == 12){
+        neighborhood = "St. Anthony Park";
+    }
+    if(n_id == 13){
+        neighborhood = "Union Park";
+    }
+    if(n_id == 14){
+        neighborhood = "Macalester - Groveland";
+    }
+    if(n_id == 15){
+        neighborhood = "Highland";
+    }
+    if(n_id == 16){
+        neighborhood = "Summit Hill";
+    }
+    if(n_id == 17){
+        neighborhood = "Downtown";
+    }
+    return neighborhood;
+}
+
+function getRowColorClass(code) {
+    // Define your logic for assigning colors based on code values
+    if (violentCodes.includes(code)) {
+        return 'row-color-a';
+    } else if (propCodes.includes(code)) {
+        return 'row-color-b';
+    } else if (otherCodes.includes(code)) {
+        return 'row-color-c';
+    } else {
+        return ''; // Default color or no additional class
+    }
+}
+
+
+
+
+</script>
+
+
+<template>
+
+    <div style="width: 100%;">
+        <table style="width: 100%;" v-if="crimeTableData && crimeTableData.length > 0">
+            <thead style="width: 100%;">
+                <tr>
+                    <th>Case Number</th>
+                    <th>Date and Time</th>
+                    <th>Code</th>
+                    <th>Incident</th>
+                    <th>Police Grid</th>
+                    <th>Neighborhood</th>
+                    <th>Block</th>
+                    <th>Plot Data</th>
+                    <th>Delete Data</th>
+                </tr>
+            </thead>
+            <tbody style="width: 100%;">
+                <tr style="border-radius: 10px;" v-for="item in crimeTableData" :key="item.case_number" :class="getRowColorClass(item.code)">
+                    <td>{{ item.case_number }}</td>
+                    <td>{{ item.date_time }}</td>
+                    <td>{{ item.code }}</td>
+                    <td>{{ item.incident }}</td>
+                    <td>{{ item.police_grid }}</td>
+                    <td>{{ getNeighborhood(item.neighborhood_number) }}</td>
+                    <td>{{ item.block }}</td>
+                    <td><button id="plot" class="button button1" type="button" @click="plotData(item.case_number)"><b>!</b></button></td>
+                    <td><button id=delete class="button" type="button" @click="deleteIncident(item.case_number)"><b>X</b></button></td>
+                </tr>
+            </tbody>
+        </table>
+        <p v-else>Loading Data...</p>
+    </div>
+</template>
+
+
+<style scoped>
+.row-color-a {
+    background-color: rgb(252, 96, 99); /* Set your desired color for code A */
+}
+
+.row-color-b {
+    background-color: rgb(252, 203, 104); /* Set your desired color for code B */
+}
+
+.row-color-c {
+    background-color: rgb(104, 252, 161); /* Set your desired color for code C */
+}
+
+.row{
+    border-radius: 10px;
+    border: 1px solid #ccc; /* Add a border for visibility */
+}
+
+table {
+    border-radius: 10px;
+    border-collapse: separate;
+    border-spacing: 0 8px;
+}
+
+
+.button{
+    background-color: red;
+}
+
+.button:hover{
+    background-color: red;
+}
+
+.button1{
+    background-color:darkseagreen;
+}
+
+.button1:hover{
+    background-color:darkseagreen;
+}
+
+/* Add more classes and colors as needed */
+</style>
\ No newline at end of file