adoralaura/shopping-list
1
0
Fork 0
mirror of https://github.com/tim-krehan/shopping-list.git synced 2024-11-23 22:30:41 +01:00
Code Issues Projects Releases Packages Wiki Activity

edit list entry

Browse source
This commit is contained in:
Tim Krehan 2019-05-28 12:04:14 +02:00
parent b6b4358157
commit 467960037f
3 changed files with 24 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
cont/list.php
View file

@ -16,32 +16,28 @@
$div_item_quantity_classes = "p-1 col-3"; $div_item_quantity_classes = "p-1 col-3";
$div_item_name_classes = "p-1 font-weight-bold"; $div_item_name_classes = "p-1 font-weight-bold";
$div_item_menu = "ml-auto mr-2"; $div_item_menu = "ml-auto mr-2";
$button_dropdown_classes = "dropdown-menu-button btn pt-0 pb-0"; $button_dropdown_classes = "dropdown-menu-button btn text-light pt-0 pb-0";
foreach ($shopping->list as $index => $item) { foreach ($shopping->list as $index => $item) {
if ($index % 2 == 0) { if ($index % 2 == 0) {
$color_theme = "bg-primary"; $color_theme = "bg-primary";
$button_theme = "btn-primary";
} else { } else {
$color_theme = "bg-secondary"; $color_theme = "bg-secondary";
$button_theme = "btn-secondary";
} }
if ($item->Erledigt) { if ($item->Erledigt) {
$div_item_row_color_classes = "bg-success"; $div_item_row_color_classes = "bg-success";
$button_dropdown_color_classes = "btn-success";
$checked = "checked"; $checked = "checked";
} else { } else {
$div_item_row_color_classes = $color_theme; $div_item_row_color_classes = $color_theme;
$button_dropdown_color_classes = $button_theme;
$checked = ""; $checked = "";
} }
print_r("<div class='list-row $div_item_row_classes $div_item_row_color_classes'>"); print_r("<div class='list-row $div_item_row_classes $div_item_row_color_classes'>");
print_r("<div class='$div_item_checkbox_classes'><input type='checkbox' class='$input_item_checkbox_classes' data-buttoncolor='$button_theme' data-color='$color_theme' data-id='$item->ID' $checked></div>"); print_r("<div class='$div_item_checkbox_classes'><input type='checkbox' class='$input_item_checkbox_classes' data-color='$color_theme' data-id='$item->ID' $checked></div>");
print_r("<div class='list-row-amount $div_item_quantity_classes' data-amount='$item->Anzahl' data-unit='$item->Einheit'>$item->Anzahl $item->Einheit</div>"); print_r("<div class='list-row-amount $div_item_quantity_classes' data-amount='$item->Anzahl' data-unit='$item->Einheit'>$item->Anzahl $item->Einheit</div>");
print_r("<div class='list-row-name $div_item_name_classes'>$item->Name</div>"); print_r("<div class='list-row-name $div_item_name_classes'>$item->Name</div>");
print_r("<div class='$div_item_menu dropdown'>"); print_r("<div class='$div_item_menu dropdown'>");
print_r("<button type='button' class='$button_dropdown_classes $button_dropdown_color_classes' id='dropdown-menu-button-dataID-" . $item->ID . "' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>"); print_r("<button type='button' class='$button_dropdown_classes' id='dropdown-menu-button-dataID-" . $item->ID . "' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>");
print_r("<i class='fas fa-angle-down'></i>"); print_r("<i class='fas fa-angle-down'></i>");
print_r("</button>"); print_r("</button>");
print_r("<div class='dropdown-menu dropdown-menu-right' aria-labelledby='dropdown-menu-button-dataID-" . $item->ID . "'>"); print_r("<div class='dropdown-menu dropdown-menu-right' aria-labelledby='dropdown-menu-button-dataID-" . $item->ID . "'>");
@ -55,7 +51,7 @@
<div class="input-group mb-3 mt-3" data-id='new'> <div class="input-group mb-3 mt-3" data-id='new'>
<div class="input-group-prepend col-3 p-0"> <div class="input-group-prepend col-3 p-0">
<input type='number' name='anzahl' value='1' class='form-control w-50 mr-1'> <input type='number' name='anzahl' value='1' step=".25" class='form-control w-50 mr-1'>
<select class="form-control w-50 mr-1" name="einheit"> <select class="form-control w-50 mr-1" name="einheit">
<?php <?php
foreach ($units->list as $index => $unit) { foreach ($units->list as $index => $unit) {

24
js/list.js
View file

@ -54,10 +54,25 @@ function editItem(){
var amount = row.find(".list-row-amount").data("amount"); var amount = row.find(".list-row-amount").data("amount");
var unit = row.find(".list-row-amount").data("unit"); var unit = row.find(".list-row-amount").data("unit");
var name = row.find(".list-row-name").html(); var name = row.find(".list-row-name").html();
row.find(".list-row-amount").html(""); row.find(".list-row-amount").html("");
row.find(".list-row-amount").addClass("d-flex", "flex-row");
var options = $("[data-id='new']").find("select").html();
row.find(".list-row-amount").append(
'<input type="number" class="form-control w-50 mr-1" step=".25" value="' + amount +'" required>'
).append(
'<select class="form-control w-50 mr-1">'+options+'</select>'
);
row.find(".list-row-amount").find("option:selected").attr("selected", false);
row.find(".list-row-amount").find("option:contains('"+unit+"')").attr("selected", true);
row.find(".list-row-name").html(""); row.find(".list-row-name").html("");
row.find(".list-row-amount").append(""); row.find(".list-row-name").addClass("w-100");
row.find(".list-row-name").append('<input type="text" class="form-control" autocomplete="off" value="'+name+'" required>'); row.find(".list-row-name").append('<input type="text" class="form-control ml-auto" autocomplete="off" value="'+name+'" required>');
row.find(".dropdown").html("");
row.find(".dropdown").addClass("d-flex", "flex-row");
row.find(".dropdown").html("<i class='fas fa-check p-1'></i><i class='fas fa-times p-1'></i>");
} }
function checkItem() { function checkItem() {
@ -72,21 +87,16 @@ function checkItem() {
success: function () { success: function () {
var dataIdSelector = (`[data-id='${dataId}']`); var dataIdSelector = (`[data-id='${dataId}']`);
var color = $(dataIdSelector).data("color"); var color = $(dataIdSelector).data("color");
var buttoncolor = $(dataIdSelector).data("buttoncolor");
$(dataIdSelector).parent().parent().removeClass("bg-danger"); $(dataIdSelector).parent().parent().removeClass("bg-danger");
$(dataIdSelector).parent().parent().find(".dropdown-menu-button").removeClass("btn-danger"); $(dataIdSelector).parent().parent().find(".dropdown-menu-button").removeClass("btn-danger");
if($(dataIdSelector).prop("checked")){ if($(dataIdSelector).prop("checked")){
$(dataIdSelector).parent().parent().removeClass(color); $(dataIdSelector).parent().parent().removeClass(color);
$(dataIdSelector).parent().parent().addClass("bg-success"); $(dataIdSelector).parent().parent().addClass("bg-success");
$(dataIdSelector).parent().parent().find(".dropdown-menu-button").removeClass(buttoncolor);
$(dataIdSelector).parent().parent().find(".dropdown-menu-button").addClass("btn-success");
} }
else{ else{
$(dataIdSelector).parent().parent().removeClass("bg-success"); $(dataIdSelector).parent().parent().removeClass("bg-success");
$(dataIdSelector).parent().parent().addClass(color); $(dataIdSelector).parent().parent().addClass(color);
$(dataIdSelector).parent().parent().find(".dropdown-menu-button").addClass(buttoncolor);
$(dataIdSelector).parent().parent().find(".dropdown-menu-button").removeClass("btn-success");
} }
}, },
error: function () { error: function () {

3
style/helper.css
View file

@ -10,6 +10,9 @@
.dropdown-menu-button { .dropdown-menu-button {
transition: .5s; transition: .5s;
background-color: transparent;
border-color: transparent;
box-shadow: none;
} }
.nav-link-font { .nav-link-font {