Change Color Structure to tailwindCSS Colors

This commit is contained in:
Florian Bauer 2023-06-07 00:07:53 +02:00
parent 57a495f224
commit eb24f8ff95
3 changed files with 16 additions and 26 deletions

View File

@ -85,7 +85,7 @@ async function load() {
filtersStore.innerHTML = ` filtersStore.innerHTML = `
${customCheckbox("all", "<strong>Alle</strong>", true, "gray", "gray")} ${customCheckbox("all", "<strong>Alle</strong>", true, "gray", "gray")}
${STORE_KEYS.map((store) => ${STORE_KEYS.map((store) =>
customCheckbox(store, stores[store].name, stores[store].name.toLowerCase().endsWith("de") ? false : true, stores[store].color2, "gray") customCheckbox(store, stores[store].name, stores[store].name.toLowerCase().endsWith("de") ? false : true, stores[store].color, "gray")
).join(" ")} ).join(" ")}
`; `;

View File

@ -51,7 +51,7 @@ async function load() {
filtersStore.innerHTML = ` filtersStore.innerHTML = `
${customCheckbox(`all`, "<strong>Alle</strong>", true, "gray", "gray")} ${customCheckbox(`all`, "<strong>Alle</strong>", true, "gray", "gray")}
${STORE_KEYS.map((store) => ${STORE_KEYS.map((store) =>
customCheckbox(store, stores[store].name, stores[store].name.toLowerCase().endsWith("de") ? false : true, stores[store].color2, "gray") customCheckbox(store, stores[store].name, stores[store].name.toLowerCase().endsWith("de") ? false : true, stores[store].color, "gray")
).join(" ")} ).join(" ")}
`; `;
filtersStore.querySelector("#all").addEventListener("change", () => { filtersStore.querySelector("#all").addEventListener("change", () => {

View File

@ -2,71 +2,61 @@ const stores = {
billa: { billa: {
name: "Billa", name: "Billa",
budgetBrands: ["clever"], budgetBrands: ["clever"],
color: "rgb(255 255 225)", color: "yellow",
color2: "yellow",
getUrl: (item) => `https://shop.billa.at${item.url}`, getUrl: (item) => `https://shop.billa.at${item.url}`,
}, },
spar: { spar: {
name: "Spar", name: "Spar",
budgetBrands: ["s-budget"], budgetBrands: ["s-budget"],
color: "rgb(225 244 225)", color: "green",
color2: "green",
getUrl: (item) => `https://www.interspar.at/shop/lebensmittel${item.url}`, getUrl: (item) => `https://www.interspar.at/shop/lebensmittel${item.url}`,
}, },
hofer: { hofer: {
name: "Hofer", name: "Hofer",
budgetBrands: ["milfina"], budgetBrands: ["milfina"],
color: "rgb(230 230 255)", color: "purple",
color2: "purple",
getUrl: (item) => `https://www.roksh.at/hofer/produkte/${item.url}`, getUrl: (item) => `https://www.roksh.at/hofer/produkte/${item.url}`,
}, },
lidl: { lidl: {
name: "Lidl", name: "Lidl",
budgetBrands: ["milbona"], budgetBrands: ["milbona"],
color: "rgb(255 225 225)", color: "pink",
color2: "pink",
getUrl: (item) => `https://www.lidl.at${item.url}`, getUrl: (item) => `https://www.lidl.at${item.url}`,
}, },
mpreis: { mpreis: {
name: "MPREIS", name: "MPREIS",
budgetBrands: [], budgetBrands: [],
color: "rgb(255 230 230)", color: "rose",
color2: "rose",
getUrl: (item) => `https://www.mpreis.at/shop/p/${item.id}`, getUrl: (item) => `https://www.mpreis.at/shop/p/${item.id}`,
}, },
dm: { dm: {
name: "DM", name: "DM",
budgetBrands: ["balea"], budgetBrands: ["balea"],
color: "rgb(255 240 230)", color: "orange",
color2: "orange",
getUrl: (item) => `https://www.dm.at/product-p${item.id}.html`, getUrl: (item) => `https://www.dm.at/product-p${item.id}.html`,
}, },
unimarkt: { unimarkt: {
name: "Unimarkt", name: "Unimarkt",
budgetBrands: ["jeden tag", "unipur"], budgetBrands: ["jeden tag", "unipur"],
color: "rgb(179, 217, 255)", color: "blue",
color2: "blue",
getUrl: (item) => `https://shop.unimarkt.at/${item.url}`, getUrl: (item) => `https://shop.unimarkt.at/${item.url}`,
}, },
penny: { penny: {
name: "Penny", name: "Penny",
budgetBrands: ["bravo", "echt bio!", "san fabio", "federike", "blik", "berida", "today", "ich bin österreich"], budgetBrands: ["bravo", "echt bio!", "san fabio", "federike", "blik", "berida", "today", "ich bin österreich"],
color: "rgb(255, 180, 180)", color: "purple",
color2: "purple",
getUrl: (item) => `https://www.penny.at/produkte/${item.url}`, getUrl: (item) => `https://www.penny.at/produkte/${item.url}`,
}, },
dmDe: { dmDe: {
name: "DM DE", name: "DM DE",
budgetBrands: ["balea"], budgetBrands: ["balea"],
color: "rgb(236 254 253)", color: "teal",
color2: "teal",
getUrl: (item) => `https://www.dm.de/product-p${item.id}.html`, getUrl: (item) => `https://www.dm.de/product-p${item.id}.html`,
}, },
reweDe: { reweDe: {
name: "REWE DE", name: "REWE DE",
budgetBrands: ["ja!"], budgetBrands: ["ja!"],
color: "rgb(236 231 225)", color: "stone",
color2: "stone",
getUrl: (item) => `https://shop.rewe.de/p/${item.name.toLowerCase().replace(/ /g, "-")}/${item.id}`, getUrl: (item) => `https://shop.rewe.de/p/${item.name.toLowerCase().replace(/ /g, "-")}/${item.id}`,
}, },
}; };
@ -346,15 +336,15 @@ function itemToDOM(item) {
</td> </td>
` `
); );
// row.style["background"] = stores[item.store]?.color;
row.classList.add( row.classList.add(
"bg-" + stores[item.store]?.color2 + "-200/50", "bg-" + stores[item.store]?.color + "-200/50",
"grid", "grid",
"grid-cols-3", "grid-cols-3",
"col-span-3", "col-span-3",
"md:table-row", "md:table-row",
"border-b", "border-b",
"border-" + stores[item.store]?.color2 + "-200", "border-" + stores[item.store]?.color + "-200",
"rounded-xl", "rounded-xl",
"mb-3", "mb-3",
"border", "border",
@ -551,7 +541,7 @@ function newSearchComponent(parentElement, items, searched, filter, headerModifi
`${store}-${id}`, `${store}-${id}`,
stores[store].name, stores[store].name,
stores[store].name.toLowerCase().endsWith("de") ? false : true, stores[store].name.toLowerCase().endsWith("de") ? false : true,
stores[store].color2, stores[store].color,
"gray" "gray"
) )
).join(" ")} ).join(" ")}