Skip to content
Snippets Groups Projects
Commit 9434af57 authored by Piotrek's avatar Piotrek
Browse files

Feat: Added the similar brands component

parent cd73b560
No related branches found
No related tags found
1 merge request!1Fix: Figured out the issue regarding ts not seeing chrome types + fixed...
<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
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M4 .755l14.374 11.245-14.374 11.219.619.781 15.381-12-15.391-12-.609.755z"/></svg>
\ No newline at end of file
......@@ -6,6 +6,7 @@ import type { PlasmoMessaging } from "@plasmohq/messaging"
// import initialized db instance
import { db } from "~background"
// Export it!
interface data_small {
brand: string
COUNTRY: string
......
......@@ -9,7 +9,7 @@
export let data
</script>
<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 mb-2">
<p class="font-bold mb-2">Advanced metrics:</p>
{#key current}
<div transition:slide={{ duration: 500 }}>
......
<script lang="ts">
import info from "data-base64:~assets/info.svg"
import { onMount } from "svelte"
import { createFloatingActions } from "svelte-floating-ui"
import { flip, offset, shift } from "svelte-floating-ui/dom"
import { offset, shift } from "svelte-floating-ui/dom"
import { scale } from "svelte/transition"
const [floatingRef, floatingContent] = createFloatingActions({
......
<script>
import { slide } from "svelte/transition"
import Category from "~components/category.svelte"
import Score from "~components/score.svelte"
......
<p class="mt-1 text-[0.75rem] text-gray-400 font-light">
<p class="text-[0.75rem] text-gray-400 font-light">
Source: <a
class="font-bold"
href="https://www.fashionrevolution.org/about/transparency/"
......
<script>
import { scale } from "svelte/transition"
//set this to only display once per session
</script>
<span class="relative flex h-2 w-2 left-1 bottom-2" transition:scale>
......
<script>
<script lang="ts">
export let type
export let score
// Setting default to 3xl
export let font: string = "text-3xl"
const envTotal: number = 1.75
const supTotal: number = 6
const socTotal: number = 3.25
let total
function setValues(data: number, totalRating: number): number {
return Math.round((data / totalRating) * 100)
}
function setScore(data: number): number {
if (type.toLowerCase() === "environmental") {
data = envTotal
} else if (type.toLowerCase() === "supply chain") {
data = supTotal
} else if (type.toLowerCase() === "social") {
data = socTotal
}
return setValues(score, data)
}
$: finalScore = setScore(score)
</script>
<div class="text-3xl">
{#if score <= 20}
<p class="text-red-700">{score}</p>
{:else if score <= 30}
<p class="text-red-500">{score}</p>
{:else if score <= 40}
<p class="text-red-300">{score}</p>
{:else if score <= 50}
<p class="text-orange-500">{score}</p>
{:else if score <= 60}
<p class="text-orange-300">{score}</p>
{:else if score <= 70}
<p class="text-yellow-500">{score}</p>
{:else if score <= 80}
<p class="text-yellow-300">{score}</p>
{:else if score <= 90}
<p class="text-green-300">{score}</p>
<div class="{font}">
{#if finalScore <= 20}
<p class="text-red-700">{finalScore}</p>
{:else if finalScore <= 30}
<p class="text-red-500">{finalScore}</p>
{:else if finalScore <= 40}
<p class="text-red-300">{finalScore}</p>
{:else if finalScore <= 50}
<p class="text-orange-500">{finalScore}</p>
{:else if finalScore <= 60}
<p class="text-orange-300">{finalScore}</p>
{:else if finalScore <= 70}
<p class="text-yellow-500">{finalScore}</p>
{:else if finalScore <= 80}
<p class="text-yellow-300">{finalScore}</p>
{:else if finalScore <= 90}
<p class="text-green-300">{finalScore}</p>
{:else}
<p class="text-green-700">{score}</p>
<p class="text-green-700">{finalScore}</p>
{/if}
</div>
......@@ -19,6 +19,6 @@
<button on:click={toggleAdvanced}>
<div class="grid grid-cols-1 justify-items-center">
<p>{header}</p>
<Rating {score}></Rating>
<Rating type={header} score={score}/>
</div>
</button>
<script>
import { slide } from "svelte/transition"
import Category from "~components/category.svelte"
import Score from "~components/score.svelte"
......
<script lang="ts">
import next from "data-base64:~assets/next.svg"
import dataset from "~assets/dataset_small.json"
import { brandSuggestions } from "~functions/suggestions"
import Rating from "./rating.svelte"
interface data_small {
brand: string
COUNTRY: string
......@@ -9,18 +13,19 @@
supplychain_total: number
social_total: number
}
let font: string = "text-sm"
export let currentBrand: string
export let fieldName: string
let suggestedBrands: data_small[] = []
// Recompute the value whenever fieldName changes
$: text = getField(fieldName)
// Recompute the value whenever fieldName or currentBrand changes
$: text = getField(fieldName, currentBrand)
function getField(fieldName: string): string {
function getField(fieldName: string, brand: string): string {
let answer: string
brandSuggestions.forEach((field) => {
if (field.category === fieldName.toLowerCase()) {
answer = fieldName
getMetrics(field.items, currentBrand)
getMetrics(field.items, brand)
}
})
return answer
......@@ -40,8 +45,35 @@
}
</script>
<section>
{#each suggestedBrands as brand}
{brand.brand}
{/each}
<section class="p-2 text-gray-700 bg-gray-50 rounded-lg mb-2">
<h2 class="text-sm font-bold mb-2">
Similar <span class="text-green-700">{text}</span> brands:
</h2>
<div class="">
<div class="w-full flex flex-wrap gap-y-2">
{#each suggestedBrands as brand}
<div class="grid grid-cols-4 text-xl w-full items-center">
<h3 class={font}>{brand.brand}</h3>
<div class="grid grid-cols-3 col-span-2 justify-items-center">
<Rating
type={"environmental"}
score={brand.environmental_total}
{font} />
<Rating
type={"supply chain"}
score={brand.supplychain_total}
{font} />
<Rating type={"social"} score={brand.social_total} {font} />
</div>
<div class="text-xs font-bold bg-gray-100 text-center rounded-lg p-1 ml-2">
<button>Advanced</button>
</div>
</div>
{/each}
</div>
</div>
<button class="{font} flex items-center gap-1 mt-2 font-bold"
>See more <div class="bg-gray-100 p-1 rounded-full h-4 w-4">
<img src={next} alt="See more button" />
</div></button>
</section>
......@@ -27,7 +27,7 @@
<script lang="ts">
import { countryToAlpha2 } from "country-to-iso"
import type BrandData from "interfaces/data_advanced"
import { scale, slide } from "svelte/transition"
import { slide } from "svelte/transition"
import { Storage } from "@plasmohq/storage"
......@@ -73,10 +73,6 @@
chrome.storage.sync.set({ visible: false })
}
function setValues(data: number, totalRating: number) {
return Math.round((data / totalRating) * 100).toString()
}
async function addUrl() {
const resp = await sendToBackground({
name: "sendUrl"
......@@ -86,23 +82,25 @@
// 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)
// REFACTOR THIS PLS
function changeBrand() {
checked = true
if (current === "Brand") {
advancedDataDisplay = advancedDataSecond
brand = answer.secondAnswer.brand
country = answer.secondAnswer.COUNTRY
environmental = setValues(answer.secondAnswer.environmental_total, 1.75)
supply = setValues(answer.secondAnswer.supplychain_total, 6)
social = setValues(answer.secondAnswer.social_total, 3.25)
environmental = answer.secondAnswer.environmental_total
supply = answer.secondAnswer.supplychain_total
social = answer.secondAnswer.social_total
current = "Store"
} else {
advancedDataDisplay = advancedData
brand = answer.mainAnswer.brand
country = answer.mainAnswer.COUNTRY
environmental = setValues(answer.mainAnswer.environmental_total, 1.75)
supply = setValues(answer.mainAnswer.supplychain_total, 6)
social = setValues(answer.mainAnswer.social_total, 3.25)
environmental = answer.mainAnswer.environmental_total
supply = answer.mainAnswer.supplychain_total
social = answer.mainAnswer.social_total
current = "Brand"
}
}
......@@ -129,12 +127,9 @@
brand = resp.answer.mainAnswer.brand
country = resp.answer.mainAnswer.COUNTRY
secondBrand = resp.answer.secondAnswer.brand
environmental = setValues(
resp.answer.mainAnswer.environmental_total,
1.75
)
supply = setValues(resp.answer.mainAnswer.supplychain_total, 6)
social = setValues(resp.answer.mainAnswer.social_total, 3.25)
environmental = answer.mainAnswer.environmental_total
supply = resp.answer.mainAnswer.supplychain_total
social = resp.answer.mainAnswer.social_total
if (resp.validUrl != undefined) {
visible = true
chrome.storage.sync.set({ visible: true })
......@@ -202,8 +197,7 @@
</div>
{#if advancedValue.length > 0}
<div class="mt-1" transition:slide={{ duration: 300 }}>
<AdvancedData current={advancedValue} data={advancedDataDisplay}
></AdvancedData>
<AdvancedData current={advancedValue} data={advancedDataDisplay} />
</div>
{/if}
{#if advancedDataDisplay != undefined}
......
......@@ -8,7 +8,7 @@ export const brandSuggestions = [
{ category: "menswear", items: ["ven heusen", "dressmann"] },
{ category: "outdoor", items: ["the north face", "patagonia"] },
{ category: "retailer", items: ["zalando", "amazon", "asos"] },
{ category: "sportswear", items: ["nike", "adidas"] },
{ category: "sportswear", items: ["nike", "adidas", "puma"] },
{ category: "supermarket", items: ["costco", "lidl"] },
{ category: "wholesale", items: ["gildan", "fruit of the loom"] },
{ category: "womenswear", items: ["prettylittlething", "pimkie"] }
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment