API tools faq
paste
Advertisement
asimryu

home.blade.php

asimryu
Apr 21st, 2021
1,357
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
PHP 8.04 KB | None | 0 0
raw download clone embed print report
  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.         <button class="w-100 btn btn-lg btn-primary" type="submit">Save Project</button>
  71.       </form>
  72.     </div>    
  73.   </div>
  74. </div>
  75. <script>
  76.     let access_token = null;
  77.     let login_email = document.querySelector('#login_email');
  78.     let login_password = document.querySelector('#login_password');
  79.     let name = document.querySelector('#name');
  80.     let email = document.querySelector('#email');
  81.     let password = document.querySelector('#password');
  82.     let password_confirmation = document.querySelector('#password_confirmation');
  83.     let loginform = document.querySelector("#loginform");
  84.     let signupform = document.querySelector("#signupform");
  85.     let projectform = document.querySelector("#projectform");
  86.     let project_name = document.querySelector("#project_name");
  87.     let project_introduction = document.querySelector("#project_introduction");
  88.     let project_location = document.querySelector("#project_location");
  89.     let project_cost = document.querySelector("#project_cost");
  90.     let projectlist = document.querySelector("#projectlist");
  91.        
  92.     const logIn = () => {
  93.         let userdata = {};
  94.         userdata.email = login_email.value;
  95.         userdata.password = login_password.value;
  96.         fetch('/myapp/public/api/login', {
  97.             method: 'POST',
  98.             headers: {
  99.                 'Content-Type': 'application/json',
  100.             },
  101.             body: JSON.stringify(userdata),
  102.         })
  103.         .then(response => response.json())
  104.         .then(data => {logInAfter(data);});
  105.         return false;
  106.     }
  107.  
  108.     const logInAfter = (data) => {
  109.         if( data.user ) access_token = data.access_token;
  110.         if( access_token ) {
  111.             initForms();
  112.             loginform.style.display = 'none';
  113.             projectform.style.display = 'block';
  114.             getProjects();
  115.         }
  116.     }
  117.  
  118.     const registUser = () => {
  119.         loginform.style.display = 'none';
  120.         signupform.style.display = 'block';
  121.     }
  122.  
  123.     const signUp = () => {
  124.         let userdata = {};
  125.         userdata.name = name.value;
  126.         userdata.email = email.value;
  127.         userdata.password = password.value;
  128.         userdata.password_confirmation = password_confirmation.value;
  129.         //console.log(userdata);
  130.         fetch('/myapp/public/api/register', {
  131.             method: 'POST',
  132.             headers: {
  133.                 'Content-Type': 'application/json',
  134.             },
  135.             body: JSON.stringify(userdata),
  136.         })
  137.         .then(response => response.json())
  138.         .then(data => {
  139.             if( data.user ) {
  140.                 initForms();
  141.                 loginform.style.display = 'block';
  142.                 signupform.style.display = 'none';
  143.             }
  144.         });
  145.         return false;
  146.     }
  147.  
  148.     const closeRegist = () => {
  149.         initForms();
  150.         loginform.style.display = 'block';
  151.         signupform.style.display = 'none';
  152.     }
  153.  
  154.     const saveProject = () => {
  155.         let projectdata = {};
  156.         projectdata.name = project_name.value;
  157.         projectdata.introduction = project_introduction.value;
  158.         projectdata.location = project_location.value;
  159.         projectdata.cost = project_cost.value;
  160.         fetch('/myapp/public/api/projects', {
  161.             method: 'POST',
  162.             headers: {
  163.                 'Content-Type': 'application/json',
  164.                 'Authorization': 'Bearer ' + access_token
  165.  
  166.             },
  167.             body: JSON.stringify(projectdata),
  168.         })
  169.         .then(response => {
  170.             initForms();
  171.             projectlist.innerHTML = '';
  172.             getProjects();
  173.         });
  174.         return false;
  175.     }
  176.  
  177.     const getProjects = () => {
  178.         fetch('/myapp/public/api/projects', {
  179.             method: 'GET',
  180.             headers: {
  181.                 'Content-Type': 'application/json',
  182.                 'Authorization': 'Bearer ' + access_token
  183.             }
  184.         })
  185.         .then(response => response.json())
  186.         .then(data => {showProjects(data.projects);});
  187.     }
  188.  
  189.     const showProjects = (projects) => {
  190.         console.log(projects);
  191.         projects.forEach(function(project){
  192.             let card = `
  193.                 <div class="card mb-2">
  194.                   <h5 class="card-header">Project ID #${project.id}</h5>
  195.                   <div class="card-body">
  196.                     <h5 class="card-title">${project.name}</h5>
  197.                     <p class="card-text">
  198.                         [Introduction]<br>
  199.                         ${project.introduction}<br>
  200.                         [Location] ${project.location}<br>
  201.                         [Cost] ${project.cost}
  202.                     </p>
  203.                     <a href="#" class="btn btn-warning">Edit</a>
  204.                     <a href="#" class="btn btn-danger">Delete</a>
  205.                   </div>
  206.                 </div>
  207.             `;
  208.             projectlist.innerHTML += card;
  209.         });
  210.     }
  211.  
  212.     const initForms = () => {
  213.         login_email.value = '';
  214.         login_password.value = '';
  215.         name.value = '';
  216.         email.value = '';
  217.         password.value = '';
  218.         password_confirmation.value = '';
  219.         project_name.value = '';
  220.         project_introduction.value = '';
  221.         project_location.value = '';
  222.         project_cost.value = '';
  223.     }
  224. </script>
  225. </body>
  226. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!