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>
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 Score from "~components/score.svelte"
export let data
</script>
<section class="pl-2 py-2 text-gray-700 bg-gray-50 rounded-lg">
<p class="font-bold mb-2">Advanced metrics:</p>
<div class="grid grid-cols-3">
<ul class="grid content-around col-span-2 gap-1">
<Category category={"Animal Welfare"}></Category>
<Category category={"Biodiversity"}></Category>
<Category category={"Greenhouse Gases"}></Category>
<Category category={"Restricted Substances"}></Category>
<Category category={"Recycling Packaging"}></Category>
<Category category={"Recycling Textiles"}></Category>
<Category category={"Water Consumption"}></Category>
</ul>
<ul class="grid content-around justify-self-center gap-1">
<Score data={data.animal_welfare}></Score>
<Score data={data.biodiversity_conservation}></Score>
<Score data={data.energy_greenhouse_gas_emissions}></Score>
<Score data={data.restricted_substance_list}></Score>
<Score data={data.waste_recycling_packaging_retail}></Score>
<Score data={data.waste_recycling_product_textiles}></Score>
<Score data={data.water_consumption}></Score>
</ul>
</div>
</section>
<div transition:slide={{ duration: 500 }}>
<section class="pl-2 py-2 text-gray-700 bg-gray-50 rounded-lg">
<p class="font-bold mb-2">Advanced metrics:</p>
<div class="grid grid-cols-3">
<ul class="grid content-around col-span-2 gap-1">
<Category category={"Animal Welfare"}></Category>
<Category category={"Biodiversity"}></Category>
<Category category={"Greenhouse Gases"}></Category>
<Category category={"Restricted Substances"}></Category>
<Category category={"Recycling Packaging"}></Category>
<Category category={"Recycling Textiles"}></Category>
<Category category={"Water Consumption"}></Category>
</ul>
<ul class="grid content-around justify-self-center gap-1">
<Score data={data.animal_welfare}></Score>
<Score data={data.biodiversity_conservation}></Score>
<Score data={data.energy_greenhouse_gas_emissions}></Score>
<Score data={data.restricted_substance_list}></Score>
<Score data={data.waste_recycling_packaging_retail}></Score>
<Score data={data.waste_recycling_product_textiles}></Score>
<Score data={data.water_consumption}></Score>
</ul>
</div>
</section>
</div>
components/socialData.svelte
+ 38
− 31
View file @ 15a29f57
<script>
import { slide } from "svelte/transition"
import Category from "~components/category.svelte"
import Score from "~components/score.svelte"
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>
<p class="font-bold mb-2">Advanced metrics:</p>
<div class="grid grid-cols-3">
<ul class="grid content-around col-span-2 gap-1">
<Category category={"Animal Welfare"}></Category>
<Category category={"Biodiversity"}></Category>
<Category category={"Greenhouse Gases"}></Category>
<Category category={"Restricted Substances"}></Category>
<Category category={"Recycling Packaging"}></Category>
<Category category={"Recycling Textiles"}></Category>
<Category category={"Water Consumption"}></Category>
</ul>
<ul class="grid content-around justify-self-center gap-1">
<Score data={data.animal_welfare}></Score>
<Score data={data.biodiversity_conservation}></Score>
<Score data={data.energy_greenhouse_gas_emissions}></Score>
<Score data={data.restricted_substance_list}></Score>
<Score data={data.waste_recycling_packaging_retail}></Score>
<Score data={data.waste_recycling_product_textiles}></Score>
<Score data={data.water_consumption}></Score>
</ul>
</div>
<div transition:slide={{ duration: 500 }}>
<section class="pl-2 py-2 text-gray-700 bg-gray-50 rounded-lg">
<p class="font-bold mb-2">Advanced metrics:</p>
<div class="grid grid-cols-3">
<ul class="grid content-around col-span-2 gap-1">
<Category category={"Anual Leave"}></Category>
<Category category={"Corruption"}></Category>
<Category category={"Local Engagement"}></Category>
<Category category={"Discrimination"}></Category>
<Category category={"Diversity"}></Category>
<Category category={"Equal Pay"}></Category>
<Category category={"Harassment"}></Category>
<Category category={"Health & Safety"}></Category>
<Category category={"Parental Leave"}></Category>
<Category category={"Wellbeing"}></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.annual_leave_public_holidays}></Score>
<Score data={data.anti_bribery_corruption}></Score>
<Score data={data.community_engagement}></Score>
<Score data={data.discrimination}></Score>
<Score data={data.diversity_inclusion}></Score>
<Score data={data.equal_pay}></Score>
<Score data={data.harassment_violence}></Score>
<Score data={data.health_safety}></Score>
<Score data={data.maternity_rights_parental_leave}></Score>
<Score data={data.mental_health_wellbeing}></Score>
<Score data={data.wages_benefits}></Score>
<Score data={data.freedom_of_association}></Score>
<Score data={data.working_hours_breaks}></Score>
</ul>
</div>
</section>
</div>
components/supplyData.svelte
+ 73
− 54
View file @ 15a29f57
......@@ -13,60 +13,79 @@
<section class="pl-2 py-2 text-gray-700 bg-gray-50 rounded-lg">
<p class="font-bold mb-2">Advanced metrics:</p>
<div class="grid grid-cols-2 items-center mb-2 divide-x">
<button class="font-bold">Environmental</button>
<button class="font-bold">Social</button>
</div>
<div class="grid grid-cols-3">
<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={"Community 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>
<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>
{#key option}
<button
class="font-bold"
style={option ? "color: black;" : "color: gray;"}
on:click={() => (option = true)}>Environmental</button>
<button
class="font-bold"
style={option ? "color: gray;" : "color: black;"}
on:click={() => (option = false)}>Social</button>
{/key}
</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>
</div>
content.svelte
+ 7
− 5
View file @ 15a29f57
......@@ -26,6 +26,7 @@
<script lang="ts">
import { countryToAlpha2 } from "country-to-iso"
import type BrandData from "interfaces/data_advanced"
import { slide } from "svelte/transition"
import { Storage } from "@plasmohq/storage"
......@@ -40,7 +41,7 @@
let supply: string = ""
let social: string = ""
let current: boolean = true
let advancedData
let advancedData: BrandData
let answer
let advancedValue
......@@ -169,10 +170,11 @@
<p class="ml-1 flex gap-1 items-center">
Brand: <span class="font-bold">{brand}</span>
{#if country != ""}
//Making use of an API that returns country flags when queried using ISO 3166-1 standard
//Turning full country names to ISO 3166-1 compatible using a node-country-to-iso package
<img
class="h-6"
<!--Making use of an API that returns country flags when queried using ISO
3166-1 standard. Turning full country names to ISO 3166-1 compatible
using a node-country-to-iso package-->
<img
class="h-6"
src="https://flagsapi.com/{countryToAlpha2(country)}/flat/32.png"
alt="country flag" />
{/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