Untitled

//kargolist.js



const taskForm = document.querySelector("#taskForm");
const c = document.querySelector("#client");
const adres = document.querySelector("#adres");
const Liste = document.querySelector("#Liste");
//var input=document.getElementById("adres");
//var autocomplete=new google.maps.places.AutoComplete(input,options);
const {ipcRenderer} = require('electron')
let lists = [];
ipcRenderer.invoke('get-list').then(()=> console.log('')).catch((err)=> console.error('Error'));
ipcRenderer.on("send-list", (e, args) => {
    const receivedLists= JSON.parse(args);
    lists= receivedLists;
    renderList(lists);
  });
ipcRenderer.invoke('cl').then(()=> console.log('cl')).catch((err)=> console.error('Error'));
ipcRenderer.on("get-tasks", (e, args) => {
   const tasks = JSON.parse(args);
for(var i = 0; i < tasks.length; i++) {
    var opt = tasks[i];
    var el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
   c.appendChild(el);
}});
function deleteK(id) {
    const response = confirm("are you sure you want to delete it?");
    if (response) {
      ipcRenderer.invoke('delete-kargo',id).then(()=> console.log('cl')).catch((err)=> console.error('Error'));
    }
    return;
  }
  let idToUpdate = "";
  let updateStatus = false;

  function edit(id) {
    updateStatus = true;
    idToUpdate =id;
    const k = lists.find(k => k._id === id);
   c.value = k.clientName;
   adres.value =k.address;
   adres.focus()
  }
function renderList(lists) {
    Liste.innerHTML = "";
    console.log(lists);
    lists.map(t => {
      Liste.innerHTML += `
            <li class="card">
            <style display:inline-block>
table, th, td {
  border:1px solid black;
  border-collapse: collapse;
}
</style>
            <div>
            <table style="width:70%">
            <tr>
              <th>KargoId</th>
              <th>MüşteriAdı</th> 
              <th>Adres</th>
            </tr>
            <tr>
    <td>${t._id}</td>
    <td>${t.clientName}</td>
    <td>${t.address}</td>
  <td>  <button onclick="edit('${t._id}')" />  ✎ Edit</td>
  <td>  <button onclick="deleteK('${t._id}')" /> 🗑 Delete</td>
  </tr>
          
          </table> </div>
              
             
            </li>
          `;
    });
  }
  
 
  
taskForm.addEventListener("submit", async e => {
    e.preventDefault();
  
    const list = {
        
      clientName: c.value,
      address: adres.value
    };
    if (!updateStatus) {
        ipcRenderer.invoke('new-kargo', list).then(()=> console.log('new kargo')).catch((err)=> console.error('Error'));
      } else {
       ipcRenderer.invoke("update-kargo", { ...list, idToUpdate }).then(()=> console.log('update kargo')).catch((err)=> console.error('Error'));;
       
      
      }
  taskForm.reset()
      renderList(lists);

     
    });
    renderList(lists)
  
  ipcRenderer.on("new-kargo-created", (e, arg) => {
    console.log(arg);
    const taskSaved = JSON.parse(arg);
    lists.push(taskSaved);
    
    renderList(lists);
    
    
  });
 
  ipcRenderer.on("update-kargo-success", (e, args) => {
    updateStatus = false;
    
    const updatedkargo = JSON.parse(args);
lists = lists.map((t, i) => {
       
      if (t._id === updatedkargo._id) {
      
        t.clientName = updatedkargo.clientName;
        t.address = updatedkargo.address
    }
    return t;
  });
  renderList(lists);
});

ipcRenderer.on("delete-kargo-success", (e, args) => {
    const deletedKargo = JSON.parse(args);
    const newLists = lists.filter(t => {
      return t._id !== deletedKargo._id;
    });
   lists = newLists;
    renderList(lists);
  });
 

 //kargolist.html

<!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">
    <link rel="stylesheet" href="ui/list.css" />
    <title>List</title>
</head>
<body>
    <h2>Kargo Yönetim Sistemi</h2>
    
    <form id="taskForm" class="card">
        
      <label >Müşteri : </label><br>
      <select name="client" id="client" >
        <option >    </option>  
       
    </select>
    <a href="client.html">Add New Client</a>
    <br><br>
 
      <label>Adres :</label><br>
      <input id="adres" rows="3" id="adres : " autofocus ><button id='map'>Haritadan Ekle
    </button><br><br>
      
      <button type="submit" id="s" >Kargo Ekle
        </button>
    </form>
  
    <div>
      <ol id="Liste"></ol>
     
    
   
    </div>
    
  
    <script src="kargolist.js"></script>   
</body>
</html>
Editor is loading...