Advertisement
asimryu

welcome.blace.php

Apr 21st, 2021
1,080
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
PHP 9.14 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Project Manager</title>
  7.     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
  8. </head>
  9. <body>
  10. <div class="container col-xl-10 col-xxl-8 px-4 py-5">
  11.   <div class="row align-items-center g-5 py-5">
  12.     <div class="col-lg-7 text-center text-lg-start">
  13.       <h1 class="display-4 fw-bold lh-1 mb-4">Project Manager</h1>
  14.       <p id="projectlist" class="col-lg-10 fs-4"></p>
  15.     </div>
  16.     <div id="loginform" class="col-10 mx-auto col-lg-5">
  17.       <form class="p-5 border rounded-3 bg-light" onsubmit="return logIn();">
  18.         <div class="form-floating mb-3">
  19.           <input type="email" class="form-control" id="login_email" placeholder="name@example.com" required>
  20.           <label for="login_email">Email address</label>
  21.         </div>
  22.         <div class="form-floating mb-3">
  23.           <input type="password" class="form-control" id="login_password" placeholder="Password" required>
  24.           <label for="login_password">Password</label>
  25.         </div>
  26.         <button class="w-50 btn btn-lg btn-primary" type="submit">Log in</button>
  27.         <a href="javascript:registUser()" class="w-40 btn btn-lg btn-secondary">Sign up</a>
  28.       </form>
  29.     </div>
  30.     <div id="signupform" class="col-10 mx-auto col-lg-5" style="display: none;">
  31.       <form class="p-5 border rounded-3 bg-light" onsubmit="return signUp();">
  32.         <div class="form-floating mb-3">
  33.           <input type="text" class="form-control" id="name" placeholder="name" required>
  34.           <label for="name">Name</label>
  35.         </div>
  36.         <div class="form-floating mb-3">
  37.           <input type="email" class="form-control" id="email" placeholder="name@example.com" required="">
  38.           <label for="email">Email address</label>
  39.         </div>
  40.         <div class="form-floating mb-3">
  41.           <input type="password" class="form-control" id="password" placeholder="Password" required>
  42.           <label for="password">Password</label>
  43.         </div>
  44.         <div class="form-floating mb-3">
  45.           <input type="password" class="form-control" id="password_confirmation" placeholder="Password" required>
  46.           <label for="password_confirmation">Password Confirm</label>
  47.         </div>
  48.         <button class="w-50 btn btn-lg btn-primary" type="submit">Sign up</button>
  49.         <a href="javascript:closeRegist()" class="w-40 btn btn-lg btn-secondary">Close</a>
  50.       </form>
  51.     </div>
  52.     <div id="projectform" class="col-10 mx-auto col-lg-5" style="display: none;">
  53.       <form class="p-5 border rounded-3 bg-light" onsubmit="return saveProject();">
  54.         <div class="form-floating mb-3">
  55.           <input type="text" class="form-control" id="project_name" placeholder="project name" required>
  56.           <label for="name">Project Name</label>
  57.         </div>
  58.         <div class="form-floating mb-3">
  59.           <input type="text" class="form-control" id="project_introduction" placeholder="project introduction" required>
  60.           <label for="name">Project Introduction</label>
  61.         </div>
  62.         <div class="form-floating mb-3">
  63.           <input type="text" class="form-control" id="project_location" placeholder="project location" required>
  64.           <label for="name">Project Location</label>
  65.         </div>
  66.         <div class="form-floating mb-3">
  67.           <input type="text" class="form-control" id="project_cost" placeholder="project cost" required>
  68.           <label for="name">Project Cost</label>
  69.         </div>
  70.         <input type="hidden" id="project_id">
  71.         <input type="hidden" id="project_method" value="POST">
  72.         <button class="w-100 btn btn-lg btn-primary" type="submit">Save Project</button>
  73.       </form>
  74.     </div>    
  75.   </div>
  76. </div>
  77. <script>
  78.     let access_token = null;
  79.     let login_email = document.querySelector('#login_email');
  80.     let login_password = document.querySelector('#login_password');
  81.     let name = document.querySelector('#name');
  82.     let email = document.querySelector('#email');
  83.     let password = document.querySelector('#password');
  84.     let password_confirmation = document.querySelector('#password_confirmation');
  85.     let loginform = document.querySelector("#loginform");
  86.     let signupform = document.querySelector("#signupform");
  87.     let projectform = document.querySelector("#projectform");
  88.     let project_name = document.querySelector("#project_name");
  89.     let project_introduction = document.querySelector("#project_introduction");
  90.     let project_location = document.querySelector("#project_location");
  91.     let project_cost = document.querySelector("#project_cost");
  92.     let projectlist = document.querySelector("#projectlist");
  93.     let project_id = document.querySelector("#project_id");
  94.     let project_method = document.querySelector("#project_method");
  95.        
  96.     const logIn = () => {
  97.         let userdata = {};
  98.         userdata.email = login_email.value;
  99.         userdata.password = login_password.value;
  100.         fetch('/myapp/public/api/login', {
  101.             method: 'POST',
  102.             headers: {
  103.                 'Content-Type': 'application/json',
  104.             },
  105.             body: JSON.stringify(userdata),
  106.         })
  107.         .then(response => response.json())
  108.         .then(data => {logInAfter(data);});
  109.         return false;
  110.     }
  111.  
  112.     const logInAfter = (data) => {
  113.         if( data.user ) access_token = data.access_token;
  114.         if( access_token ) {
  115.             initForms();
  116.             loginform.style.display = 'none';
  117.             projectform.style.display = 'block';
  118.             getProjects();
  119.         }
  120.     }
  121.  
  122.     const registUser = () => {
  123.         loginform.style.display = 'none';
  124.         signupform.style.display = 'block';
  125.     }
  126.  
  127.     const signUp = () => {
  128.         let userdata = {};
  129.         userdata.name = name.value;
  130.         userdata.email = email.value;
  131.         userdata.password = password.value;
  132.         userdata.password_confirmation = password_confirmation.value;
  133.         //console.log(userdata);
  134.         fetch('/myapp/public/api/register', {
  135.             method: 'POST',
  136.             headers: {
  137.                 'Content-Type': 'application/json',
  138.             },
  139.             body: JSON.stringify(userdata),
  140.         })
  141.         .then(response => response.json())
  142.         .then(data => {
  143.             if( data.user ) {
  144.                 initForms();
  145.                 loginform.style.display = 'block';
  146.                 signupform.style.display = 'none';
  147.             }
  148.         });
  149.         return false;
  150.     }
  151.  
  152.     const closeRegist = () => {
  153.         initForms();
  154.         loginform.style.display = 'block';
  155.         signupform.style.display = 'none';
  156.     }
  157.  
  158.     const saveProject = () => {
  159.         let projectdata = {};
  160.         let sendMethod = project_method.value;
  161.         projectdata.id = project_id.value;
  162.         projectdata.name = project_name.value;
  163.         projectdata.introduction = project_introduction.value;
  164.         projectdata.location = project_location.value;
  165.         projectdata.cost = project_cost.value;
  166.         let url = '/myapp/public/api/projects';
  167.         console.log(url);
  168.         if( sendMethod == "PATCH" ) url += '/' + projectdata.id;
  169.         fetch(url, {
  170.             method: sendMethod,
  171.             headers: {
  172.                 'Content-Type': 'application/json',
  173.                 'Authorization': 'Bearer ' + access_token
  174.  
  175.             },
  176.             body: JSON.stringify(projectdata),
  177.         })
  178.         .then(response => {
  179.             initForms();
  180.             projectlist.innerHTML = '';
  181.             getProjects();
  182.         });
  183.         return false;
  184.     }
  185.  
  186.     const getProjects = () => {
  187.         fetch('/myapp/public/api/projects', {
  188.             method: 'GET',
  189.             headers: {
  190.                 'Content-Type': 'application/json',
  191.                 'Authorization': 'Bearer ' + access_token
  192.             }
  193.         })
  194.         .then(response => response.json())
  195.         .then(data => {showProjects(data.projects);});
  196.     }
  197.  
  198.     const showProjects = (projects) => {
  199.         console.log(projects);
  200.         projects.forEach(function(project){
  201.             let card = `
  202.                 <div class="card mb-2">
  203.                   <h5 class="card-header">Project ID #${project.id}</h5>
  204.                   <div class="card-body">
  205.                     <h5 class="card-title">${project.name}</h5>
  206.                     <p class="card-text">
  207.                         [Introduction]<br>
  208.                         ${project.introduction}<br>
  209.                         [Location] ${project.location}<br>
  210.                         [Cost] ${project.cost}
  211.                     </p>
  212.                     <a href="javascript:editProject(${project.id})" class="btn btn-warning">Edit</a>
  213.                     <a href="javascript:removeProject(${project.id})" class="btn btn-danger">Delete</a>
  214.                   </div>
  215.                 </div>
  216.             `;
  217.             projectlist.innerHTML += card;
  218.         });
  219.     }
  220.  
  221.     const editProject = (id) => {
  222.         fetch('/myapp/public/api/projects/' + id, {
  223.             method: 'GET',
  224.             headers: {
  225.                 'Content-Type': 'application/json',
  226.                 'Authorization': 'Bearer ' + access_token
  227.             }
  228.         })
  229.         .then(response => response.json())
  230.         .then(data => {
  231.             let project = data.project;
  232.             project_id.value = project.id;
  233.             project_method.value = 'PATCH';
  234.             project_name.value = project.name;
  235.             project_introduction.value = project.introduction;
  236.             project_location.value = project.location;
  237.             project_cost.value = project.cost;
  238.         });
  239.     }
  240.  
  241.     const initForms = () => {
  242.         login_email.value = '';
  243.         login_password.value = '';
  244.         name.value = '';
  245.         email.value = '';
  246.         password.value = '';
  247.         password_confirmation.value = '';
  248.         project_name.value = '';
  249.         project_introduction.value = '';
  250.         project_location.value = '';
  251.         project_cost.value = '';
  252.         project_method.id = '';
  253.         project_method.value = 'POST';
  254.     }
  255. </script>
  256. </body>
  257. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement