105 lines
No EOL
2.6 KiB
Svelte
105 lines
No EOL
2.6 KiB
Svelte
<script>
|
|
import {
|
|
Card,
|
|
MaterialApp }
|
|
from 'svelte-materialify'
|
|
|
|
export let images
|
|
export let currentbox
|
|
export let boxes
|
|
export let boxset
|
|
export let calories
|
|
//I don't like that I have to have two of these, but after one of them first sends the message
|
|
//it causes the other component to stop being able to recieve messages.
|
|
//So, unless I find a better solution, I have 2 for now.
|
|
const worker = new Worker('./selectedsearch.js')
|
|
|
|
var key = 0
|
|
|
|
function inc() {
|
|
if (images.length-1 != key){
|
|
console.log(images.length)
|
|
console.log
|
|
key+=1
|
|
}
|
|
}
|
|
function dec(){
|
|
if (key-1 != -1){
|
|
key-=1
|
|
}
|
|
}
|
|
function addimage(image){
|
|
console.log(image)
|
|
console.log(image[2][0])
|
|
|
|
if (boxes[boxset][currentbox].length == 1){
|
|
boxes[boxset][currentbox].push(image)
|
|
console.log(calories[boxset])
|
|
calories[boxset].push(image[2][7])
|
|
}
|
|
}
|
|
|
|
|
|
function send(){
|
|
var value = document.getElementById("pasta").value
|
|
console.log(value)
|
|
const sendy = {"recipe" : images, "search": value}
|
|
worker.postMessage(JSON.stringify(sendy))
|
|
}
|
|
|
|
worker.onmessage = function(message) {
|
|
message = JSON.parse(message["data"])
|
|
images = []
|
|
for (var x in message){
|
|
images = [...images, message[x]]
|
|
}
|
|
}
|
|
|
|
|
|
</script>
|
|
<div class="scroll">
|
|
<input id="pasta" on:keypress={send} required>
|
|
<ul>
|
|
{#if images.length > 0 }
|
|
{#each images[key] as x}
|
|
<li> <img src={x[0]} on:click={() => addimage(x)} class="image" style="width: 50px; height: 50px; object-fit: cover; ;border:1px" alt="background"/> </li>
|
|
{/each}
|
|
{/if}
|
|
|
|
</ul>
|
|
<img on:click={dec} src="./left-arrow.png" class="image" style="width: 30px; height: 30px; object-fit: cover;" alt="background"/>
|
|
<img on:click={inc} src="./right-arrow.png" class="image" style="width: 30px; height: 30px; object-fit: cover;" alt="background"/>
|
|
</div>
|
|
|
|
<style>
|
|
.scroll{
|
|
|
|
background-color: whitesmoke;
|
|
width:180px;
|
|
height:250px;
|
|
}
|
|
|
|
.scroll ul
|
|
{
|
|
|
|
display : flex;
|
|
flex-wrap : wrap;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.scroll ul li {
|
|
list-style: none;
|
|
}
|
|
.scroll ul li {
|
|
list-style: none;
|
|
}
|
|
.scroll ul li :hover{
|
|
opacity: 0.7;
|
|
transition: 300;
|
|
}
|
|
#pasta {
|
|
outline: solid black 1px;
|
|
width:180px;
|
|
}
|
|
</style> |