Added some UI-functionality
parent
791e7f73d7
commit
e9ccf620ca
|
|
@ -0,0 +1 @@
|
|||
webdata/connection.php
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
|
||||
|
||||
.card {
|
||||
margin: 5px 2px;
|
||||
}
|
||||
|
||||
.card-columns .card {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.card li, .card .subtotal {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.card li:nth-child(odd){
|
||||
background-color: #3331;
|
||||
}
|
||||
|
||||
span.price {
|
||||
float: right;
|
||||
font-family: var(--bs-font-monospace);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.subtotal {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
.addItemForm input {
|
||||
transition: width 0.5s;
|
||||
}
|
||||
.addItemForm input:not([type="submit"]):focus {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
/*.addItemForm input {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.addItemForm input[type='number'] {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.addItemForm input[type='submit'] {
|
||||
width: 20%;
|
||||
}*/
|
||||
34
index.php
34
index.php
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>$$REPO_NAME</title>
|
||||
<title>Grocery Assist</title>
|
||||
|
||||
<link rel="stylesheet" href="/css/bootstrap.min.css" type="text/css" />
|
||||
<link rel="stylesheet" href="/css/index.css" type="text/css" />
|
||||
|
|
@ -14,5 +14,37 @@
|
|||
</head>
|
||||
<body>
|
||||
|
||||
<h1 class="headline text-center">Grocery Assist</h1>
|
||||
<div class="container" style="padding-top: 5px;">
|
||||
|
||||
<div class="card-group" style="text-align: center;">
|
||||
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3" style="margin: auto; max-width: 900px;"> <!-- .row-cols-lg-4 -->
|
||||
|
||||
<a href='/plan'>
|
||||
<div class="col mb-4" style='min-width: 100px; min-height: 200px;'>
|
||||
<div class="card h-100" style="margin: auto;">
|
||||
<img src="#" class="card-img-top" alt="Plan">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Plan shopping</h5>
|
||||
<p class="card-text"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="col mb-4" style='min-width: 100px; min-height: 200px;'>
|
||||
<div class="card h-100" style="margin: auto;">
|
||||
<img src="#" class="card-img-top" alt="Plan"></a>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Review</h5>
|
||||
<p class="card-text"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<?php require '../webdata/init.php'; ?><!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>PLAN - Grocery Assist</title>
|
||||
|
||||
<link rel="stylesheet" href="/css/bootstrap.min.css" type="text/css" />
|
||||
<link rel="stylesheet" href="/css/index.css" type="text/css" />
|
||||
|
||||
<script src="/js/jquery-3.5.1.min.js"></script>
|
||||
<script src="/js/bootstrap.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 class="headline text-center">Grocery Assist</h1>
|
||||
<div class="container" style="padding-top: 5px; text-align: center;">
|
||||
|
||||
<div class="card-columns" id="stores" style="text-align: center;">
|
||||
<div class="" style="margin: auto; max-width: 900px;">
|
||||
|
||||
<?php
|
||||
for ($i=0; $i < 0; $i++) {
|
||||
?>
|
||||
<div class="card store" id="store<?=$i+1;?>" style="width: 18rem;">
|
||||
<div class='card-header'>Store <?=$i+1;?></div>
|
||||
<div class="card-body">
|
||||
<ul class="list-group list-group-flush">
|
||||
<?php for ($j=0; $j < random_int(1,10); $j++) {
|
||||
echo "<li class='list-group-item'><span>Item ".($j+1)."</span><span class='price'>".random_int(9,200).",-</span></li>";
|
||||
} ?>
|
||||
</ul>
|
||||
</div>
|
||||
<div class='card-footer subtotal'>Subtotal: <span class='price'>-,-</span></div>
|
||||
</div>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button id="addStore">Add store</button>
|
||||
|
||||
</div>
|
||||
|
||||
<script src='plan.js'></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,120 @@
|
|||
/*jshint sub:true, esversion: 6, -W083 */
|
||||
|
||||
class Store {
|
||||
constructor() {
|
||||
this.items = [];
|
||||
|
||||
let title = "Store "+($(".store").length+1);
|
||||
|
||||
|
||||
let html = "";
|
||||
html += "<div class='card store' style='width: 20rem;'>";
|
||||
html += " <div class='card-header'>"+title+"</div>";
|
||||
html += " <div class='card-body'>";
|
||||
html += " <ul class='list-group list-group-flush'>";
|
||||
html += " <li class='list-group-item emptyList'>No items added</li>";
|
||||
html += " </ul>";
|
||||
html += " <hr>";
|
||||
html += " <form action='#!' class='form-row input-group input-group-sm addItemForm'>";
|
||||
html += " <input type='text' class='form-control newItemName'>";
|
||||
html += " <input type='number' class='form-control newItemPrice' value='0' min='0'>";
|
||||
html += " <div class='input-group-append'>";
|
||||
html += " <input type='submit' class='form-control addItem' value='+'>";
|
||||
html += " </div>";
|
||||
html += " </form>";
|
||||
html += " </div>";
|
||||
html += " <div class='card-footer subtotal'>Subtotal: <span class='price'>-,-</span></div>";
|
||||
html += "</div>";
|
||||
|
||||
this.selector = $(html).appendTo("#stores");
|
||||
|
||||
let that = this;
|
||||
this.selector.find(".addItemForm").on('submit', function(ev){
|
||||
ev.preventDefault();
|
||||
|
||||
if( that.addItem($(this).find('.newItemName').val(), $(this).find('.newItemPrice').val()) !== false){
|
||||
$(this).find('.newItemPrice').val(0);
|
||||
$(this).find('.newItemName').val("").focus();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
addItem(text, price){
|
||||
if(text.length > 0){
|
||||
try {
|
||||
price = Number(price);
|
||||
this.items.push({ text: text, price: price });
|
||||
this.selector.find("ul").append("<li class='list-group-item'><span>"+text+"</span><span class='price'>"+price+",- <button class='remItem'>-</button></span></li>");
|
||||
this.selector.find(".emptyList").hide();
|
||||
|
||||
this.verify();
|
||||
return true;
|
||||
}
|
||||
catch(e){
|
||||
alert("Something failed. Try again.");
|
||||
console.error(e, e.stack);
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
remItem(pos){
|
||||
this.items.splice(pos,1);
|
||||
// remove from database here?
|
||||
|
||||
$(this.selector).find(".remItem").unbind().each((key, val) => {
|
||||
if(key == pos){
|
||||
$(val).parent().parent().remove();
|
||||
}
|
||||
});
|
||||
|
||||
this.verify();
|
||||
}
|
||||
verify(){
|
||||
// UPDATE TOTAL PRICE
|
||||
let total = 0;
|
||||
this.items.forEach(item => {
|
||||
total += item.price;
|
||||
});
|
||||
|
||||
$(this.selector).find(".subtotal .price").html(total+",-");
|
||||
|
||||
// SHOW if-empty MESSAGE
|
||||
if(this.selector.find("li").length <= 1){
|
||||
this.selector.find(".emptyList").show();
|
||||
}
|
||||
|
||||
// BIND REMOVES
|
||||
$(this.selector).find(".remItem").unbind().each((key, val) => {
|
||||
let that = this;
|
||||
$(val).click(function(){ that.remItem(key); });
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
var stores = [];
|
||||
|
||||
$("#addStore").click(ev => {
|
||||
stores.push(new Store());
|
||||
});
|
||||
|
||||
// ADD STORE
|
||||
|
||||
// $(document).on('ready', function(){
|
||||
$(".store").each((_1, store) => {
|
||||
// console.log(key, value);
|
||||
let totalPrice = 0;
|
||||
$(store).find("li span.price").each((_2,item) => {
|
||||
|
||||
let priceStr = item.innerHTML;
|
||||
try {
|
||||
totalPrice += Number(priceStr.substr(0, priceStr.length-2));
|
||||
}
|
||||
catch(e){
|
||||
console.error("Failed find the number in '"+priceStr+"': "+e);
|
||||
}
|
||||
});
|
||||
$(store).find(".subtotal .price").html(totalPrice+",-");
|
||||
});
|
||||
// });
|
||||
Loading…
Reference in New Issue