starts to add links from LI, Zoning, and Nearby Topics

.github/workflows/dev_push_to_s3_dev.yml

@@ -6,7 +6,7 @@ name: dev Push to S3 dev bucket
 on:
   push:
     branches:
-      - main
+      - feature/add-links
 jobs:
   build:
 

src/components/topics/LI.vue

@@ -107,6 +107,11 @@ const businessLicensesCompareFn = (a, b) => new Date(b.initialissuedate) - new D
 const businessLicenses = computed(() => { if (LiStore.liBusinessLicenses.rows) return [ ...LiStore.liBusinessLicenses.rows ].sort(businessLicensesCompareFn) });
 const businessLicensesLength = computed(() => businessLicenses.value && businessLicenses.value.length ? businessLicenses.value.length : 0);
 
+// LIRB and BBS Appeals
+const lirbAppealsCompareFn = (a, b) => new Date(b.createddate) - new Date(a.createddate);
+const lirbAppeals = computed(() => { if (LiStore.liLirbAppeals.rows) return [ ...LiStore.liLirbAppeals.rows ].sort(lirbAppealsCompareFn) });
+const lirbAppealsLength = computed(() => lirbAppeals.value && lirbAppeals.value.length ? lirbAppeals.value.length : 0);
+
 // TABLES
 
 const buildingData = computed(() => {
@@ -310,6 +315,38 @@ const businessLicensesTableData = computed(() => {
   }
 });
 
+const lirbAppealsTableData = computed(() => {
+  return {
+    columns: [
+      {
+        label: 'Date',
+        field: 'createddate',
+        type: 'date',
+        dateInputFormat: "yyyy-MM-dd'T'HH:mm:ssX",
+        dateOutputFormat: 'MM/dd/yyyy',
+      },
+      {
+        label: 'License Number',
+        field: 'link',
+        html: true,
+      },
+      {
+        label: 'Appeal Grounds',
+        field: 'appealgrounds',
+      },
+      {
+        label: 'Type',
+        field: 'appealtype',
+      },
+      {
+        label: 'Status',
+        field: 'appealstatus',
+      }
+    ],
+    rows: lirbAppeals.value || [],
+  }
+});
+
 </script>
 
 <template>
@@ -674,6 +711,58 @@ const businessLicensesTableData = computed(() => {
         :href="`https://li.phila.gov/Property-History/search?address=${encodeURIComponent(MainStore.currentAddress)}`"
       >See all business licenses at L&I Property History <font-awesome-icon icon="fa-solid fa-external-link-alt" /></a>
     </div>
+
+    <!-- LIRB and BBS Appeals Table -->
+    <div class="data-section">
+      <h2 class="subtitle mb-3 is-5 table-title">
+        LIRB and BBS Appeals
+        <font-awesome-icon
+          v-if="LiStore.loadingLiLirbAppeals"
+          icon="fa-solid fa-spinner"
+          spin
+        />
+        <span v-else>({{ lirbAppealsLength }})</span>
+      </h2>
+      <div
+        v-if="lirbAppealsTableData"
+        class="horizontal-table"
+      >
+        <vue-good-table
+          id="lirb-appeals"
+          :columns="lirbAppealsTableData.columns"
+          :rows="lirbAppealsTableData.rows"
+          :pagination-options="paginationOptions(lirbAppealsTableData.rows.length)"
+          style-class="table"
+        >
+          <template #emptystate>
+            <div v-if="LiStore.loadingLiLirbAppeals">
+              Loading LIRB and BBS appeals... <font-awesome-icon
+                icon="fa-solid fa-spinner"
+                spin
+              />
+            </div>
+            <div v-else>
+              No LIRB and BBS appeals found
+            </div>
+          </template>
+          <template #pagination-top="props">
+            <custom-pagination-labels
+              :mode="'pages'"
+              :total="props.total"
+              :perPage="5"
+              @page-changed="props.pageChanged"
+              @per-page-changed="props.perPageChanged"
+            >
+            </custom-pagination-labels>
+          </template>
+        </vue-good-table>
+      </div>
+      <a
+        class="table-link"
+        target="_blank"
+        :href="`https://li.phila.gov/Property-History/search?address=${encodeURIComponent(MainStore.currentAddress)}`"
+      >See all appeals at L&I Property History <font-awesome-icon icon="fa-solid fa-external-link-alt" /></a>
+    </div>
   </section>
 </template>
 
@@ -760,6 +849,18 @@ only screen and (max-width: 768px),
     td:nth-of-type(5):before { content: "Status"; }
   }
 
+  #lirb-appeals {
+    td:nth-of-type(2) {
+      min-height: 60px;
+    }
+
+    td:nth-of-type(1):before { content: "Date"; }
+    td:nth-of-type(2):before { content: "Appeal Number"; }
+    td:nth-of-type(3):before { content: "Appeal Grounds"; }
+    td:nth-of-type(4):before { content: "Type"; }
+    td:nth-of-type(5):before { content: "Status"; }
+  }
+
 }
 
 

src/components/topics/Zoning.vue

@@ -185,6 +185,8 @@ const rcosTableData = computed(() => {
     class="topic-info"
   >
     Base district zoning maps, associated zoning overlays, and Registered Community Organizations applicable to your search address. If you notice a discrepancy, please contact <a href="mailto:planning@phila.gov">planning@phila.gov</a>. Source: Department of Planning and Development
+    <br><br>
+    A fuller summary of zoning for this address can be found on the <a target="_blank" :href="'https://www.phila.gov/zoning-summary-generator/?address='+MainStore.currentAddress">Zoning Summary Generator</a>.
   </div>
   <collection-summary
     :value="'STATUS'"

src/components/topics/nearbyActivity/Nearby311.vue

@@ -101,6 +101,7 @@ const nearby311TableData = computed(() => {
 
 <template>
   <div class="mt-5">
+    <div class="topic-info">See all <a target="_blank" href="https://iframe.publicstuff.com/#?client_id=242">311 requests</a>.</div>
     <h2 class="subtitle mb-3 is-5">
       311 Requests
       <font-awesome-icon

src/components/topics/nearbyActivity/NearbyCrimeIncidents.vue

@@ -99,6 +99,7 @@ const nearbyCrimeIncidentsTableData = computed(() => {
 
 <template>
   <div class="mt-5">
+    <div class="topic-info">See all <a target="_blank" href="https://www.phillypolice.com/crime-data/crime-statistics/">crime statistics</a>.</div>
     <h2 class="subtitle mb-3 is-5">
       Crime Incidents
       <font-awesome-icon

src/components/topics/nearbyActivity/NearbyVacantIndicatorPoints.vue

@@ -81,6 +81,7 @@ const nearbyVacantIndicatorsTableData = computed(() => {
 
 <template>
   <div class="mt-5">
+    <div class="topic-info">See all <a target="_blank" href="https://phl.maps.arcgis.com/apps/webappviewer/index.html?id=64ac160773d04952bc17ad895cc00680">vacant properties</a>.</div>
     <h2 class="subtitle mb-3 is-5">
       Likely Vacant Properties
       <font-awesome-icon

src/components/topics/nearbyActivity/NearbyZoningAppeals.vue

@@ -103,6 +103,11 @@ const nearbyZoningAppealsTableData = computed(() => {
           return (xSplit < ySplit ? -1 : (xSplit > ySplit ? 1 : 0));
         },
       },
+      {
+        label: 'Link',
+        field: 'link',
+        html: true,
+      }
     ],
     rows: nearbyZoningAppeals.value || [],
   }
@@ -112,6 +117,7 @@ const nearbyZoningAppealsTableData = computed(() => {
 
 <template>
   <div class="mt-5">
+    <div class="topic-info">See all at the <a target="_blank" href="https://li.phila.gov/zba-appeals-calendar">Zoning Board of Adjustment (ZBA) appeals calendar</a>.</div>
     <h2 class="subtitle mb-3 is-5">
       Zoning Appeals
       <font-awesome-icon
@@ -160,6 +166,7 @@ only screen and (max-width: 768px){
     td:nth-of-type(2):before { content: "Location"; }
     td:nth-of-type(3):before { content: "Description"; }
     td:nth-of-type(4):before { content: "Distance"; }
+    td:nth-of-type(5):before { content: "Link"; }
   }
 }
 

src/stores/LiStore.js

@@ -26,6 +26,8 @@ export const useLiStore = defineStore('LiStore', {
       loadingLiViolations: true,
       liBusinessLicenses: {},
       loadingLiBusinessLicenses: true,
+      liLirbAppeals: {},
+      loadingLiLirbAppeals: false,
       loadingLiData: true,
     };
   },
@@ -41,6 +43,7 @@ export const useLiStore = defineStore('LiStore', {
       this.fillLiPermits();
       this.fillLiViolations();
       this.fillLiBusinessLicenses();
+      this.fillLiLirbAppeals();
     },
     async clearAllLiData() {
       this.loadingLiData = true;
@@ -61,6 +64,8 @@ export const useLiStore = defineStore('LiStore', {
       this.loadingLiViolations = true;
       this.liBusinessLicenses = {};
       this.loadingLiBusinessLicenses = true;
+      this.liLirbAppeals = {};
+      this.loadingLiLirbAppeals = true;
     },
     async fillLiBuildingFootprints() {
       // if (import.meta.env.VITE_DEBUG == 'true') console.log('fillLiBuildingFootprints is running');
@@ -452,7 +457,58 @@ export const useLiStore = defineStore('LiStore', {
         this.loadingLiBusinessLicenses = false;
         if (import.meta.env.VITE_DEBUG == 'true') console.error('liBusinessLicenses - await never resolved, failed to fetch address data')
       }
-    }
+    },
+    async fillLiLirbAppeals() {
+      if (import.meta.env.VITE_DEBUG == 'true') console.log('fillLiLirbAppeals is running');
+      try {
+        const GeocodeStore = useGeocodeStore();
+        const feature = GeocodeStore.aisData.features[0];
+        let baseUrl = 'https://phl.carto.com/api/v2/sql?q=';
+        const eclipse_location_id = feature.properties.eclipse_location_id.replace(/\|/g, "', '");
+        const streetaddress = feature.properties.street_address;
+        const opaQuery = feature.properties.opa_account_num ? ` OR opa_account_num IN ('${ feature.properties.opa_account_num}')` : ``;
+        const pwd_parcel_id = feature.properties.pwd_parcel_id;
+        const addressId = feature.properties.li_address_key.replace(/\|/g, "', '");
+
+        let query;
+        if (eclipse_location_id) {
+          query = `SELECT * FROM APPEALS
+          WHERE ( addressobjectid IN ('`+ eclipse_location_id +`') AND (appealtype like '%25LIRB%25' or appealtype like '%25BBS%25') \
+          OR address = '${streetaddress}' AND (appealtype like '%25LIRB%25' or appealtype like '%25BBS%25') \
+          OR addressobjectid IN ('${ addressId }') AND (appealtype like '%25LIRB%25' or appealtype like '%25BBS%25') \
+          OR parcel_id_num IN ('${ pwd_parcel_id }') AND (appealtype like '%25LIRB%25' or appealtype like '%25BBS%25') ) \
+          ${opaQuery } \
+          ORDER BY appealtype`;
+        } else {
+          query = `SELECT * FROM APPEALS
+          WHERE ( address = '${streetaddress}' AND (appealtype like '%25LIRB%25' or appealtype like '%25BBS%25') \
+          OR parcel_id_num IN ( '${ pwd_parcel_id }' ) AND (appealtype like '%25LIRB%25' or appealtype like '%25BBS%25') ) \
+          OR addressobjectid IN ('${ addressId }') AND (appealtype like '%25LIRB%25' or appealtype like '%25BBS%25') \
+          ${opaQuery } \
+          ORDER BY appealtype`;
+        }
+        const url = baseUrl += query;
+        const response = await fetch(url);
+        if (response.ok) {
+          const data = await response.json();
+          data.rows.forEach((item) => {
+            let address = item.address;
+            if (item.unit_num && item.unit_num != null) {
+              address += ' Unit ' + item.unit_num;
+            }
+            item.link = "<a target='_blank' href='https://li.phila.gov/Property-History/search/appeal-detail?address="+encodeURIComponent(address)+"&Id="+item.appealnumber+"'>"+item.appealnumber+" <i class='fa fa-external-link-alt'></i></a>";
+          });
+          this.liLirbAppeals = data;
+          this.loadingLiLirbAppeals = false;
+        } else {
+          this.loadingLiLirbAppeals = false;
+          if (import.meta.env.VITE_DEBUG == 'true') console.warn('liLirbAppeals - await resolved but HTTP status was not successful')
+        }
+      } catch {
+        this.loadingLiLirbAppealss = false;
+        if (import.meta.env.VITE_DEBUG == 'true') console.error('liLirbAppeals - await never resolved, failed to fetch address data')
+      }
+    },
   },
   // keeping formatting getters here in the store only works if the data is not looped
   // through for a horizontal table

src/stores/NearbyActivityStore.js

@@ -276,6 +276,7 @@ export const useNearbyActivityStore = defineStore('NearbyActivityStore', {
             dateMinNum: 1,
             dateMinType: 'year',
             dateField: 'scheduleddate',
+            where: "appealtype like '%ZBA%' OR appealtype = 'Zoning Board of Adjustment'",
           },
         };
         let params = fetchNearby(feature, dataSource);
@@ -284,6 +285,7 @@ export const useNearbyActivityStore = defineStore('NearbyActivityStore', {
           const data = response.data;
           data.rows.forEach(row => {
             row.distance_ft = (row.distance * 3.28084).toFixed(0) + ' ft';
+            row.link = `<a target="blank" href="https://li.phila.gov/zba-appeals-calendar/appeal?from=2-6-2000&to=4-6-2050&region=all&Id=${row.appealnumber}">${row.appealnumber}</a>`;
           });
           this.nearbyZoningAppeals = data;
           this.setLoadingData(false);