146 lines
No EOL
3.3 KiB
Svelte
146 lines
No EOL
3.3 KiB
Svelte
<script>
|
|
import {
|
|
Card,
|
|
CardTitle,
|
|
CardSubtitle,
|
|
CardActions,
|
|
Button,
|
|
Icon,
|
|
Divider,
|
|
MaterialApp}
|
|
from 'svelte-materialify';
|
|
import { slide } from 'svelte/transition';
|
|
import { mdiChevronDown } from '@mdi/js';
|
|
let active = false;
|
|
function toggle() {
|
|
active = !active;
|
|
}
|
|
export let author
|
|
export let title
|
|
export let subtitle
|
|
export let buttontext
|
|
export let pulltext
|
|
export let img
|
|
export let testlist
|
|
export let calories
|
|
var status = false
|
|
var toggletable = {true : "./liked.png", false : "./unliked.png"}
|
|
|
|
function test() {
|
|
console.log("enter")
|
|
console.log((testlist))
|
|
//this guy makes sure that testlist has a max size of 9 <
|
|
if (!listcontains(title)){
|
|
|
|
console.log("?????")
|
|
if (testlist.length == 0) { testlist.push([]) }
|
|
if (testlist.at(-1).length == 9) { testlist.push([]) }
|
|
testlist.at(-1).push([img, title, calories])
|
|
status = true
|
|
return testlist }
|
|
|
|
else{
|
|
removeImage(testlist, [img, title, calories])
|
|
console.log
|
|
status = false
|
|
return testlist
|
|
}
|
|
|
|
}
|
|
|
|
function listcontains(string){
|
|
return (testlist.join().includes(string))
|
|
|
|
}
|
|
if (listcontains(title)){
|
|
status = true
|
|
|
|
}
|
|
function removeImage(a, b){
|
|
//we find the element and we remove it
|
|
|
|
|
|
//sooooo turns out you can't compare arrays in JS so foreach and == does not work. I will now write my own function
|
|
function compareList(a,b){
|
|
return (a.join == b.join)
|
|
|
|
}
|
|
|
|
function spliceif(array, indice){
|
|
var index = -1
|
|
//as stated above, indexOf doesn't work with lists because == doesn't work with lists because == is actually === which actually is stupid
|
|
for (var x in array){
|
|
var current = array[x]
|
|
if (compareList(current, indice)){
|
|
index = x
|
|
break
|
|
}
|
|
}
|
|
|
|
if (index != -1){
|
|
array.splice(index, 1)
|
|
}
|
|
else{ console.log("AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA") }
|
|
}
|
|
|
|
//so we filter each array in the arra
|
|
a.filter(y => spliceif(y, b))
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
<MaterialApp>
|
|
|
|
<div class="d-flex justify-center mt-4 mb-4">
|
|
|
|
<Card style="max-width:350px;">
|
|
<div class="container">
|
|
<img src={img} class="image" style="width: 300px; height: 300px; object-fit: cover;" alt="background" />
|
|
<div class="overlay">
|
|
|
|
<div class="text" ><img on:click={() => testlist = test()} style="width: 25px; height: 25px; object-fit: cover;" alt="background" src={toggletable[status]}></div>
|
|
</div>
|
|
</div>`
|
|
<CardTitle>{title}</CardTitle>
|
|
<CardTitle>{author}</CardTitle>
|
|
<CardSubtitle>{subtitle}</CardSubtitle>
|
|
<CardActions>
|
|
<Button text>{buttontext}</Button>
|
|
<Button text fab size="small" class="ml-auto" on:click={toggle}>
|
|
<Icon path={mdiChevronDown} rotate={active ? 180 : 0} />
|
|
</Button>
|
|
</CardActions>
|
|
{#if active}
|
|
<div transition:slide>
|
|
<Divider />
|
|
<div class="pull">
|
|
{@html pulltext}
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</Card>
|
|
</div>
|
|
</MaterialApp>
|
|
|
|
<style>
|
|
|
|
|
|
|
|
.container:hover .overlay {
|
|
opacity: 1;
|
|
}
|
|
.pull {
|
|
max-height: 240px;
|
|
overflow-y : auto
|
|
}
|
|
.text {
|
|
color: white;
|
|
font-size: 20px;
|
|
position: absolute;
|
|
top: 5%;
|
|
left: 90%;
|
|
transform: translate(-50%, -50%);
|
|
-ms-transform: translate(-50%, -50%);
|
|
}
|
|
</style> |