Feat: Added functionality for correctly displaying all of the advanced metrics...

Feat: Added functionality for correctly displaying all of the advanced metrics (just needs better styling now). Fix: Reworked some of the if statements to ternaries for better readability and conciseness.

assets/next.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M16 8v-4l8 8-8 8v-4h-16l8-8h8z"/></svg>
\ No newline at end of file

assets/store.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20 7.093v-5.093h-3v2.093l3 3zm4 5.907l-12-12-12 12h3v10h18v-10h3zm-5 8h-14v-10.26l7-6.912 7 6.99v10.182zm-5-1h-4v-6h4v6z"/></svg>
\ No newline at end of file

background/messages/pingAdvanced.ts

@@ -22,9 +22,8 @@ async function queryAdvancedData(brandName: string) {
   const brandsSnapshot = await getDocs(brandsCollection)
   brandsSnapshot.forEach((doc) => {
     brandsData = doc.data()
-    console.log(doc.data())
+    console.log(brandsData)
   })
-  console.log("done")
   return brandsData
 }
 

components/advancedData.svelte

 <script>
+  import EnvironmentalData from "~components/environmentalData.svelte"
+  import SupplyData from "~components/supplyData.svelte"
+  import SocialData from "~components/socialData.svelte"
+
+  export let current
+  export let data
 </script>
 
 <section>
-    hi
-</section>
\ No newline at end of file
+  {#if current == "Environmental"}
+    <EnvironmentalData data={data}></EnvironmentalData>
+  {:else if current == "Supply Chain"}
+    <SupplyData data={data}></SupplyData>
+  {:else if current == "Social"}
+    <SocialData data={data}></SocialData>
+  {/if}
+</section>

components/environmentalData.svelte

+<script>
+  export let data
+</script>
+
+<div class="ml-1">
+  <p class="font-bold">Advanced metrics:</p>
+  <p>Animal Welfare: {data.animal_welfare}</p>
+  <p>Biodiversity: {data.biodiversity_conservation}</p>
+  <p>Greenhouse Gases: {data.energy_greenhouse_gas_emissions}</p>
+  <p>Restricted Substances: {data.restricted_substance_list}</p>
+  <p>Recycling Packaging: {data.waste_recycling_packaging_retail}</p>
+  <p>Recycling Textiles: {data.waste_recycling_product_textiles}</p>
+  <p>Water Consumption: {data.water_consumption}</p>
+  <p class="font-bold">Total: {data.environmental_total}</p>
+</div>

components/ratingButton.svelte

 <script>
   import Rating from "~components/rating.svelte"
 
+  import { advanced } from "../content.svelte"
+
   export let header
   export let score
 
+  let advancedValue
+  const unsubscribe = advanced.subscribe((value) => {
+    advancedValue = value
+  })
+
   function toggleAdvanced() {
-    chrome.storage.sync.get(["advanced"]).then((result) => {
-      if (result.advanced) {
-        chrome.storage.sync.set({ advanced: false })
-      } else {
-        chrome.storage.sync.set({ advanced: true })
-      }
-    })
+    advanced.set(advancedValue == header ? "" : header)
   }
 </script>
 
-<button on:click={() => toggleAdvanced()}>
+<button on:click={toggleAdvanced}>
   <div class="grid grid-cols-1 justify-items-center">
     <p>{header}</p>
     <Rating {score}></Rating>

components/socialData.svelte

+<script>
+  export let data
+</script>
+
+<div class="ml-1">
+  <p class="font-bold">Advanced metrics:</p>
+  <p>Animal welfare: {data.animal_welfare}</p>
+  <p>Biodiversity: {data.biodiversity_conservation}</p>
+  <p>Greenhouse gases: {data.energy_greenhouse_gas_emissions}</p>
+  <p>Restricted substances: {data.restricted_substance_list}</p>
+  <p>Recycling packaging: {data.waste_recycling_packaging_retail}</p>
+  <p>Recycling textiles: {data.waste_recycling_product_textiles}</p>
+  <p>Water consumption: {data.water_consumption}</p>
+  <p class="font-bold">Total: {data.environmental_total}</p>
+</div>

components/supplyData.svelte

+<script>
+  import { slide } from "svelte/transition"
+  export let data
+</script>
+
+<div transition:slide={{ duration: 500 }} class="ml-1">
+  <p class="font-bold">Advanced metrics:</p>
+  <p>Annual Leave: {data.supplier_annual_leave_public_holidays}</p>
+  <p>Corruption: {data.supplier_anti_bribery_corruption}</p>
+  <p>Biodiversity: {data.supplier_biodiversity_conservation}</p>
+  <p>Child Labour: {data.supplier_child_labour}</p>
+  <p>Community Engagement: {data.supplier_community_engagement}</p>
+  <p>Discrimination: {data.supplier_discrimination}</p>
+  <p>Equal Pay: {data.supplier_equal_pay}</p>
+  <p>Forced Labour: {data.supplier_forced_labour}</p>
+  <p>Worker Unions: {data.supplier_freedom_of_association}</p>
+  <p>Harassment: {data.supplier_harassment_violence}</p>
+  <p>Health & Safety: {data.supplier_health_safety}</p>
+  <p>Homeworking: {data.supplier_homeworking}</p>
+  <p>Living Conditions: {data.supplier_living_conditions}</p>
+  <p>Parental Leave: {data.supplier_maternity_rights_parental_leave}</p>
+  <p>Overtime Pay: {data.supplier_overtime_pay}</p>
+  <p>Subcontracting: {data.supplier_subcontracting}</p>
+  <p>Wages & Benefits: {data.supplier_wages_benefits}</p>
+  <p>Recycling Packaging: {data.supplier_waste_recycling_packaging_retail}</p>
+  <p>Recycling Products: {data.supplier_waste_recycling_product_textiles}</p>
+  <p>Water consumption: {data.supplier_water_consumption}</p>
+  <p>Working Hours: {data.supplier_working_hours_breaks}</p>
+  <p>Ethical Standards: {data.supplier_ethical_standards}</p>
+  <p class="font-bold">Total: {data.supplychain_total}</p>
+</div>

content.svelte

@@ -2,18 +2,21 @@
   import add from "data-base64:~assets/add.svg"
   import exit from "data-base64:~assets/exit.svg"
   import logo from "data-base64:~assets/iconLarge2.png"
+  import store from "data-base64:~assets/store.svg"
   import cssText from "data-text:~style.css"
   import type { PlasmoCSConfig } from "plasmo"
+  import { writable } from "svelte/store"
 
   import { sendToBackground } from "@plasmohq/messaging"
 
   import RatingButton from "~components/ratingButton.svelte"
 
+  export const advanced = writable("")
   export const config: PlasmoCSConfig = {
     matches: ["<all_urls>"],
     css: ["font.css"]
   }
-
+  // Initializing the stylesheet
   export const getStyle = () => {
     const style = document.createElement("style")
     style.textContent = cssText
@@ -25,34 +28,36 @@
   import { slide } from "svelte/transition"
 
   import { Storage } from "@plasmohq/storage"
+
   import AdvancedData from "~components/advancedData.svelte"
 
-  let advanced = false
-  let visible = false
 
-  chrome.storage.sync.set({ advanced: false })
-  chrome.storage.sync.set({ current: "" })
+  let advancedValue
+  const unsubscribe = advanced.subscribe((value) => {
+    advancedValue = value
+  })
 
   const storage = new Storage()
 
   storage.watch({
     visible: (c) => {
       visible = c.newValue
-    },
-    advanced: (c) => {
-      advanced = c.newValue
     }
   })
-  
+
   function closePopup() {
     chrome.storage.sync.set({ visible: false })
   }
 
+  let visible = false
   let brand = ""
+  let secondBrand = ""
   let environmental = ""
   let supply = ""
   let social = ""
   let current = true
+  let currentData
+  let advancedData
   let answer
 
   async function getData() {
@@ -70,6 +75,7 @@
     } else {
       answer = resp.answer
       brand = resp.answer.mainAnswer.brand
+      secondBrand = resp.answer.secondAnswer.brand
       environmental = Math.round(
         (resp.answer.mainAnswer.environmental_total / 1.75) * 100
       ).toString()
@@ -97,8 +103,10 @@
         name: brand
       }
     })
+    advancedData = respAdvanced.response
+    console.log("Advanced: " + advancedData.brand)
   }
-  // todo: encapsulate and take out the logic to take in an answer object and set 
+  // todo: encapsulate and take out the logic to take in an answer object and set
   // brand, supply, social and enviromental to the newly provided values
   // (will also be useful for the initial setting of those values)
   function changeBrand() {
@@ -140,6 +148,18 @@
         <img class="h-6" src={logo} alt="Leaf logo" />
       </div>
       <div class="justify-self-end mr-1 text-2xl flex items-center">
+        <span class="relative flex h-2 w-2 left-1 bottom-2">
+          <span
+            class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-300 opacity-75"
+          ></span>
+          <span class="relative inline-flex rounded-full h-2 w-2 bg-red-400"
+          ></span>
+        </span>
+        <button class="mr-2" title="See store" on:click={changeBrand}
+          ><img
+            class="w-5 h-5 hover:shadow-md transition rounded-md"
+            src={store}
+            alt="add button" /></button>
         <button class="mr-1" title="Add url to the list"
           ><img
             class="w-6 h-6 hover:shadow-md transition rounded-md"
@@ -152,21 +172,19 @@
             alt="add button" /></button>
       </div>
     </div>
-    <button on:click={() => changeBrand()}>change</button>
     <section class="p-2 font-roboto">
-      <div>
-        <p>Brand: <span class="font-bold">{brand}</span></p>
-      </div>
+      <p class="ml-1">Brand: <span class="font-bold">{brand}</span></p>
       <div class="grid grid-cols-3 justify-items-center text-sm my-2">
         <RatingButton header={"Environmental"} score={environmental}
         ></RatingButton>
         <RatingButton header={"Supply Chain"} score={supply}></RatingButton>
         <RatingButton header={"Social"} score={social}></RatingButton>
       </div>
-      {#if advanced}
-        <div transition:slide={{ delay: 150, duration: 300 }} class="">
-        <AdvancedData></AdvancedData>
-        </div>
+      {#if advancedValue.length > 0}
+          <div transition:slide={{ duration: 300 }} class="">
+            <AdvancedData current={advancedValue} data={advancedData}
+            ></AdvancedData>
+          </div>
       {/if}
       <p class="text-[0.75rem] text-gray-400 font-light">
         Source: <a

tsconfig.json

 {
   "extends": "plasmo/templates/tsconfig.base",
   "exclude": ["node_modules"],
-  "include": [".plasmo/index.d.ts", "./**/*.ts", "./**/*.svelte"],
+  "include": [".plasmo/index.d.ts", "./**/*.ts", "./**/*.svelte", "store/store.js"],
   "compilerOptions": {
     "paths": {
       "~*": ["./*"],