Skip to content
Snippets Groups Projects
Commit 15a29f57 authored by Piotrek's avatar Piotrek
Browse files

Feat: Redesigned and finished the advanced data components

parent 94efdd20
No related branches found
No related tags found
1 merge request!1Fix: Figured out the issue regarding ts not seeing chrome types + fixed...
Hide whitespace changes
Inline Side-by-side
components/environmentalData.svelte
+ 27
− 25
View file @ 15a29f57
<script> <script>
import info from "data-base64:~assets/info.svg" import { slide } from "svelte/transition"
import Score from "~components/score.svelte"
import Category from "~components/category.svelte" import Category from "~components/category.svelte"
import Score from "~components/score.svelte"
export let data export let data
</script> </script>
<section class="pl-2 py-2 text-gray-700 bg-gray-50 rounded-lg"> <div transition:slide={{ duration: 500 }}>
<p class="font-bold mb-2">Advanced metrics:</p> <section class="pl-2 py-2 text-gray-700 bg-gray-50 rounded-lg">
<div class="grid grid-cols-3"> <p class="font-bold mb-2">Advanced metrics:</p>
<ul class="grid content-around col-span-2 gap-1"> <div class="grid grid-cols-3">
<Category category={"Animal Welfare"}></Category> <ul class="grid content-around col-span-2 gap-1">
<Category category={"Biodiversity"}></Category> <Category category={"Animal Welfare"}></Category>
<Category category={"Greenhouse Gases"}></Category> <Category category={"Biodiversity"}></Category>
<Category category={"Restricted Substances"}></Category> <Category category={"Greenhouse Gases"}></Category>
<Category category={"Recycling Packaging"}></Category> <Category category={"Restricted Substances"}></Category>
<Category category={"Recycling Textiles"}></Category> <Category category={"Recycling Packaging"}></Category>
<Category category={"Water Consumption"}></Category> <Category category={"Recycling Textiles"}></Category>
</ul> <Category category={"Water Consumption"}></Category>
<ul class="grid content-around justify-self-center gap-1"> </ul>
<Score data={data.animal_welfare}></Score> <ul class="grid content-around justify-self-center gap-1">
<Score data={data.biodiversity_conservation}></Score> <Score data={data.animal_welfare}></Score>
<Score data={data.energy_greenhouse_gas_emissions}></Score> <Score data={data.biodiversity_conservation}></Score>
<Score data={data.restricted_substance_list}></Score> <Score data={data.energy_greenhouse_gas_emissions}></Score>
<Score data={data.waste_recycling_packaging_retail}></Score> <Score data={data.restricted_substance_list}></Score>
<Score data={data.waste_recycling_product_textiles}></Score> <Score data={data.waste_recycling_packaging_retail}></Score>
<Score data={data.water_consumption}></Score> <Score data={data.waste_recycling_product_textiles}></Score>
</ul> <Score data={data.water_consumption}></Score>
</div> </ul>
</section> </div>
</section>
</div>
components/socialData.svelte
+ 38
− 31
View file @ 15a29f57
<script> <script>
import { slide } from "svelte/transition"
import Category from "~components/category.svelte" import Category from "~components/category.svelte"
import Score from "~components/score.svelte" import Score from "~components/score.svelte"
export let data export let data
</script> </script>
<div class="ml-1"> <div transition:slide={{ duration: 500 }}>
<p class="font-bold">Advanced metrics:</p> <section class="pl-2 py-2 text-gray-700 bg-gray-50 rounded-lg">
<p>Animal welfare: {data.animal_welfare}</p> <p class="font-bold mb-2">Advanced metrics:</p>
<p>Biodiversity: {data.biodiversity_conservation}</p> <div class="grid grid-cols-3">
<p>Greenhouse gases: {data.energy_greenhouse_gas_emissions}</p> <ul class="grid content-around col-span-2 gap-1">
<p>Restricted substances: {data.restricted_substance_list}</p> <Category category={"Anual Leave"}></Category>
<p>Recycling packaging: {data.waste_recycling_packaging_retail}</p> <Category category={"Corruption"}></Category>
<p>Recycling textiles: {data.waste_recycling_product_textiles}</p> <Category category={"Local Engagement"}></Category>
<p>Water consumption: {data.water_consumption}</p> <Category category={"Discrimination"}></Category>
<p class="font-bold">Total: {data.environmental_total}</p> <Category category={"Diversity"}></Category>
<p class="font-bold mb-2">Advanced metrics:</p> <Category category={"Equal Pay"}></Category>
<div class="grid grid-cols-3"> <Category category={"Harassment"}></Category>
<ul class="grid content-around col-span-2 gap-1"> <Category category={"Health & Safety"}></Category>
<Category category={"Animal Welfare"}></Category> <Category category={"Parental Leave"}></Category>
<Category category={"Biodiversity"}></Category> <Category category={"Wellbeing"}></Category>
<Category category={"Greenhouse Gases"}></Category> <Category category={"Wages & Benefits"}></Category>
<Category category={"Restricted Substances"}></Category> <Category category={"Worker Unions"}></Category>
<Category category={"Recycling Packaging"}></Category> <Category category={"Working Hours"}></Category>
<Category category={"Recycling Textiles"}></Category> </ul>
<Category category={"Water Consumption"}></Category> <ul class="grid content-around justify-self-center gap-1">
</ul> <Score data={data.annual_leave_public_holidays}></Score>
<ul class="grid content-around justify-self-center gap-1"> <Score data={data.anti_bribery_corruption}></Score>
<Score data={data.animal_welfare}></Score> <Score data={data.community_engagement}></Score>
<Score data={data.biodiversity_conservation}></Score> <Score data={data.discrimination}></Score>
<Score data={data.energy_greenhouse_gas_emissions}></Score> <Score data={data.diversity_inclusion}></Score>
<Score data={data.restricted_substance_list}></Score> <Score data={data.equal_pay}></Score>
<Score data={data.waste_recycling_packaging_retail}></Score> <Score data={data.harassment_violence}></Score>
<Score data={data.waste_recycling_product_textiles}></Score> <Score data={data.health_safety}></Score>
<Score data={data.water_consumption}></Score> <Score data={data.maternity_rights_parental_leave}></Score>
</ul> <Score data={data.mental_health_wellbeing}></Score>
</div> <Score data={data.wages_benefits}></Score>
<Score data={data.freedom_of_association}></Score>
<Score data={data.working_hours_breaks}></Score>
</ul>
</div>
</section>
</div> </div>
components/supplyData.svelte
+ 73
− 54
View file @ 15a29f57
...@@ -13,60 +13,79 @@ ...@@ -13,60 +13,79 @@
<section class="pl-2 py-2 text-gray-700 bg-gray-50 rounded-lg"> <section class="pl-2 py-2 text-gray-700 bg-gray-50 rounded-lg">
<p class="font-bold mb-2">Advanced metrics:</p> <p class="font-bold mb-2">Advanced metrics:</p>
<div class="grid grid-cols-2 items-center mb-2 divide-x"> <div class="grid grid-cols-2 items-center mb-2 divide-x">
<button class="font-bold">Environmental</button> {#key option}
<button class="font-bold">Social</button> <button
</div> class="font-bold"
<div class="grid grid-cols-3"> style={option ? "color: black;" : "color: gray;"}
<ul class="grid content-around col-span-2 gap-1"> on:click={() => (option = true)}>Environmental</button>
<Category category={"Annual Leave"}></Category> <button
<Category category={"Corruption"}></Category> class="font-bold"
<Category category={"Child Labour"}></Category> style={option ? "color: gray;" : "color: black;"}
<Category category={"Community Engagement"}></Category> on:click={() => (option = false)}>Social</button>
<Category category={"Discrimination"}></Category> {/key}
<Category category={"Equal Pay"}></Category>
<Category category={"Ethical Standards"}></Category>
<Category category={"Forced Labour"}></Category>
<Category category={"Harassment"}></Category>
<Category category={"Health & Safety"}></Category>
<Category category={"Homeworking"}></Category>
<Category category={"Living Conditions"}></Category>
<Category category={"Parental Leave"}></Category>
<Category category={"Overtime Pay"}></Category>
<Category category={"Subcontracting"}></Category>
<Category category={"Wages & Benefits"}></Category>
<Category category={"Worker Unions"}></Category>
<Category category={"Working Hours"}></Category>
<Category category={"Biodiversity"}></Category>
<Category category={"Emissions"}></Category>
<Category category={"Water consumption"}></Category>
<Category category={"Recycling Packaging"}></Category>
<Category category={"Recycling Products"}></Category>
</ul>
<ul class="grid content-around justify-self-center gap-1">
<Score data={data.supplier_annual_leave_public_holidays}></Score>
<Score data={data.supplier_anti_bribery_corruption}></Score>
<Score data={data.supplier_child_labour}></Score>
<Score data={data.supplier_community_engagement}></Score>
<Score data={data.supplier_discrimination}></Score>
<Score data={data.supplier_equal_pay}></Score>
<Score data={data.supplier_ethical_standards}></Score>
<Score data={data.supplier_forced_labour}></Score>
<Score data={data.supplier_harassment_violence}></Score>
<Score data={data.supplier_health_safety}></Score>
<Score data={data.supplier_homeworking}></Score>
<Score data={data.supplier_living_conditions}></Score>
<Score data={data.supplier_maternity_rights_parental_leave}></Score>
<Score data={data.supplier_overtime_pay}></Score>
<Score data={data.supplier_subcontracting}></Score>
<Score data={data.supplier_wages_benefits}></Score>
<Score data={data.supplier_freedom_of_association}></Score>
<Score data={data.supplier_working_hours_breaks}></Score>
<Score data={data.supplier_biodiversity_conservation}></Score>
<Score data={data.supplier_energy_greenhouse_gas_emissions}></Score>
<Score data={data.supplier_waste_recycling_packaging_retail}></Score>
<Score data={data.supplier_waste_recycling_product_textiles}></Score>
<Score data={data.supplier_water_consumption}></Score>
</ul>
</div> </div>
{#key option}
<div class="grid grid-cols-3" transition:slide>
{#if option}
<ul class="grid content-around col-span-2 gap-1">
<Category category={"Annual Leave"}></Category>
<Category category={"Corruption"}></Category>
<Category category={"Child Labour"}></Category>
<Category category={"Local Engagement"}></Category>
<Category category={"Discrimination"}></Category>
<Category category={"Equal Pay"}></Category>
<Category category={"Ethical Standards"}></Category>
<Category category={"Forced Labour"}></Category>
<Category category={"Harassment"}></Category>
<Category category={"Health & Safety"}></Category>
<Category category={"Homeworking"}></Category>
<Category category={"Living Conditions"}></Category>
<Category category={"Parental Leave"}></Category>
<Category category={"Overtime Pay"}></Category>
<Category category={"Subcontracting"}></Category>
<Category category={"Wages & Benefits"}></Category>
<Category category={"Worker Unions"}></Category>
<Category category={"Working Hours"}></Category>
</ul>
<ul class="grid content-around justify-self-center gap-1">
<Score data={data.supplier_annual_leave_public_holidays}></Score>
<Score data={data.supplier_anti_bribery_corruption}></Score>
<Score data={data.supplier_child_labour}></Score>
<Score data={data.supplier_community_engagement}></Score>
<Score data={data.supplier_discrimination}></Score>
<Score data={data.supplier_equal_pay}></Score>
<Score data={data.supplier_ethical_standards}></Score>
<Score data={data.supplier_forced_labour}></Score>
<Score data={data.supplier_harassment_violence}></Score>
<Score data={data.supplier_health_safety}></Score>
<Score data={data.supplier_homeworking}></Score>
<Score data={data.supplier_living_conditions}></Score>
<Score data={data.supplier_maternity_rights_parental_leave}></Score>
<Score data={data.supplier_overtime_pay}></Score>
<Score data={data.supplier_subcontracting}></Score>
<Score data={data.supplier_wages_benefits}></Score>
<Score data={data.supplier_freedom_of_association}></Score>
<Score data={data.supplier_working_hours_breaks}></Score>
</ul>
{:else}
<ul class="grid content-around col-span-2 gap-1">
<Category category={"Biodiversity"}></Category>
<Category category={"Emissions"}></Category>
<Category category={"Water consumption"}></Category>
<Category category={"Recycling Packaging"}></Category>
<Category category={"Recycling Products"}></Category>
</ul>
<ul class="grid content-around justify-self-center gap-1">
<Score data={data.supplier_biodiversity_conservation}></Score>
<Score data={data.supplier_energy_greenhouse_gas_emissions}></Score>
<Score data={data.supplier_waste_recycling_packaging_retail}
></Score>
<Score data={data.supplier_waste_recycling_product_textiles}
></Score>
<Score data={data.supplier_water_consumption}></Score>
</ul>
{/if}
</div>
{/key}
</section> </section>
</div> </div>
content.svelte
+ 7
− 5
View file @ 15a29f57
...@@ -26,6 +26,7 @@ ...@@ -26,6 +26,7 @@
<script lang="ts"> <script lang="ts">
import { countryToAlpha2 } from "country-to-iso" import { countryToAlpha2 } from "country-to-iso"
import type BrandData from "interfaces/data_advanced"
import { slide } from "svelte/transition" import { slide } from "svelte/transition"
import { Storage } from "@plasmohq/storage" import { Storage } from "@plasmohq/storage"
...@@ -40,7 +41,7 @@ ...@@ -40,7 +41,7 @@
let supply: string = "" let supply: string = ""
let social: string = "" let social: string = ""
let current: boolean = true let current: boolean = true
let advancedData let advancedData: BrandData
let answer let answer
let advancedValue let advancedValue
...@@ -169,10 +170,11 @@ ...@@ -169,10 +170,11 @@
<p class="ml-1 flex gap-1 items-center"> <p class="ml-1 flex gap-1 items-center">
Brand: <span class="font-bold">{brand}</span> Brand: <span class="font-bold">{brand}</span>
{#if country != ""} {#if country != ""}
//Making use of an API that returns country flags when queried using ISO 3166-1 standard <!--Making use of an API that returns country flags when queried using ISO
//Turning full country names to ISO 3166-1 compatible using a node-country-to-iso package 3166-1 standard. Turning full country names to ISO 3166-1 compatible
<img using a node-country-to-iso package-->
class="h-6" <img
class="h-6"
src="https://flagsapi.com/{countryToAlpha2(country)}/flat/32.png" src="https://flagsapi.com/{countryToAlpha2(country)}/flat/32.png"
alt="country flag" /> alt="country flag" />
{/if} {/if}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment