Your IP : 18.118.154.25
<style>
.tituly {
/* min-height: 800px;
max-height: 820px; */
max-width: 550px;
}
#titul:invalid {
border: 2px solid red;
background-color: rgba(255, 0, 0, 0.1)
}
</style>
<div class="card tituly rounded-0">
<div class="card-header alert-info p-2 h5 rounded-0">Tituly</div>
<div class="card-body">
<div id="btnNovyTitul" class="row">
<div class="col-2 text-left"><button class="btn btn-outline-info rounded-0" onclick="zobrazFiltrTitul(true)"><i
class="fas fa-filter"></i></button></div>
<div class="col-4 text-left">
<select class="custom-select border-info text-info rounded-0" id="selSort">
<option value="1" selected>Podle titulu</option>
<option value="2">Podle autora</option>
</select>
<!--button class="btn btn-outline-info" onclick="pretriditTituly()"><i class="fas fa-sort-alpha-down"></i>
</button-->
</div>
<div class="col-6 text-right">
<button class="btn btn-outline-info rounded-0" onclick="zobrazNovyTitul(true)">Nový titul</button>
</div>
</div>
<div id="novyTitul" class="py-2 d-none">
<div class="form-group row">
<label for="text" class="col-3 col-form-label">Nový titul</label>
<div class="col-9">
<input id="titul" name="titul" placeholder="název titulu" type="text" class="form-control rounded-0" required>
</div>
</div>
<div class="form-group row">
<label for="selectAutor" class="col-3 col-form-label">Autor</label>
<div class="col-9">
<select id="selectAutor" name="selectAutor" class="custom-select rounded-0" required title="vyber autora...">
<?php include "tituly-select-autori-napln.php"?>
</select>
</div>
</div>
<div class="form-group row ">
<div class="col-3">
<div class="custom-control custom-checkbox">
<input name="cbDalsiNovyTitul" id="cbDalsiNovyTitul" type="checkbox"
class="custom-control-input rounded-0" value="" checked="checked">
<label for="cbDalsiNovyTitul" class="custom-control-label">další nový</label>
</div>
</div>
<div class="col-3">
<div class="custom-control custom-checkbox">
<input name="cbPonechatAutoraTitul" id="cbPonechatAutoraTitul" type="checkbox"
class="custom-control-input" value="">
<label for="cbPonechatAutoraTitul" class="custom-control-label">ponechat autora</label>
</div>
</div>
<div class="col-3 text-right">
<button name="cancelTitul" class="btn btn-outline-warning rounded-0"
onclick="zobrazNovyTitul(false)">Storno</button>
</div>
<div class="col-3 text-right">
<button name="ulozTitul" class="btn btn-primary rounded-0" onclick="novyTitul()">Uložit</button>
</div>
</div>
</div>
<div id="filtrDlgTituly" class="py-1 d-none">
<div class="form-group row">
<div class="col-4">
<input id="textFiltrTitul" name="textFiltrTitul" placeholder="titul..." type="text"
class="form-control rounded-0">
</div>
<div class="col-5 pl-0">
<select id="selectAutorFiltr" name="selectAutor" class="custom-select rounded-0" required
title="vyber autora...">
<?php include "tituly-select-autori-napln.php"?>
</select>
</div>
<div class="col-1 text-right px-0">
<button name="btnFiltrTitul" id="btnFiltrTitul" class="btn btn-primary rounded-0"
onclick="titulyFiltruj()">Filtr</button>
</div>
<div class="col-2 pr-1 text-right">
<button name="btnFiltrTitulStorno" id="btnFiltrTitulStorno" class="btn btn-outline-primary rounded-0"
onclick="zobrazFiltrTitul(false)">Zrušit</button>
</div>
</div>
</div>
<div id="seznamTituly">
<?php
include("tituly-seznam.php")
?>
</div>
</div> <!-- card-body -->
</div> <!-- card -->
<script>
tituly = [];
naplnTituly();
$("#selSort").on("change", function () {
let trideni = $("#selSort").children("option:selected").val();
// setridim
if (trideni == '1') {
tituly.sort((a, b) => (a['titul'] == b['titul']) ? a['autor'].localeCompare(b['autor'], 'cs') : a[
'titul'].localeCompare(b['titul'], 'cs'));
} else {
tituly.sort((a, b) => (a['autor'] == b['autor']) ? a['titul'].localeCompare(b['titul'], 'cs') : a[
'autor'].localeCompare(b['autor'], 'cs'));
}
// vygeneruji HTML
let newHTML = `<table class="table table-sm " >`;
for (obj of tituly) {
newHTML += `
<tr id="radekTituly${obj.id}">`;
if (trideni == '1') {
newHTML += `
<td id="titulJm${obj.id}">${obj.titul}</td>
<td id="titulAutorJm${obj.id}">${obj.autor}</td>`;
} else {
newHTML += `
<td id="titulAutorJm${obj.id}">${obj.autor}</td>
<td id="titulJm${obj.id}">${obj.titul}</td>`;
}
newHTML += `<td id="titulEd${obj.id}" class="ikonaForm text-info" onclick="zavolejEditaciTitulu(${obj.id})"><i class="far fa-edit"></i></td>
<td id="titulDe${obj.id}" class="ikonaForm text-danger" onclick="smazTitul(${obj.id})"><i class="far fa-trash-alt"></i></td>
</tr>
<tr id="radekConfirmTituly${obj.id}">
<td colspan="4" id="delConfirmAlertTitul${obj.id}" class="d-none">
<div class="alert alert-warning rounded- round-0">
<div class="row">
<div id="confirm${obj.id}" class="col-8"></div>
<div class="col-2 text-right"><button class="btn btn-outline-primary rounded-0" onclick="stornoDeleteTitul(${obj.id})">Storno</button></div>
<div class="col-2 text-right"><button class="btn btn-danger rounded-0" onclick="confirmDeleteTitul(${obj.id})">Smaž</button></div>
</div>
</div>
</td>
</tr>
`
}
newHTML += `</table>`;
$("#titulySeznam").html(newHTML);
})
function zobrazFiltrTitul(bool) {
if (bool) {
schovejTlacitkaTituly(-1);
$("#titulySeznam").css("max-height", "480px");
} else {
$("#titulySeznam").css("max-height", "530px");
}
$('[id^="radekTituly"]').removeClass("d-none");
$("#btnNovyTitul").toggleClass("d-none");
$("#filtrDlgTituly").toggleClass("d-none");
}
function zobrazNovyTitul(bool) {
if (bool) {
schovejTlacitkaTituly(-1);
$("#titulySeznam").css("max-height", "480px");
} else {
$("#titulySeznam").css("max-height", "530px");
}
$("#btnNovyTitul").toggleClass("d-none");
$("#novyTitul").toggleClass("d-none");
if (bool) {
$("#titul").focus();
$("#titul").val("");
}
}
function novyTitul() {
let titul = $("#titul").val(),
idautor = $("#selectAutor").children(":selected").attr("id");
idautor = (typeof idautor != 'undefined') ? idautor.substr(16, 10) : "";
if (idautor > '') {
autor = $("#selectAutorFiltr"+idautor).html().trim();
} else {
autor = '';
}
titul = titul.trim();
if ((titul < ' ') || (autor < ' ')) {
$("#titul").focus();
} else {
$.ajax({
url: "knihy/tituly-uloz.php",
type: 'POST',
dataType: 'HTML',
data: {
'titul': titul,
'idautor': idautor,
'operace': 'n',
'id': 0
},
success: function (result) {
tituly.push({
'id': result,
'titul': titul,
'autor': autor,
'idautor': idautor,
'e': false,
'd': false
});
let trideni = $("#selSort").children("option:selected").val();
if (trideni == '1') {
tituly.sort((a, b) => (a['titul'] == b['titul']) ? a['autor'].localeCompare(b[
'autor'], 'cs') : a['titul'].localeCompare(b['titul'], 'cs'));
} else {
tituly.sort((a, b) => (a['autor'] == b['autor']) ? a['titul'].localeCompare(b[
'titul'], 'cs') : a['autor'].localeCompare(b['autor'], 'cs'));
}
let novyIndex = tituly.findIndex(o => o.id == result);
let vlozHTML =
` <tr id="radekTituly${result}">`;
if (trideni == '1') {
vlozHTML += `<td id="titulJm${result}">${titul}</td>
<td id="titulAutorJm${result}">${autor}</td>`;
} else {
vlozHTML += `<td id="titulAutorJm${result}">${autor}</td>
<td id="titulJm${result}">${titul}</td>`;
}
vlozHTML += `<td id="titulEd${result}" class="ikonaForm text-info" onclick="zavolejEditaciTitulu(${result})">
<i class="far fa-edit"></i></td>
<td id="titulDe${result}" class="ikonaForm text-danger" onclick="smazTitul(${result})"><i
class="far fa-trash-alt"></i></td>
</tr>
<tr id="radekConfirmTituly${result}">
<td colspan="4" id="delConfirmAlertTitul${result}" class="d-none">
<div class="alert alert-warning mb-4 rounded-0">
<div class="row">
<div id="confirm${result}" class="col-8"></div>
<div class="col-2 text-right"><button class="btn btn-outline-primary rounded-0"
onclick="stornoDeleteTitul(${result})">Storno</button></div>
<div class="col-2 text-right"><button class="btn btn-danger rounded-0"
onclick="confirmDeleteTitul(${result})">Smazat</button></div>
</div>
</div>
</td>
</tr>`;
if (novyIndex < tituly.length - 1) {
$("#radekTituly" + tituly[novyIndex + 1].id).before(vlozHTML);
} else {
$("#radekConfirmTituly" + tituly[novyIndex - 1].id).after(vlozHTML);
}
if ($("#cbDalsiNovyTitul").prop("checked")) {
$("#titul").focus();
$("#titul").val("");
if (!$("#cbPonechatAutoraTitul").prop("checked")) {
$("#selectAutor").val("");
}
} else {
zobrazNovyTitul(false);
}
}
})
}
}
//xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
function schovejTlacitkaTituly(idAkt) {
if ($("#filtrDlgTituly").hasClass("d-none")) {
if ($("#btnNovyTitul").hasClass("d-none")) {
$("#novyTitul").addClass("d-none");
$("#filtrDlgTitul").addClass("d-none");
$("#btnNovyTitul").removeClass("d-none")
}
}
let jeVEditaciIndex = tituly.findIndex(o => o.e == true),
jeVDeleteIndex = tituly.findIndex(o => o.d == true);
if (jeVEditaciIndex > -1) {
stornoEditaceTitulu(tituly[jeVEditaciIndex].id, tituly[jeVEditaciIndex].titul);
}
if (jeVDeleteIndex > -1) {
stornoDeleteTitul(tituly[jeVDeleteIndex].id);
}
}
function stornoDeleteTitul(id) {
const jeVDeleteIndex = tituly.findIndex(o => o.d == true);
tituly[jeVDeleteIndex].d = !tituly[jeVDeleteIndex].d;
$("#delConfirmAlertTitul" + id).addClass("d-none");
}
function zavolejEditaciTitulu(id) {
schovejTlacitkaTituly(id);
let titulOld = $("#titulJm" + id).text(),
titulyIndex = tituly.findIndex(o => o.id == id);
tituly[titulyIndex].e = !tituly[titulyIndex].e;
if (tituly[titulyIndex].e) {
$("#titulJm" + id).html(
`<input id="titulJmNew${id}" value="${titulOld}" placeholder=" jméno knihy" type="text" class="form-control" required>`
);
$.ajax({
url: "knihy/tituly-select-autori-napln.php",
type: 'POST',
dataType: 'HTML',
data: {
'id': tituly[titulyIndex].idautor
},
success: function (result) {
let newHTML = `<select id="selectAutorEdit" name="selectAutorEdit" class="custom-select rounded-0" required title="vyber autora...">
${result}
</select>`;
$("#titulAutorJm" + id).html(newHTML);;
}
})
$("#titulDe" + id).html(`<span class="text-warning"><i class="fas fa-undo"></i></span>`);
$("#titulEd" + id).html(`<span class="text-success"><i class="far fa-save"></i></span>`);
document.getElementById("titulDe" + id).onclick = new Function(`stornoEditaceTitulu(${id}, '${titulOld}')`);
document.getElementById("titulEd" + id).onclick = new Function(`ulozEditaciTitulu(${id}, '${titulOld}')`);
$("#titulJmNew" + id).focus();
}
}
function titulyFiltruj() {
let textFiltr = $("#textFiltrTitul").val(),
idautor = $("#selectAutorFiltr").children(":selected").attr("id"),
schovej = false;
if (idautor > '') {idautor = idautor.substr(16, 10);}
textFiltr = textFiltr.toLocaleLowerCase().trim();
if ((textFiltr > '') || (idautor > '')) {
$('[id^="radekTituly"]').removeClass("d-none");
tituly.forEach(obj => {
let a = obj.titul.toLocaleLowerCase();
schovej = ((textFiltr > '') && (a.indexOf(textFiltr) !== 0)) || ((idautor > '') && (obj.idautor != idautor));
if (schovej) {
let id = obj.id;
$("#radekTituly" + id).addClass("d-none");
}
})
}
}
function smazTitul(id) {
schovejTlacitkaTituly(id)
$("#delConfirmAlertTitul" + id).removeClass("d-none");
let titulyIndex = tituly.findIndex(o => o.id == id);
tituly[titulyIndex].d = !tituly[titulyIndex].d;
$("#confirm" + id).html('Skutečně smazat (smaže se i u knih)?<br>' + tituly[titulyIndex].titul);
}
function confirmDeleteTitul(id) {
$.ajax({
url: "knihy/tituly-delete.php",
type: 'POST',
dataType: 'HTML',
data: {
'id': id
},
success: function (result) {
const index = tituly.findIndex(o => o.id == id);
if (index > -1) {
tituly.splice(index, 1);
}
$("#radekTituly" + id).remove();
$("#radekConfirmTituly" + id).remove();
}
})
}
function ulozEditaciTitulu(id, titulOld) {
let titul = $("#titulJmNew" + id).val(),
idautor = $("#selectAutorEdit").children(":selected").attr("id"),
autor = $("#selectAutorEdit").children("option:selected").html();
jeVEditaciIndex = tituly.findIndex(o => o.e == true);
if (idautor > " ") {idautor = idautor.substr(16, 10);}
id = tituly[jeVEditaciIndex].id;
idautorOld = tituly[jeVEditaciIndex].idautor;
titul = titul.trim();
if (((titul != '') && (titul != titulOld)) || ((idautor != idautorOld) && (idautor > " "))) {
$.ajax({
url: "knihy/tituly-uloz.php",
type: 'POST',
dataType: 'HTML',
data: {
'titul': titul,
'operace': 'e',
'id': id,
'idautor': idautor
},
success: function (result) {
tituly[jeVEditaciIndex].idautor = idautor;
tituly[jeVEditaciIndex].autor = autor;
tituly[jeVEditaciIndex].titul = titul;
tituly[jeVEditaciIndex].e = false;
$("#titulJm" + id).html(titul);
$("#titulAutorJm" + id).html(tituly[jeVEditaciIndex].autor);
$("#titulDe" + id).html(
`<span class="text-danger"><i class="far fa-trash-alt"></span>`);
$("#titulEd" + id).html(`<span class="text-info"><i class="far fa-edit"></span>`);
document.getElementById("titulDe" + id).onclick = new Function(`smazTitul(${id})`);
document.getElementById("titulEd" + id).onclick = new Function(
`zavolejEditaciTitulu(${id})`);
// pretridit();
}
})
} else {
stornoEditaceTitulu(id, titulOld);
}
}
function stornoEditaceTitulu(id, titulOld) {
let jeVEditaciIndex = tituly.findIndex(o => o.e == true);
tituly[jeVEditaciIndex].e = false;
$("#titulJm" + id).html(titulOld);
$("#titulAutorJm" + id).html(tituly[jeVEditaciIndex].autor);
$("#titulDe" + id).html(`<span class="text-danger"><i class="far fa-trash-alt"></span>`);
$("#titulEd" + id).html(`<span class="text-info"><i class="far fa-edit"></span>`);
document.getElementById("titulDe" + id).onclick = new Function(`smazTitul(${id})`);
document.getElementById("titulEd" + id).onclick = new Function(`zavolejEditaciTitulu(${id})`);
}
function pretridit() {
$.ajax({
url: "knihy/tituly-seznam.php",
type: 'POST',
dataType: 'HTML',
data: {},
success: function (result) {
$('#seznamTituly').html(result);
naplnTituly();
}
})
}
/*******************************************************************************/
function naplnTituly() {
$('[id^="titulJm"]').each(function () {
let titulJmID = this.id,
id = titulJmID.substr(7, 10),
titul = $("#titulJm" + id).html();
autor = $("#titulAutorJm" + id).html(),
idautor = $("#titulAutorJm" + id).attr("id-autor");
tituly.push({
'id': id,
'titul': titul,
'autor': autor,
'idautor': idautor,
'e': false,
'd': false
});
});
}
</script>