Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Project Manager</title>
- <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">
- </head>
- <body>
- <div class="container col-xl-10 col-xxl-8 px-4 py-5">
- <div class="row align-items-center g-5 py-5">
- <div class="col-lg-7 text-center text-lg-start">
- <h1 class="display-4 fw-bold lh-1 mb-4">Project Manager</h1>
- <p id="projectlist" class="col-lg-10 fs-4"></p>
- </div>
- <div id="loginform" class="col-10 mx-auto col-lg-5">
- <form class="p-5 border rounded-3 bg-light" onsubmit="return logIn();">
- <div class="form-floating mb-3">
- <input type="email" class="form-control" id="login_email" placeholder="name@example.com" required>
- <label for="login_email">Email address</label>
- </div>
- <div class="form-floating mb-3">
- <input type="password" class="form-control" id="login_password" placeholder="Password" required>
- <label for="login_password">Password</label>
- </div>
- <button class="w-50 btn btn-lg btn-primary" type="submit">Log in</button>
- <a href="javascript:registUser()" class="w-40 btn btn-lg btn-secondary">Sign up</a>
- </form>
- </div>
- <div id="signupform" class="col-10 mx-auto col-lg-5" style="display: none;">
- <form class="p-5 border rounded-3 bg-light" onsubmit="return signUp();">
- <div class="form-floating mb-3">
- <input type="text" class="form-control" id="name" placeholder="name" required>
- <label for="name">Name</label>
- </div>
- <div class="form-floating mb-3">
- <input type="email" class="form-control" id="email" placeholder="name@example.com" required="">
- <label for="email">Email address</label>
- </div>
- <div class="form-floating mb-3">
- <input type="password" class="form-control" id="password" placeholder="Password" required>
- <label for="password">Password</label>
- </div>
- <div class="form-floating mb-3">
- <input type="password" class="form-control" id="password_confirmation" placeholder="Password" required>
- <label for="password_confirmation">Password Confirm</label>
- </div>
- <button class="w-50 btn btn-lg btn-primary" type="submit">Sign up</button>
- <a href="javascript:closeRegist()" class="w-40 btn btn-lg btn-secondary">Close</a>
- </form>
- </div>
- <div id="projectform" class="col-10 mx-auto col-lg-5" style="display: none;">
- <form class="p-5 border rounded-3 bg-light" onsubmit="return saveProject();">
- <div class="form-floating mb-3">
- <input type="text" class="form-control" id="project_name" placeholder="project name" required>
- <label for="name">Project Name</label>
- </div>
- <div class="form-floating mb-3">
- <input type="text" class="form-control" id="project_introduction" placeholder="project introduction" required>
- <label for="name">Project Introduction</label>
- </div>
- <div class="form-floating mb-3">
- <input type="text" class="form-control" id="project_location" placeholder="project location" required>
- <label for="name">Project Location</label>
- </div>
- <div class="form-floating mb-3">
- <input type="text" class="form-control" id="project_cost" placeholder="project cost" required>
- <label for="name">Project Cost</label>
- </div>
- <input type="hidden" id="project_id">
- <input type="hidden" id="project_method" value="POST">
- <button class="w-100 btn btn-lg btn-primary" type="submit">Save Project</button>
- </form>
- </div>
- </div>
- </div>
- <script>
- let access_token = null;
- let login_email = document.querySelector('#login_email');
- let login_password = document.querySelector('#login_password');
- let name = document.querySelector('#name');
- let email = document.querySelector('#email');
- let password = document.querySelector('#password');
- let password_confirmation = document.querySelector('#password_confirmation');
- let loginform = document.querySelector("#loginform");
- let signupform = document.querySelector("#signupform");
- let projectform = document.querySelector("#projectform");
- let project_name = document.querySelector("#project_name");
- let project_introduction = document.querySelector("#project_introduction");
- let project_location = document.querySelector("#project_location");
- let project_cost = document.querySelector("#project_cost");
- let projectlist = document.querySelector("#projectlist");
- let project_id = document.querySelector("#project_id");
- let project_method = document.querySelector("#project_method");
- const logIn = () => {
- let userdata = {};
- userdata.email = login_email.value;
- userdata.password = login_password.value;
- fetch('/myapp/public/api/login', {
- method: 'POST',
- headers: {
- 'Content-Type': 'application/json',
- },
- body: JSON.stringify(userdata),
- })
- .then(response => response.json())
- .then(data => {logInAfter(data);});
- return false;
- }
- const logInAfter = (data) => {
- if( data.user ) access_token = data.access_token;
- if( access_token ) {
- initForms();
- loginform.style.display = 'none';
- projectform.style.display = 'block';
- getProjects();
- }
- }
- const registUser = () => {
- loginform.style.display = 'none';
- signupform.style.display = 'block';
- }
- const signUp = () => {
- let userdata = {};
- userdata.name = name.value;
- userdata.email = email.value;
- userdata.password = password.value;
- userdata.password_confirmation = password_confirmation.value;
- //console.log(userdata);
- fetch('/myapp/public/api/register', {
- method: 'POST',
- headers: {
- 'Content-Type': 'application/json',
- },
- body: JSON.stringify(userdata),
- })
- .then(response => response.json())
- .then(data => {
- if( data.user ) {
- initForms();
- loginform.style.display = 'block';
- signupform.style.display = 'none';
- }
- });
- return false;
- }
- const closeRegist = () => {
- initForms();
- loginform.style.display = 'block';
- signupform.style.display = 'none';
- }
- const saveProject = () => {
- let projectdata = {};
- let sendMethod = project_method.value;
- projectdata.id = project_id.value;
- projectdata.name = project_name.value;
- projectdata.introduction = project_introduction.value;
- projectdata.location = project_location.value;
- projectdata.cost = project_cost.value;
- let url = '/myapp/public/api/projects';
- console.log(url);
- if( sendMethod == "PATCH" ) url += '/' + projectdata.id;
- fetch(url, {
- method: sendMethod,
- headers: {
- 'Content-Type': 'application/json',
- 'Authorization': 'Bearer ' + access_token
- },
- body: JSON.stringify(projectdata),
- })
- .then(response => {
- initForms();
- projectlist.innerHTML = '';
- getProjects();
- });
- return false;
- }
- const getProjects = () => {
- fetch('/myapp/public/api/projects', {
- method: 'GET',
- headers: {
- 'Content-Type': 'application/json',
- 'Authorization': 'Bearer ' + access_token
- }
- })
- .then(response => response.json())
- .then(data => {showProjects(data.projects);});
- }
- const showProjects = (projects) => {
- console.log(projects);
- projects.forEach(function(project){
- let card = `
- <div class="card mb-2">
- <h5 class="card-header">Project ID #${project.id}</h5>
- <div class="card-body">
- <h5 class="card-title">${project.name}</h5>
- <p class="card-text">
- [Introduction]<br>
- ${project.introduction}<br>
- [Location] ${project.location}<br>
- [Cost] ${project.cost}
- </p>
- <a href="javascript:editProject(${project.id})" class="btn btn-warning">Edit</a>
- <a href="javascript:removeProject(${project.id})" class="btn btn-danger">Delete</a>
- </div>
- </div>
- `;
- projectlist.innerHTML += card;
- });
- }
- const editProject = (id) => {
- fetch('/myapp/public/api/projects/' + id, {
- method: 'GET',
- headers: {
- 'Content-Type': 'application/json',
- 'Authorization': 'Bearer ' + access_token
- }
- })
- .then(response => response.json())
- .then(data => {
- let project = data.project;
- project_id.value = project.id;
- project_method.value = 'PATCH';
- project_name.value = project.name;
- project_introduction.value = project.introduction;
- project_location.value = project.location;
- project_cost.value = project.cost;
- });
- }
- const initForms = () => {
- login_email.value = '';
- login_password.value = '';
- name.value = '';
- email.value = '';
- password.value = '';
- password_confirmation.value = '';
- project_name.value = '';
- project_introduction.value = '';
- project_location.value = '';
- project_cost.value = '';
- project_method.id = '';
- project_method.value = 'POST';
- }
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement