Untitled
unknown
plain_text
a year ago
18 kB
2
Indexable
Never
<!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">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<script src="https://unpkg.com/localbase@0.7.5/dist/localbase.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<title>Tickets</title>
</head>
<body>
<script>
</script>
<style>
#divNovaTarefa.show{
transition: "all 1s";
opacity: 1;
display: "";
}
#divNovaTarefa.hidden{
transition: "all 1s";
opacity: 0;
display: none;
}
</style>
<div class="container" style="margin-top: 10px;">
<h1>Tickets</h1>
<br>
<button id="novaTarefa" class="btn btn-success btn-sm">New Ticket <span id="mais">+</span><span id="menos" style="display: none;">-</span></button><br><br>
<div id="vai">
<span id="hora"></span>
</div>
<div id="divNovaTarefa" class="hidden">
<h3>Insert</h3>
<div class="">
<div class="row">
<div class="">Short Description:</div>
<div class="form-floating">
<textarea class="form-control" placeholder="Ticket area..." id="description"></textarea>
</div>
<!-- <input type="text" class="form-control" name="texto3" id="texto3"> -->
<div class="">Comments: </div><div class=""><input type="text" class="form-control" name="comments" id="comments"></div><br><br>
<!-- <div class="">Status: </div><div class=""><input type="text" class="form-control" name="status" id="status"></div> -->
<div class="col col-1">Priority:</div> <div class="col col-2"><select name="priority" id="priority" class="form-control">
<option value="low">low</option>
<option value="medium">medium</option>
<option value="high">high</option>
</select></div>
<div class="col col-1">Caller:</div>
<div class="col col-2"><input type="text" class="form-control" name="caller" id="caller"></div>
<div class="col col-1">Status:</div> <div class="col col-2"><select name="status" id="status" class="form-control">
<option value="opened">Opened</option>
<option value="closed">Closed</option>
<!-- <option value="high">high</option> -->
</select></div>
<br>
<div class="col col-1">Creation Date:</div>
<div class="col col-2"><input type="date" class="form-control" name="creationDate" id="creationDate" pattern="[0-9]{2}-[0-9]{2}-[0-9{4}"></div>
<div class="col col-1">Closed Date:</div>
<div class="col col-2"><input type="date" class="form-control" name="closedDate" id="closedDate"></div>
<div class="row">
<div class="col col-1">Time: </div><div class="col col-2"><input type="text" class="form-control" name="time" id="time"></div>
<div class="col col-1">Technician: </div><div class="col col-2"><input type="text" class="form-control" name="technician" id="technician"></div>
</div>
<br><br>
<div class=""><button id="add" class="btn btn-success btn-sm">adicionar</button></div>
</div>
</div>
</div>
<hr>
<div>
<h3>Scheduled</h3> search: <input type="text" id="pesquisa"><br><br>
<table id="tbtarefas" class="table table-sm table-striped">
</table>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Update ticket data</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label for="recipient-name" class="col-form-label">Nº:</label>
<input type="text" class="form-control" id="numero">
</div>
<div class="mb-3">
<label for="message-text" class="col-form-label">Priority:</label>
<select name="priority" id="prioridade" class="form-control">
<option value="low">low</option>
<option value="medium">medium</option>
<option value="high">high</option>
</select>
</div>
<div class="mb-3">
<label for="recipient-name" class="col-form-label">Caller:</label>
<input type="text" class="form-control" id="solicitante">
</div>
<div class="mb-3">
<label for="message-text" class="col-form-label">Short Description:</label>
<textarea class="form-control" id="descricao"></textarea>
</div>
<div class="mb-3">
<label for="recipient-name" class="col-form-label">Comments:</label>
<textarea class="form-control" id="comentarios"></textarea>
</div>
<div class="mb-3">
<label for="message-text" class="col-form-label">Status:</label>
<select name="stts" id="stts" class="form-control">
<option value="opened">Opened</option>
<option value="holdin">Holding</option>
<option value="closed">Closed</option>
</select>
</div>
<div class="mb-3">
<label for="recipient-name" class="col-form-label">Creation Date:</label>
<input type="date" class="form-control" id="dataCriacao">
</div>
<div class="mb-3">
<label for="message-text" class="col-form-label">Closed Date:</label>
<input type="date" class="form-control datepicker" id="dataFim">
</div>
<div class="mb-3">
<label for="recipient-name" class="col-form-label">Time:</label>
<input type="text" class="form-control" id="tempo">
</div>
<div class="mb-3">
<label for="message-text" class="col-form-label">Technician:</label>
<input class="form-control" id="tecnico">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Update</button>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
let db = new Localbase("db");
findAll();
if(document.querySelector("body").clientWidth < 500){
document.querySelectorAll(".row").forEach(ele => {
ele.classList.remove("row");
ele.querySelectorAll(".col").forEach(el => {
el.classList.remove("col");
});
});
};
let exibir = false;
document.querySelector("#novaTarefa").addEventListener("click", function(){
if(exibir == false){
exibir = true;
document.querySelector("#divNovaTarefa").classList.remove("hidden");
document.querySelector("#divNovaTarefa").classList.add("show");
document.querySelector("#mais").style.display = "none";
document.querySelector("#menos").style.display = "";
}else{
exibir = false;
document.querySelector("#divNovaTarefa").classList.remove("show");
document.querySelector("#divNovaTarefa").classList.add("hidden");
document.querySelector("#mais").style.display = "";
document.querySelector("#menos").style.display = "none";
}
});
document.querySelector("#add").addEventListener("click", function () {
let campo1 = document.querySelector("#priority").value;
let campo2 = document.querySelector("#caller").value;
let campo3 = document.querySelector("#description").value;
let campo9 = document.querySelector("#comments").value;
let campo4 = document.querySelector("#status").value;
let campo5 = document.querySelector("#creationDate").value;
let campo6 = document.querySelector("#closedDate").value;
let campo7 = document.querySelector("#time").value;
let campo8 = document.querySelector("#technician").value;
if(((campo1 == null) || (campo1 == 'undefined') || (campo1 == ""))
|| ((campo2 == null) || (campo2 == 'undefined') || (campo2 == ""))
|| ((campo3 == null) || (campo3 == 'undefined') || (campo3 == ""))
|| ((campo4 == null) || (campo4 == 'undefined') || (campo4 == ""))
|| ((campo4 == null) || (campo4 == 'undefined') || (campo4 == ""))
|| ((campo5 == null) || (campo5 == 'undefined') || (campo5 == ""))){
alert("Corrigir campos vazios!!");
}else{
db.collection("teste").add({
"unique_key" : (Math.floor(Math.random() * (1000 - 1 + 1)) + 1) * (Math.floor(Math.random() * (1000 - 1 + 1)) + 1),
"priority": campo1,
"caller": campo2,
"description": campo3,
"comments": campo9,
"status": campo4,
"creationDate": campo5,
"closedDate": campo6,
"time": campo7,
"technician": campo8
});
findAll();
}
});
document.querySelector("#pesquisa").addEventListener("keyup", function () {
let texto = document.querySelector("#pesquisa").value;
document.querySelectorAll("#tbtarefas tbody tr").forEach(ele => {
if (!ele.textContent.toLowerCase().includes(texto.toLowerCase())) {
ele.style.display = "none";
} else {
ele.style.display = "";
}
});
})
function findAll(){
setTimeout(() => {
db.collection("teste").get().then(dados => {
console.log(dados);
// let addlinha = `<tr><td>${campo1}</td><td>${campo2}</td><td>${campo3}</td><td>${campo4}</td><td><button class="btn btn-danger btn-sm"> X </button></td></tr>`;
// let addlinha = `<thead><tr><th>Nº</th><th>User</th><th>Date</th><th>Ticket</th><th>Priority</th><th>Tecnican</th><th>Del</th></tr></thead>`;
let addlinha = `<thead><tr><th>Nº</th><th>Priority</th><th>Caller</th><th>Short Description</th><th>Comments</th><th>Status</th><th>Creation Date</th><th>Closed Date</th><th>Time</th><th>Technician</th><th>Update</th><th>Delete</th></tr></thead>`;
dados.forEach(e=>{
console.log(e);
// addlinha += `<tr><td>${e.campo1}</td><td>${e.campo2}</td><td>${e.campo3}</td><td>${e.campo4}</td><td>${e.campo5}</td><td><button class="btn btn-danger btn-sm"> X </button></td></tr>`;
addlinha += `<tr><td>${e.unique_key}</td><td>${e.priority}</td><td>${e.caller}</td><td>${e.description}</td><td>${e.comments}</td><td>${e.status}</td><td>${e.creationDate}</td><td>${e.closedDate}</td><td>${e.time}</td><td>${e.technician}</td>
<td><button class="btn btn-sm btn-warning" data-bs-target="#exampleModal" data-bs-toggle="modal"><i class="bi bi-recycle"></i></button></td>
<td><button class="btn btn-danger btn-sm"><i class="bi bi-trash"></i></button></td></tr>`;
});
let trs = "";
trs += addlinha;
let tbtarefas = document.querySelector("#tbtarefas");
tbtarefas.innerHTML = "";
tbtarefas.innerHTML = trs;
document.querySelectorAll("#tbtarefas button.btn-danger").forEach(ele => {
ele.addEventListener("click", function () {
let del = (ele.closest("tr").querySelector("td:nth-child(1)").textContent);
db.collection("teste").doc({"unique_key" : parseInt(del,10)}).delete();
ele.closest("tr").remove();
});
});
document.querySelector(".btn-warning").addEventListener("click", function(){
alert();
let campo1 = this.closest("tr").querySelectorAll("td")[0].textContent;
let campo2 = this.closest("tr").querySelectorAll("td")[1].textContent;
let campo3 = this.closest("tr").querySelectorAll("td")[2].textContent;
let campo9 = this.closest("tr").querySelectorAll("td")[3].textContent;
let campo4 = this.closest("tr").querySelectorAll("td")[4].textContent;
let campo5 = this.closest("tr").querySelectorAll("td")[5].textContent;
let campo6 = this.closest("tr").querySelectorAll("td")[6].textContent;
let campo7 = this.closest("tr").querySelectorAll("td")[7].textContent;
let campo8 = this.closest("tr").querySelectorAll("td")[8].textContent;
let campo10 = this.closest("tr").querySelectorAll("td")[9].textContent;
$("#numero").val(campo1);
$("#prioridade").val(campo2);
$("#solicitante").val(campo3);
$("#descricao").val(campo9);
$("#comentarios").val(campo4);
$("#stts").val(campo5);
$("#dataCriacao").val(campo6);
$("#dataFim").val(campo7);
$("#tempo").val(campo8);
$("#tecnico").val(campo10);
// Exemplo de uso da função de atualização
const novoValor = {
priority: $("#prioridade").val(),
caller: $("#solicitante").val(),
description: $("#descricao").val(),
comments: $("#comentarios").val(),
status: $("#stts").val(),
creationDate: $("#dataCriacao").val(),
closedDate: $("#dataFim").val(),
time: $("#tempo").val(),
technician: $("#tecnico").val(),
};
const uniqueKeyParaAtualizar = parseInt($("#numero").val(),10); // Substitua pelo valor da unique_key do registro que deseja atualizar
// Chame a função de atualização
atualizarRegistro(uniqueKeyParaAtualizar, novoValor);
});
});
}, 500);
}
function atualizarRegistro(uniqueKey, novoValor) {
// Verifique se a coleção existe
db.collection("teste").get().then((documentos) => {
documentos.forEach((documento) => {
if (documento.unique_key === uniqueKey) {
// Atualize o registro com o novo valor
db.collection("teste").doc({"unique_key": parseInt(uniqueKey, 10)}).update(novoValor).then(() => {
alert("The line was updated!");
}).catch((error) => {
console.error("An error occurred while updating:", error);
});
}
});
});
}
setInterval(() => {
let data = new Date();
let hr = data.getHours() < 10 ? "0" + data.getHours() : data.getHours();
let min = data.getMinutes() < 10 ? "0" + data.getMinutes() : data.getMinutes();
let sec = data.getSeconds() < 10 ? "0" + data.getSeconds() : data.getSeconds();
// document.querySelector("#vai").style.position = "fixed";
// document.querySelector("#vai").style.bottom = "10px";
// document.querySelector("#vai").style.width = "100%";
// // document.querySelector("#hora").style.width = "100px";
// // document.querySelector("#hora").style.backgroundColor = "#000"+ Math.floor(Math.random() * 1000);
// document.querySelector("#hora").style.backgroundColor = "green";
// document.querySelector("#hora").style.color = "white";
document.querySelector("#hora").textContent = `${hr}:${min}:${sec}`;
}, 500);
</script>