Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- https://github.com/vdonchev/JavaScriptApps-AllExercisesAndLabs
- //students////////////////////////////
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Shit</title>
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
- <style>
- #results {
- background-color: #FFFFFF;
- display: flex;
- flex-direction: column;
- text-align: center;
- }
- #results tr {
- background-color: #AAAAAA;
- padding: 5vh;
- font-size: 1.5vw;
- }
- #results tr:nth-child(odd) {
- background-color: #808080;
- }
- #results tr:first-child {
- background-color: #000000;
- color: #FFFFFF;
- font-weight: bold;
- font-size: 2vw;
- }
- #results tr th {
- padding: 1vw;
- }
- #results tr td {
- padding: 1vw;
- transition: font-size 0.2s;
- }
- #results tr:not(:first-child):hover {
- background-color: #F0F8FF;
- color: #000000;
- font-size: 2.25vw;
- }
- .user {
- background-color: red;
- font-size: 1.5vw;
- text-align: center;
- }
- #btn {
- background-color: yellow;
- }
- </style>
- </head>
- <body>
- <table id="results">
- <input id="inputID" class="user" value="insert ID">
- <input id="inputFirstName" class="user" value="insert FirstName">
- <input id="inputLastName" class="user" value="insert LastName">
- <input id="inputFacultyNumber" class="user" value="insert FacultyNumber">
- <input id="inputGrade" class="user" value="insert Grade">
- <button id="btn">upload</button >
- <tr>
- <th>ID</th>
- <th>First Name</th>
- <th>Last Name</th>
- <th>Faculty Number</th>
- <th>Grade</th>
- </tr>
- </table>
- <!--<script src="script.js"></script>-->
- <script>
- loadStudents();
- function loadStudents() {
- const appKey = "kid_BJXTsSi-e";
- const baseUrl = "https://baas.kinvey.com/appdata/" + appKey + "/students";
- const username = "guest";
- const password = "guest";
- let authHeaders = {
- "Authorization": "Basic " + btoa(username + ":" + password),
- "Content-Type": "application/json"
- };
- getStudents();
- function getStudents() {
- $.get({
- url: baseUrl,
- headers: authHeaders
- })
- .then(displayStudents)
- .catch();
- function displayStudents(info) {
- let byid = info.slice(0);
- byid.sort(function (a, b) {
- return a.ID - b.ID;
- });
- for (let student of byid) {
- $("#results")
- .append($("<tr>")
- .append($("<th>").text(student.ID))
- .append($("<th>").text(student.FirstName))
- .append($("<th>").text(student.LastName))
- .append($("<th>").text(student.FacultyNumber))
- .append($("<th>").text(student.Grade))
- );
- }
- }
- }
- $("#btn").click(function () {
- let id = Number($('#inputID').val().trim());
- let firstName = $('#inputFirstName').val().trim();
- let lastName = $('#inputLastName').val().trim();
- let facultyNumber = $('#inputFacultyNumber').val().trim();
- let grade = Number($('#inputGrade').val().trim());
- $.post({
- url: baseUrl,
- headers: authHeaders,
- data: JSON.stringify({
- ID: id,
- FirstName: firstName,
- LastName: lastName,
- FacultyNumber: facultyNumber,
- Grade: grade
- })
- }).then(del())
- .then(location.reload(), alert("reloaded"))
- .catch(alert("kur"))
- });
- function del() {
- $("#results tr:last").remove();
- }
- }
- </script>
- </body>
- </html>
- /////////////////////examPreparation//////////////////////////////////
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
- <style>
- #menu {
- background: #DDD;
- text-align: center;
- padding: 5px;
- line-height: 1.5;
- border-radius: 3px;
- overflow: auto;
- }
- #menu > #loggedInUser {
- float: right;
- margin-right: 10px;
- }
- #menu a {
- text-decoration: none;
- padding: 5px 10px;
- border-radius: 5px;
- }
- a {
- text-decoration: none;
- padding-right: 10px;
- }
- #menu a:hover {
- background: #BBB;
- }
- main > section {
- /*display: none;*/
- padding: 20px 5px;
- }
- section h1 {
- margin: 10px 0px;
- font-size: 1.2em;
- }
- table th {
- background: #DDD;
- padding: 10px;
- }
- table td {
- padding: 5px 10px;
- background: #EEE;
- }
- #infoBox, #errorBox, #loadingBox {
- display: none;
- width: 80%;
- margin: 10px auto;
- color: white;
- text-align: center;
- padding: 5px;
- border-radius: 3px;
- }
- #loadingBox {
- background: #7CB3E9;
- }
- #infoBox {
- background: #393;
- }
- #errorBox {
- background: #F50;
- }
- footer {
- background: #DDD;
- padding: 5px 10px;
- font-size: 0.8em;
- text-align: center;
- border-radius: 3px;
- }
- #textAuthor, #textDescription {
- margin-bottom: 10px;
- background-color: white;
- }
- td a:hover {
- color: red;
- }
- #loggedInUser{
- max-width:100%;
- max-height:100%;
- }
- </style>
- </head>
- <body onload="start()">
- <header id="menu">
- <a href="#" id="linkHome">Home</a>
- <a href="#" id="linkLogin">Login</a>
- <a href="#" id="linkRegister">Register</a>
- <a href="#" id="linkListBooks">List Books</a>
- <a href="#" id="linkCreateBook">Create Book</a>
- <a href="#" id="linkLogout">Logout</a>
- <span id="loggedInUser" ></span>
- </header>
- <section id="loadingBox">Loading ...</section>
- <section id="infoBox">Info</section>
- <section id="errorBox">Error</section>
- <section id="viewHome">
- <h1>Welcome</h1>
- Welcome to our book library.
- </section>
- <main>
- <section id="viewLogin">
- <h1>Please login</h1>
- <form id="formLogin">
- <div>Username:</div>
- <div><input type="text" name=
- "username" required/></div>
- <div>Password:</div>
- <div><input type="password"
- name="passwd" required/></div>
- <div><input type="submit" value="Login" id="buttonLoginUser"/></div>
- </form>
- </section>
- <section id="viewRegister">
- <h1>Please register here</h1>
- <form id="formRegister">
- <div>Username:</div>
- <div><input type="text" name= "username" required/></div>
- <div>Password:</div>
- <div><input type="password" name="passwd" required/></div>
- <div>Picture URL:</div>
- <div><input type="text" name="image" required /></div>
- <div><input type="submit" value="Register" id="buttonRegisterUser"/></div>
- </form>
- </section>
- <section id="viewBooks">
- <h1>Books</h1>
- <div id="books">
- <table>
- <tr>
- <th>Title</th>
- <th>Author</th>
- <th>Description</th>
- <th>Actions</th>
- </tr>
- <tr>
- <td>Book title</td>
- <td>Book author</td>
- <td>Book description</td>
- <td>
- <a href="#">[Delete]</a>
- <a href="#">[Edit]</a>
- </td>
- </tr>
- </table>
- </div>
- </section>
- <section id="viewCreateBook">
- <h1>Create new book</h1>
- <form id="formCreateBook">
- <div>Title:</div>
- <div><input type="text" name="title" required/></div>
- <div>Author:</div>
- <div><input type="text" name="author" required/></div>
- <div>Price:</div>
- <div><input type="text" name="price" required/>lv.</div>
- <div>Description:</div>
- <div><textarea name="descr" rows="10" required></textarea></div>
- <div><input type="submit" value="Create" id="buttonCreateBook"/></div>
- </form>
- </section>
- <section id="viewEditBook">
- <h1>Edit existing book</h1>
- <form id="formEditBook">
- <div><input type="hidden" name="id" required/></div>
- <div>Title:</div>
- <div><input type="text" name="title" required/></div>
- <div>Author:</div>
- <div><input type="text" name="author" required/></div>
- <div>Price:</div>
- <div><input type="text" name="price"/>lv.</div>
- <div>Description:</div>
- <div><textarea name="descr" rows="10"required></textarea></div>
- <div><input type=submit value="Edit" id="buttonEditBook"/></div>
- </form>
- </section>
- <section id="showSelected">
- <h3></h3>
- <div><input type="text" id="textAuthor" disabled></div>
- <div><textarea id="textDescription" rows="10" disabled></textarea></div>
- </section>
- </main>
- <footer>Book Library - Simple SPA Application</footer>
- <script>
- function start() {
- sessionStorage.clear(); // Clear user auth data
- const kinveyBaseUrl = "https://baas.kinvey.com/";
- const kinveyAppKey = "kid_HkGYRtH7x";
- const kinveyAppSecret =
- "0aeea03501304ac3916d0b548db494e2";
- const kinveyAppAuthHeaders = {
- 'Authorization': "Basic " +
- btoa(kinveyAppKey + ":" + kinveyAppSecret),
- };
- showHideMenuLinks();
- showView('viewHome');
- // Bind the navigation menu links
- $("#linkHome").click(showHomeView);
- // Bind the form submit actions
- $("#formLogin").submit(loginUser);
- function showHideMenuLinks() {
- $("#menu a").hide();
- if (sessionStorage.getItem("authToken")) {
- //logged in user
- $("#linkHome").show();
- $("#linkListBooks").show();
- $("#linkCreateBook").show();
- $("#linkLogout").show();
- }
- else {
- //no user logged
- $("#linkHome").show();
- $("#linkLogin").show();
- $("#linkRegister").show();
- }
- }
- function showView(viewName) {
- // Hide all views and show the selected view only
- $('main > section').hide();
- $('#' + viewName).show();
- }
- function showHomeView() {
- showView("viewHome")
- }
- function loginUser() {
- let userData = {
- username: $('#formLogin input[name=username]').val(),
- password: $('#formLogin input[name=passwd]').val()
- };
- if (userData.username !== "" && userData.password !== "") {
- $.ajax({
- method: "POST",
- url: kinveyBaseUrl + "user/" + kinveyAppKey + "/login",
- headers: kinveyAppAuthHeaders,
- data: userData,
- success: loginSuccess,
- error: handleAjaxError
- });
- } else {
- showError("Username AND Password should be filled")
- }
- function loginSuccess(userInfo) {
- saveAuthInSession(userInfo);
- showHideMenuLinks();
- listBooks();
- showInfo('login successful.');
- }
- }
- function showLoginView() {
- showView("viewLogin");
- $('#formLogin').trigger('reset');
- }
- function showRegisterView() {
- $('#formRegister').trigger('reset');
- showView('viewRegister');
- }
- function getKinveyUserAuthHeaders() {
- return {
- 'Authorization': "Kinvey " +
- sessionStorage.getItem('authToken'),
- };
- }
- function listBooks() {
- $('#books').empty();
- showView('viewBooks');
- $.ajax({
- method: "GET",
- url: kinveyBaseUrl + "appdata/" + kinveyAppKey + "/books",
- headers: getKinveyUserAuthHeaders(),
- success: loadBooksSuccess,
- error: handleAjaxError
- });
- function loadBooksSuccess(books) {
- $('#books').empty();
- showInfo('Books loaded.');
- if (books.length == 0) {
- $('#books').text('No books in the library.');
- } else {
- let table = $(`
- <table>
- <tr>
- <th>Title</th>
- <th>Author</th>
- <th>Description</th>
- <th>Price</th>
- <th>Actions</th>
- </tr>
- </table>`);
- for (let book of books) {
- let tr = $("<tr>");
- displayTableRow(tr, book);
- table.append(tr);
- }
- $('#books').append(table);//
- }
- }
- function displayTableRow(tr, book) {
- let links = [$("<a href='#'>more</a>")
- .click(function () {
- showMoreOfSelected(book)
- }), " "];
- if (book._acl.creator == sessionStorage.getItem("userId")) {
- let deleteLink = $("<a href='#'>delete</a>")
- .click(function () {
- let x;
- if (confirm("are you sure you want to delete this?") == true) {
- deleteBookById(book._id)
- }
- });
- let editLink = $("<a href='#'>edit</a>")
- .click(function () {
- loadBookForEdit(book._id)
- });
- links.push(deleteLink);
- links.push(" ");
- links.push(editLink);
- }
- tr.append(
- $("<td>").text(book.book),
- $("<td>").text(book.author),
- $("<td>").text(book.description),
- $("<td>").text(book.price),
- $("<td>").append(links)
- )
- }
- }
- function showMoreOfSelected(book) {
- $("#showSelected h3").text(book.book)
- $("#textAuthor").val(book.author)
- $("#textDescription").text(book.description)
- showView('showSelected');
- }
- function deleteBookById(bookId) {
- $.ajax({
- method: "DELETE",
- url: kinveyBaseUrl + "appdata/" + kinveyAppKey + "/books/" + bookId,
- headers: getKinveyUserAuthHeaders(),
- success: deleteBooksSuccess,
- error: handleAjaxError
- });
- function deleteBooksSuccess() {
- showInfo("book deleted")
- listBooks();
- }
- }
- function showCreateBookView() {
- $('#formCreateBook').trigger('reset');
- showView('viewCreateBook');
- }
- function logoutUser() {
- sessionStorage.clear();
- $('#loggedInUser').text("");
- showHideMenuLinks();
- showView('viewHome');
- showInfo('Logout successful.');
- }
- function registerUser() {
- setTimeout(function(){ }, 3000);
- let userData = {
- username: $('#formRegister input[name=username]').val(),
- password: $('#formRegister input[name=passwd]').val(),
- profilePicture:$('#formRegister input[name=image]').val()
- };
- if (userData.username !== "" && userData.password !== "") {
- $.ajax({
- method: "POST",
- url: kinveyBaseUrl + "user/" + kinveyAppKey + "/",
- headers: kinveyAppAuthHeaders,
- data: userData,
- success: registerSuccess,
- error: handleAjaxError
- });
- } else {
- showError("Username AND Password should be filled")
- }
- function registerSuccess(userInfo) {
- saveAuthInSession(userInfo);
- showHideMenuLinks();
- listBooks();
- showInfo('User registration successful.');
- }
- }
- function saveAuthInSession(userInfo) {
- sessionStorage.setItem('authToken', userInfo._kmd.authtoken);
- sessionStorage.setItem('userId', userInfo._id);
- let username = userInfo.username;
- $('#loggedInUser')
- .text("Welcome, " + username + "!")
- .append( $("<img>").attr("src",userInfo.profilePicture))
- }
- function handleAjaxError(response) {
- let errorMsg = JSON.stringify(response);
- if (response.readyState === 0)
- errorMsg = "Cannot connect due to network error.";
- if (response.responseJSON &&
- response.responseJSON.description)
- errorMsg = response.responseJSON.description;
- showError(errorMsg);
- }
- function showInfo(message) {
- $('#infoBox').text(message);
- $('#infoBox').show();
- setTimeout(function () {
- $('#infoBox').fadeOut();
- }, 2000);
- }
- function showError(errorMsg) {
- $('#errorBox').text("Error: " + errorMsg);
- $('#errorBox').show();
- }
- function createBook() {
- let bookData = {
- book: $('#viewCreateBook input[name=title]').val(),
- author: $('#viewCreateBook input[name=author]').val(),
- description: $('#viewCreateBook textarea[name=descr]').val(),
- price: $('#viewCreateBook input[name=price]').val()
- };
- if (bookData.book !== "" && bookData.author !== "" && bookData.description !== "" && bookData.price !== "") {
- $.ajax({
- method: "POST",
- url: kinveyBaseUrl + "appdata/" + kinveyAppKey + "/books",
- headers: getKinveyUserAuthHeaders(),
- data: bookData,
- success: bookCreateSuccess,
- error: handleAjaxError
- });
- } else {
- showError("Title,Author Description AND Price should be filled!")
- }
- function bookCreateSuccess() {
- showHideMenuLinks();
- listBooks();
- showInfo('book added successfully.');
- }
- }
- function loadBookForEdit(bookId) {
- $.ajax({
- method: "GET",
- url: kinveyBookUrl = kinveyBaseUrl + "appdata/" +
- kinveyAppKey + "/books/" + bookId,
- headers: getKinveyUserAuthHeaders(),
- success: loadBookForEditSuccess,
- error: handleAjaxError
- });
- function loadBookForEditSuccess(book) {
- $('#formEditBook input[name=id]').val(book._id);
- $('#formEditBook input[name=title]').val(book.book);
- $('#formEditBook input[name=author]').val(book.author);
- $('#formEditBook input[name=price]').val(book.price);
- $('#formEditBook textarea[name=descr]').val(book.description);
- showView('viewEditBook');
- }
- }
- function editBook() {
- let bookData = {
- book: $('#formEditBook input[name=title]').val(),
- author: $('#formEditBook input[name=author]').val(),
- price: $('#formEditBook input[name=price]').val(),
- description: $('#formEditBook textarea[name=descr]').val()
- };
- console.dir(bookData)
- if (bookData.book !== "" && bookData.author !== "" && bookData.description !== "" && bookData.price !== "") {
- $.ajax({
- method: "PUT",
- url: kinveyBaseUrl + "appdata/" + kinveyAppKey +
- "/books/" + $('#formEditBook input[name=id]').val(),
- headers: getKinveyUserAuthHeaders(),
- data: bookData,
- success: editBookSuccess,
- error: handleAjaxError
- });
- } else {
- showError("Title,Author Description AND Price should be filled!")
- }
- function editBookSuccess(response) {
- alert("sux")
- listBooks();
- showInfo('Book edited.');
- }
- }
- // Bind the navigation menu links
- $("#linkHome").click(showHomeView);
- $("#linkLogin").click(showLoginView);
- $("#linkRegister").click(showRegisterView);
- $("#linkListBooks").click(listBooks);
- $("#linkCreateBook").click(showCreateBookView);
- $("#linkLogout").click(logoutUser);
- // Bind the form submit buttons
- $("#buttonLoginUser").click(loginUser);
- $("#buttonRegisterUser").click(registerUser);
- $("#buttonCreateBook").click(createBook);
- $("#buttonEditBook").click(editBook);
- // Bind the info / error boxes: hide on click
- $("#infoBox, #errorBox").click(function () {
- $(this).fadeOut();
- });
- // Attach AJAX "loading" event listener
- $(document).on({
- ajaxStart: function () {
- $("#loadingBox").show()
- },
- ajaxStop: function () {
- $("#loadingBox").hide()
- }
- });
- $("form").submit(function (e) {
- e.preventDefault()
- });
- }
- </script>
- </body>
- </html>
- //////////////////////////////selfPreparation//////////////////////////////////
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
- </head>
- <body onload="start()">
- <header id="header">
- <a href="#" id="linkHome">Home</a>
- <a href="#" id="linkLogin">Login</a>
- <a href="#" id="linkRegister">Register</a>
- <a href="#" id="linkAddClub">Add club</a>
- <a href="#" id="linkDisplayClubs">Show Clubs</a>
- <a href="#" id="linkLogout">logout</a>
- <span id="welcome" style="float: right"></span>
- </header>
- <section id="sectionHome">
- Tell us what's your favorite football team and why.
- </section>
- <h1 id="infoDiv"></h1>
- <main id="main">
- <section id="sectionLogin">
- <form id="viewLogin">
- <div>Your name:<input type="text" class="in" id="nameLogin"></div>
- <div>Password:<input type="password" class="in" id="passwordLogin"></div>
- <button type="submit" id="btnLogin">Login</button>
- </form>
- </section>
- <section id="sectionRegister">
- <form id="viewRegister">
- <div>Your name:<input type="text" class="in" id="nameRegister"></div>
- <div>Password:<input type="password" class="in" id="passwordRegister"></div>
- <div>Confirm Password:<input type="password" class="in" id="confirmPasswordRegister"></div>
- <button type="submit" id="btnRegister">Register</button>
- </form>
- </section>
- <section id="sectionAddClub">
- <form id="viewAddClub">
- <div>Club:<input type="text" class="in" id="addClub"></div>
- <div>Country:<input type="text" class="in" id="addCountry"></div>
- <div style="display: inline ;">Why You Support It?</div>
- <textarea id="addDescription"></textarea>
- <button type="submit" id="btnAddClub">Add</button>
- </form>
- </section>
- <section id="sectionEditClub">
- <form id="viewEditClub">
- <div>Club:<input type="text" class="in" id="editClub"></div>
- <div>Country:<input type="text" class="in" id="editCountry"></div>
- <div style="display: inline ;">Why You Support It?</div>
- <textarea id="editDescription"></textarea>
- <button type="submit" id="btnEditClub">Edit Changes</button>
- </form>
- </section>
- <section id="sectionShowClubs">
- <form id="viewShowClubs">
- <div id="teams">
- </div>
- </form>
- </section>
- <section id="sectionLogout">
- <form id="viewLogout">
- </form>
- </section>
- </main>
- <footer>
- No rights reserved.YOSIFOV 2016
- </footer>
- <script>
- function start() {
- sessionStorage.clear(); // Clear user auth data
- const kinveyBaseUrl = "https://baas.kinvey.com/";
- const kinveyAppKey = "kid_HJOa7qYQe";
- const kinveyAppSecret = "b5c713f9f48d4c18bb617636726127a0";
- const kinveyAppAuthHeaders = {
- 'Authorization': "Basic " +
- btoa(kinveyAppKey + ":" + kinveyAppSecret),
- };
- showHideHeaders();
- function showHideHeaders() {
- clearAll();
- if (sessionStorage.getItem("authToken")) {
- $("#linkAddClub").show();
- $("#linkDisplayClubs").show();
- $("#linkLogout").show();
- $("#linkRegister").hide();
- $("#linkLogin").hide();
- }
- else {
- $("#linkAddClub").hide();
- $("#linkDisplayClubs").hide();
- $("#linkLogout").hide();
- $("#linkRegister").show();
- $("#linkLogin").show();
- }
- }
- function clearAll() {
- $("#sectionRegister").hide();
- $("#sectionLogin").hide();
- $("#sectionLogout").hide();
- $("#sectionAddClub").hide();
- $("#sectionShowClubs").hide();
- $("#sectionEditClub").hide();
- }
- function info(message) {
- $("#sectionHome").append($("<h1>").text(message))
- setTimeout(function () {
- $("#sectionHome").find("h1").fadeOut();
- }, 2000)
- }
- function auth(userData) {
- sessionStorage.setItem("authToken", userData._kmd.authtoken);
- sessionStorage.setItem("userId", userData._id)
- }
- //::::::KINVEY RELATED:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
- function registerUser() {
- let confirm = $("#confirmPasswordRegister").val()
- let userData = {
- username: $("#nameRegister").val(),
- password: $("#passwordRegister").val()
- }
- if (userData.username == "" || userData.password == "" || confirm == "") {
- info("All fields Should be Filled!");
- }
- else if (userData.password !== confirm) {
- info("Password Don't Match")
- }
- else {
- $.ajax({
- method: "POST",
- url: kinveyBaseUrl + "user/" + kinveyAppKey,
- headers: kinveyAppAuthHeaders,
- data: userData,
- success: successReg,
- error: errorHandler
- })
- }
- function successReg(userData) {
- clearAll();
- $("#confirmPasswordRegister").val('')
- $("#nameRegister").val(''),
- $("#passwordRegister").val('')
- $("#welcome").text("Welcome, " + userData.username + "!")
- info("Registration Succesful");
- auth(userData);
- showHideHeaders();
- viewDisplay();
- }
- }
- function loginUser() {
- let userData = {
- username: $("#nameLogin").val(),
- password: $("#passwordLogin").val()
- }
- if (userData.username == "" || userData.password == "") {
- info("All fields Should be Filled!");
- }
- else {
- $.ajax({
- method: "POST",
- url: kinveyBaseUrl + "user/" + kinveyAppKey + "/login",
- headers: kinveyAppAuthHeaders,
- data: userData,
- success: successLogin,
- error: errorHandler
- })
- }
- function successLogin(userData) {
- clearAll();
- $("#welcome").text("Welcome, " + userData.username + "!")
- info("Login Succesful");
- $("#nameLogin").val(""),
- $("#passwordLogin").val("")
- auth(userData);
- showHideHeaders();
- viewDisplay();
- }
- }
- function addClub() {
- let userData = {
- team: $("#addClub").val(),
- country: $("#addCountry").val(),
- description: $("#addDescription").val()
- }
- if (userData.team == "" || userData.country == "" || userData.description == "") {
- info("All fields Should be Filled!");
- }
- else {
- $.ajax({
- method: "POST",
- url: kinveyBaseUrl + "appdata/" + kinveyAppKey + "/teams",
- headers: {
- "authorization": "Kinvey " + sessionStorage.getItem("authToken")
- },
- data: userData,
- success: successAdd,
- error: errorHandler
- })
- }
- function successAdd(userdata) {
- $("#addClub").val(""),
- $("#addCountry").val(""),
- $("#addDescription").val("")
- info("Team Added");
- clearAll();
- viewDisplay();
- }
- }
- function errorHandler(error) {
- info(error.responseJSON.error)
- }
- //::::::VIEWS::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
- function viewLogin() {
- $("#sectionLogin").show()
- }
- function viewRegister() {
- $("#sectionRegister").show()
- }
- function viewAddClub() {
- $("#sectionAddClub").show();
- }
- function viewDisplay() {
- $.ajax({
- method: "GET",
- url: kinveyBaseUrl + "appdata/" + kinveyAppKey + "/teams",
- headers: {
- "authorization": "Kinvey " + sessionStorage.getItem("authToken")
- },
- success: successDisplay,
- error: errorHandler
- })
- function successDisplay(userData) {
- $("#teams").empty();
- $("#teams")
- .append(
- $("<table>"),
- $("<tr>"),
- $("<th>").text("Club"),
- $("<th>").text("Country"),
- $("<th>").text("description")
- )
- for (team of userData) {
- let a = $("<tr>");
- aa(a, team);
- $("#teams").append(a);
- function aa(a, team) {
- a.append(
- $("<tr>"),
- $("<td>").text(team.team),
- $("<td>").text(team.country),
- $("<td>").text(team.description)
- )
- if (sessionStorage.getItem("userId") == team._acl.creator) {
- a.append(
- $("<button>").text("delete").click(function () {
- let x;
- if (confirm("are you sure you want to delete this?") == true) {
- deleteTeam(team._id)
- }
- }), $("<button>").text("edit").click(function () {
- editTeam(team)
- })
- )
- }
- }
- }
- $("#sectionShowClubs").show()
- }
- }
- function deleteTeam(teamId) {
- $.ajax({
- method: "DELETE",
- url: kinveyBaseUrl + "appdata/" + kinveyAppKey + "/teams/" + teamId,
- headers: {
- "authorization": "Kinvey " + sessionStorage.getItem("authToken")
- },
- success: successDelete,
- error: errorHandler
- })
- function successDelete() {
- info("Team Deleted");
- clearAll();
- viewDisplay();
- }
- }
- function editTeam(team) {
- clearAll();
- $("#sectionEditClub").show();
- $("#editClub").val(team.team),
- $("#editCountry").val(team.country),
- $("#editDescription").val(team.description)
- $("#btnEditClub").click(function () {
- let userData = {
- team: $("#editClub").val(),
- country: $("#editCountry").val(),
- description: $("#editDescription").val()
- }
- if (userData.team == "" || userData.country == "" || userData.description == "") {
- info("All fields Should be Filled!");
- }
- else {
- $.ajax({
- method: "PUT",
- url: kinveyBaseUrl + "appdata/" + kinveyAppKey + "/teams/" + team._id,
- headers: {
- "authorization": "Kinvey " + sessionStorage.getItem("authToken")
- },
- data: userData,
- success: successEdit,
- error: errorHandler
- })
- }
- });
- }
- function successEdit() {
- info("Edit Successful!")
- clearAll();
- viewDisplay();
- }
- //::::::BUTTONS::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
- $("#linkHome").click(function () {
- clearAll();
- });
- $("#linkLogin").click(function () {
- clearAll();
- viewLogin();
- });
- $("#linkRegister").click(function () {
- clearAll();
- viewRegister()
- });
- $("#linkAddClub").click(function () {
- clearAll()
- viewAddClub();
- });
- $("#linkDisplayClubs").click(function () {
- clearAll();
- viewDisplay();
- });
- $("#linkLogout").click(function () {
- sessionStorage.clear()
- $("#welcome").text("")
- showHideHeaders();
- info("Logout Succesful");
- })
- $("#btnRegister").click(registerUser);
- $("#btnLogin").click(loginUser);
- $("#btnAddClub").click(addClub);
- }
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement