112 lines
4.8 KiB
Handlebars
112 lines
4.8 KiB
Handlebars
<Modals::NewProduct @onClickAddProduct={{this.addProduct}}/>
|
|
<div class="flex mt-2 justify-center">
|
|
{{#ember-webcam
|
|
didSnap=(action "snap")
|
|
didError=(action "err")
|
|
as |camera|}}
|
|
<button
|
|
type="button"
|
|
class="ml-2 mt-2 text-sm bg-blue-500 hover:bg-blue-700 text-white py-1 px-2 rounded focus:outline-none focus:shadow-outline"
|
|
{{on "click" (fn this.registerCamera camera)}}
|
|
>
|
|
Rozpocznij skanowanie
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="text-sm bg-blue-500 hover:bg-blue-700 text-white py-1 px-2 rounded focus:outline-none focus:shadow-outline"
|
|
{{ on "click" (fn this.stop)}}
|
|
>
|
|
Zatrzymaj skanowanie
|
|
</button>
|
|
{{/ember-webcam}}
|
|
</div>
|
|
<div class="flex bg-gray-200">
|
|
<div class="flex-1/3 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
|
|
<img
|
|
id="imageToProcess"
|
|
width=300
|
|
src={{this.dataUri}}
|
|
class="h-64"
|
|
alt="podgląd"
|
|
>
|
|
<canvas id="canvasPreview" width=300 height=300></canvas>
|
|
<canvas id="canvasOutput" width=300 height=300></canvas>
|
|
</div>
|
|
<div class="flex w-full bg-gray-400 px-4 py-2 m-2">
|
|
<div class="text-gray-900 w-full">
|
|
<div class="p-4 flex">
|
|
<h1 class="text-3xl">
|
|
Oblicz dla:
|
|
</h1>
|
|
<div class="mt-2 ml-2">
|
|
<input
|
|
class="shadow appearance-none border rounded py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline mb-2"
|
|
placeholder="wiek"
|
|
value={{this.personalData.age}}
|
|
oninput={{action (mut this.personalData.age) value="target.value"}}
|
|
><label class="ml-2">< 10; 100 ></label><br>
|
|
<input
|
|
class="shadow appearance-none border rounded py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline mb-2"
|
|
placeholder="waga"
|
|
value={{this.personalData.weight}}
|
|
oninput={{action (mut this.personalData.weight) value="target.value"}}
|
|
><label class="ml-2">< 40; 130 ></label><br>
|
|
<input
|
|
class="shadow appearance-none border rounded py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline mb-2"
|
|
placeholder="wzrost"
|
|
value={{this.personalData.height}}
|
|
oninput={{action (mut this.personalData.height) value="target.value"}}
|
|
><label class="ml-2">< 140; 230 ></label><br>
|
|
<div class="relative">
|
|
<select class="shadow appearance-none border rounded py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline mb-2">
|
|
<option onclick={{action (mut this.personalData.sex)
|
|
value="target.value"}} value="male">Mężczyzna</option>
|
|
<option onclick={{action (mut this.personalData.sex)
|
|
value="target.value"}} value="female">Kobieta</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="px-3 py-4 flex justify-center">
|
|
<table class="w-full text-md bg-white shadow-md rounded mb-4">
|
|
<tbody>
|
|
<tr class="border-b">
|
|
<th class="text-left p-3 px-5">Nazwa</th>
|
|
<th class="text-left p-3 px-5">Gramatura</th>
|
|
<th></th>
|
|
</tr>
|
|
{{#each this.currentCalculation as |product|}}
|
|
<tr class="border-b hover:bg-orange-100">
|
|
<td class="p-3 px-5">{{product.name}}</td>
|
|
<td class="p-3 px-5">
|
|
<input
|
|
class="shadow appearance-none border rounded py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline mb-2"
|
|
placeholder="gram"
|
|
value={{product.quantity}}
|
|
oninput={{action (mut product.quantity) value="target.value"}}
|
|
>
|
|
</td>
|
|
<td class="p-3 px-5 flex justify-end">
|
|
<button
|
|
type="button"
|
|
class="text-sm bg-red-500 hover:bg-red-700 text-white py-1 px-2 rounded focus:outline-none focus:shadow-outline"
|
|
{{on "click" (fn this.onDelete product)}}
|
|
>
|
|
Usuń
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
{{/each}}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
class="text-sm bg-blue-500 hover:bg-blue-700 text-white py-1 px-2 rounded focus:outline-none focus:shadow-outline"
|
|
{{on "click" (fn this.clickCalculate)}}>
|
|
Oblicz
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|