asimryu

home.blade.php

Apr 21st, 2021
996
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  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>
RAW Paste Data

Adblocker detected! Please consider disabling it...

We've detected AdBlock Plus or some other adblocking software preventing Pastebin.com from fully loading.

We don't have any obnoxious sound, or popup ads, we actively block these annoying types of ads!

Please add Pastebin.com to your ad blocker whitelist or disable your adblocking software.

×