API tools faq
paste
ipkarthik

employee.js

ipkarthik
May 27th, 2021
1,217
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 9.45 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3.   <title>Employee Details Form</title>
  4.   <style>
  5.   /************************************************************/
  6.   .employee-table,
  7.   .employee-table-row,
  8.   .employee-table-column{
  9.     border: 1px solid #fff;
  10.     background-color:#000;
  11.     color:#fff;
  12.   }
  13.   .employee-form{
  14.     background-color:#000;
  15.     color:#fff;
  16.     width:50%;
  17.     padding:10px;
  18.   }
  19.   .employee-form-title,
  20.   .employee-table-title{
  21.     font-weight:bold;
  22.   }
  23.   /************************************************************/
  24.   </style>
  25.   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
  26. </head>
  27. <body>
  28.   <span>
  29.     <span>
  30.       <select class="search-criteria">
  31.         <option class="search-criteria-option" value="id">ID</option>
  32.         <option class="search-criteria-option" value="firstName">First Name</option>
  33.         <option class="search-criteria-option" value="lastName">Last Name</option>
  34.       </select>
  35.     </span>
  36.     <span>
  37.       <input type="text" class="search-text" placeholder="enter search text"/>
  38.     </span>
  39.     <span>
  40.       <select class="employee-type">
  41.         <option class="employee-type-option" value="fulltime">Full Time</option>
  42.         <option class="employee-type-option" value="parttime">Part Time</option>
  43.       </select>
  44.     </span>
  45.     <span>
  46.       <select class="shift-details">
  47.         <option class="shift-details-option" value="first">First</option>
  48.         <option class="shift-details-option" value="second">Second</option>
  49.         <option class="shift-details-option" value="third">Third</option>
  50.         <option class="shift-details-option" value="fourth">Fourth</option>
  51.       </select>
  52.     </span>
  53.     <span>
  54.       <input type="button" class="search-button" value="search"/>
  55.     </span>
  56.    </span>
  57.   <br>
  58.   <label class="employee-table-title">Employee Details</label>
  59.   <table class="employee-table">
  60.     <tr class="employee-table-row">
  61.       <td class="employee-table-column">ID</td>
  62.       <td class="employee-table-column">First Name</td>
  63.       <td class="employee-table-column">Last Name</td>
  64.       <td class="employee-table-column">Employee Type</td>
  65.       <td class="employee-table-column">Shift Details</td>
  66.       <td class="employee-table-column">Additional Information</td>
  67.       <td class="employee-table-column">Actions</td>
  68.  
  69.     </tr>
  70.   </table>
  71.   <input type="button" class="refresh-button" value="refresh"/>
  72.   <br>
  73.   <form class="employee-form">
  74.     <label class="employee-form-title">Employee Details Form</label>
  75.     <br>
  76.     <input type="text" name="firstName" class="first-name" placeholder="enter first name"/>
  77.     <br>
  78.     <input type="text" name="lastName" class="last-name" placeholder="enter last name"/>
  79.     <br>
  80.     <span>
  81.       <input type="radio" name="employeeType" class="employee-type" value="fulltime"><label>full time</label>
  82.       <input type="radio" name="employeeType" class="employee-type" value="parttime"><label>part time</label>
  83.     </span>
  84.     <br>
  85.     <select name="shiftType" class="shift-type">
  86.       <option class="shift-type-option" value="first">first shift</option>  <option class="shift-type-option" value="second">second shift</option><option class="shift-type-option" value="third">third shift</option>  <option class="shift-type-option" value="fourth">fourth shift</option><option class="shift-type-option" value="fifth">fifth shift</option>
  87.     </select>
  88.     <br>
  89.     <textarea placeholder="enter additional info" name="information" rows="2"></textarea>
  90.     <br>
  91.     <input type="button" value="add" class="add-button">
  92.   </form>
  93.   <script>
  94.      /************************************************************/
  95.    let employeeTable=document.getElementsByClassName("employee-table")[0];
  96.    /************************************************************/
  97.    /*  fetch("").then(function(data){
  98.  }).then(function(data){
  99.  }).catch(function(error){
  100.  }); */
  101.  let data=[{
  102.     "id":506,
  103.   "firstName":"emp",
  104.   "lastName":"one",
  105.   "employeeType":"fulltime",
  106.   "shiftType":"first",
  107.   "information":"emp one fulltime first"
  108.  },{
  109.   "id":410,
  110.   "firstName":"emp",
  111.   "lastName":"two",
  112.   "employeeType":"parttime",
  113.   "shiftType":"second",
  114.   "information":"emp two parttime second"
  115.  },{
  116.   "id":678,
  117.   "firstName":"emp",
  118.   "lastName":"three",
  119.   "employeeType":"fulltime",
  120.   "shiftType":"third",
  121.   "information":"emp three fulltime third"
  122.  }];
  123.   /************************************************************/
  124.     let add_button=document.getElementsByClassName("add-button")[0];
  125.     add_button.addEventListener("click", function(){
  126.       let firstName=document.getElementsByName("firstName")[0].value;
  127.       let lastName=document.getElementsByName("lastName")[0].value;
  128.       let employeeType;
  129.       let employeeTypes=document.getElementsByName("employeeType");
  130.       for(let i=0;i<employeeTypes.length;i++){
  131.         if(employeeTypes[i].checked==true){
  132.           employeeType=employeeTypes[i].value;
  133.         }
  134.       };
  135.       let shiftType=document.getElementsByName("shiftType")[0].value;
  136.       let info=document.getElementsByName("information")[0].value;
  137.       let employee={};
  138.       employee["id"]=parseInt(Math.random()*1000);
  139.       employee["firstName"]=firstName;
  140.       employee["lastName"]=lastName;
  141.       employee["employeeType"]=employeeType;
  142.       employee["shiftType"]=shiftType;
  143.       employee["information"]=info;
  144.       console.log(employee);
  145.       fetch("https://ena9dcthp7aw7pv.m.pipedream.net", {
  146.         method: 'POST',
  147.         mode: 'cors',
  148.         cache: 'no-cache',
  149.         credentials: 'same-origin',
  150.         headers: {
  151.           'Content-Type': 'application/json'
  152.         },
  153.         redirect: 'follow',
  154.         referrerPolicy: 'no-referrer',
  155.         body: JSON.stringify(employee)
  156.         }).then(function(){
  157.         data.push(employee);
  158.         employeeTable.innerHTML=employeeTable.rows[0].innerHTML;
  159.             init();
  160.       })
  161.     });
  162.  /************************************************************/
  163.  let handleDelete=function(){
  164.     let rowIndex=event.target.parentNode.parentNode.parentNode.parentNode.rowIndex;
  165.     event.target.parentNode.parentNode.parentNode.parentNode.remove();
  166.   data.splice(rowIndex-1,1);
  167.  }
  168.   /************************************************************/
  169.     let handleEdit=function(){
  170.     let rowIndex=event.target.parentNode.parentNode.parentNode.parentNode.rowIndex;
  171.     let editEmployee=data.slice(rowIndex-1,rowIndex)[0];
  172.     let employee_form=document.getElementsByClassName("employee-form")[0];
  173.     console.log(editEmployee);
  174.   for(let el of employee_form.childNodes){
  175.      if(el.name&&editEmployee[el.name]){
  176.     if((el.type=="radio")&&(el.value==editEmployee[el.name])){
  177.         el.checked="true";
  178.     }
  179.     el.value=editEmployee[el.name];
  180.    }
  181.   }  
  182.  }
  183.  /************************************************************/
  184.  let search_button=document.getElementsByClassName("search-button")[0];
  185.  search_button.onclick=function(){
  186.     let search_criteria=document.getElementsByClassName("search-criteria")[0].value;
  187.   let search_txt=document.getElementsByClassName("search-text")[0].value.toString();
  188.   let shift_type=document.getElementsByClassName("shift-details")[0].value;
  189.   let employee_type=document.getElementsByClassName("employee-type")[0].value;
  190.   console.log(search_criteria, search_txt, shift_type, employee_type);
  191.     let filtered_contacts=[];
  192.   for(let employee of data){
  193.       console.log(employee[search_criteria], employee["shiftType"], employee["employeeType"]);
  194.     if((employee["shiftType"]==shift_type)&&(employee["employeeType"]==employee_type)&&(employee[search_criteria]==search_txt)){
  195.         filtered_contacts.push(employee);
  196.     }
  197.   }
  198.   data=filtered_contacts;
  199.   console.log(data);
  200.   employeeTable.innerHTML=employeeTable.rows[0].innerHTML;
  201.   init();
  202.  }
  203.   /************************************************************/
  204. let init=function(){
  205.      for(let employee of data){
  206.     let employeeRow=document.createElement("tr");
  207.     employeeRow.classList.add("employee-table-row");
  208.     for(let prop in employee){
  209.         let employeeRowColumn=document.createElement("td");
  210.       employeeRowColumn.innerText=employee[prop];
  211.       employeeRowColumn.classList.add("employee-table-column");
  212.       employeeRow.append(employeeRowColumn);
  213.     }
  214.      let actionsElem=document.createElement("td");
  215.  actionsElem.classList.add("employee-table-column");
  216.  actionsElem.innerHTML=`<span><span onclick="handleEdit()"><i class="bi bi-pencil-square"></i></span><span onclick="handleDelete()"><i class="bi bi-trash"></i>
  217. </span></span>`;
  218.     employeeRow.append(actionsElem);
  219.     employeeTable.append(employeeRow);
  220.   }
  221. }
  222. init();
  223.   /************************************************************/
  224.   let refresh_button=document.getElementsByClassName("refresh-button")[0];
  225.   refresh_button.addEventListener("click", function(){
  226.      data=[{
  227.     "id":506,
  228.   "firstName":"emp",
  229.   "lastName":"one",
  230.   "employeeType":"fulltime",
  231.   "shiftType":"first",
  232.   "information":"emp one fulltime first"
  233.  },{
  234.   "id":410,
  235.   "firstName":"emp",
  236.   "lastName":"two",
  237.   "employeeType":"parttime",
  238.   "shiftType":"second",
  239.   "information":"emp two parttime second"
  240.  },{
  241.   "id":678,
  242.   "firstName":"emp",
  243.   "lastName":"three",
  244.   "employeeType":"fulltime",
  245.   "shiftType":"third",
  246.   "information":"emp three fulltime third"
  247.  }];;
  248.     console.log(data);
  249.     employeeTable.innerHTML=employeeTable.rows[0].innerHTML;
  250.     init();
  251.   });
  252.   /************************************************************/
  253.   </script>
  254. </body>
  255. </html>
  256.  
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!