SHOW:
|
|
- or go back to the newest paste.
| 1 | function startApp() {
| |
| 2 | sessionStorage.clear(); | |
| 3 | showHideMenuLinks(); | |
| 4 | showView('viewHome');
| |
| 5 | ||
| 6 | // Bind the navigation menu links | |
| 7 | $('#linkHome').click(showHomeView);
| |
| 8 | $('#linkLogin').click(showLoginView);
| |
| 9 | $('#linkRegister').click(showRegisterView);
| |
| 10 | $('#linkListAds').click(showCollectionView);
| |
| 11 | $('#linkCreateAd').click(showCreateView);
| |
| 12 | $('#linkLogout').click(logout);
| |
| 13 | ||
| 14 | // Bind the form submit buttons | |
| 15 | $("#formLogin").submit(login);
| |
| 16 | $("#formRegister").submit(register);
| |
| 17 | $("#buttonCreateAd").click(create);
| |
| 18 | $("#buttonEditAd").click(edit);
| |
| 19 | ||
| 20 | // Bind the info / error boxes: hide on click | |
| 21 | $("#infoBox, #errorBox").click(function() {
| |
| 22 | $(this).fadeOut(); | |
| 23 | }); | |
| 24 | $(document).on({
| |
| 25 | ajaxStart: function() { $("#loadingBox").show() },
| |
| 26 | ajaxStop: function() { $("#loadingBox").hide() }
| |
| 27 | }); | |
| 28 | ||
| 29 | // Show or hide the links in the navigation bar | |
| 30 | function showHideMenuLinks() {
| |
| 31 | $("#linkHome").show();
| |
| 32 | if (sessionStorage.getItem('authToken')) {
| |
| 33 | // We have logged in user | |
| 34 | $("#linkLogin").hide();
| |
| 35 | $("#linkRegister").hide();
| |
| 36 | $("#linkListAds").show();
| |
| 37 | $("#linkCreateAd").show();
| |
| 38 | $("#linkLogout").show();
| |
| 39 | } else {
| |
| 40 | // No logged in user | |
| 41 | $("#linkLogin").show();
| |
| 42 | $("#linkRegister").show();
| |
| 43 | $("#linkListAds").hide();
| |
| 44 | $("#linkCreateAd").hide();
| |
| 45 | $("#linkLogout").hide();
| |
| 46 | } | |
| 47 | } | |
| 48 | ||
| 49 | // Hide all views and show the selected view only | |
| 50 | function showView(viewName) {
| |
| 51 | $('main > section').hide();
| |
| 52 | $('#' + viewName).show(); // viewName is the id of the given section
| |
| 53 | } | |
| 54 | ||
| 55 | //-----Views----------------------------------------------------------------------// | |
| 56 | ||
| 57 | function showHomeView() {
| |
| 58 | showView('viewHome');
| |
| 59 | } | |
| 60 | //--------------------------- | |
| 61 | function showLoginView() {
| |
| 62 | showView('viewLogin');
| |
| 63 | $('#formLogin').trigger('reset');
| |
| 64 | } | |
| 65 | //---------------------------- | |
| 66 | function showRegisterView() {
| |
| 67 | showView('viewRegister');
| |
| 68 | $('#formRegister').trigger('reset');
| |
| 69 | } | |
| 70 | //---------------------------- | |
| 71 | function showCollectionView() {
| |
| 72 | $('#ads').empty();
| |
| 73 | showView('viewAds');
| |
| 74 | KinveyRequester.findAllEntities() | |
| 75 | .then(loadSuccess) | |
| 76 | .catch(handleAjaxError); | |
| 77 | function loadSuccess(response) {
| |
| 78 | showInfo('Entities loaded.');
| |
| 79 | if (response.length == 0) {
| |
| 80 | $('#ads').text('The collection is empty.');
| |
| 81 | } | |
| 82 | else {
| |
| 83 | let table = $('<table>')
| |
| 84 | .append($('<tr>').append(
| |
| 85 | '<th>Title</th><th>Body</th><th>Author</th>,' + | |
| 86 | '<th>Date</th><th>Actions</th>')); | |
| 87 | for (let entity of response) {
| |
| 88 | let links = []; | |
| 89 | // action links | |
| 90 | if (entity._acl.creator == sessionStorage['userID']) {
| |
| 91 | let deleteLink = $('<a href="#">[Delete]</a>')
| |
| 92 | .click(function () {
| |
| 93 | deleteIt(entity) | |
| 94 | }); | |
| 95 | let editLink = $('<a href="#">[Edit]</a>')
| |
| 96 | .click(function () {
| |
| 97 | loadForEdit(entity) | |
| 98 | }); | |
| 99 | links = [deleteLink, ' ', editLink]; | |
| 100 | } | |
| 101 | ||
| 102 | table.append($('<tr>').append(
| |
| 103 | $('<td>').text(entity.title),
| |
| 104 | $('<td>').text(entity.body),
| |
| 105 | $('<td>').text(entity.author),
| |
| 106 | $('<td>').text(entity.date),
| |
| 107 | $('<td>').append(links)
| |
| 108 | )); | |
| 109 | } | |
| 110 | $('#ads').append(table);
| |
| 111 | } | |
| 112 | } | |
| 113 | } | |
| 114 | //------------------------- | |
| 115 | function showCreateView() {
| |
| 116 | $('#formCreateAd').trigger('reset');
| |
| 117 | showView('viewCreateAd');
| |
| 118 | } | |
| 119 | //-------------------------- | |
| 120 | function loadForEdit(entity) {
| |
| 121 | KinveyRequester.findEntityById(entity) | |
| 122 | .then(loadForEditSuccess) | |
| 123 | .catch(handleAjaxError); | |
| 124 | function loadForEditSuccess(entity) {
| |
| 125 | $('#formEditAd input[name=id]').val(entity._id);
| |
| 126 | $('#formEditAd input[name=title]').val(entity.title);
| |
| 127 | $('#formEditAd textarea[name=description]').val(entity.body);
| |
| 128 | $('#formEditAd input[name=datePublished]').val(entity.date);
| |
| 129 | showView('viewEditAd');
| |
| 130 | } | |
| 131 | } | |
| 132 | //-----Actions without a view------------------------------------------------------// | |
| 133 | ||
| 134 | function deleteIt(entity) {
| |
| 135 | KinveyRequester.deleteEntity(entity) | |
| 136 | .then(deleteSuccess) | |
| 137 | .catch(handleAjaxError); | |
| 138 | function deleteSuccess() {
| |
| 139 | showCollectionView(); | |
| 140 | showInfo('Entity deleted.');
| |
| 141 | } | |
| 142 | } | |
| 143 | //---------------------- | |
| 144 | function logout() {
| |
| 145 | sessionStorage.clear(); | |
| 146 | $('#loggedInUser').text("");
| |
| 147 | showHideMenuLinks(); | |
| 148 | showView('viewHome');
| |
| 149 | showInfo('Logout successful.');
| |
| 150 | } | |
| 151 | ||
| 152 | //-----Input forms-----------------------------------------------------------------// | |
| 153 | ||
| 154 | function login() {
| |
| 155 | event.preventDefault(); | |
| 156 | let username = $('#formLogin input[name=username]').val();
| |
| 157 | let password = $('#formLogin input[name=passwd]').val();
| |
| 158 | KinveyRequester.loginUser(username, password) | |
| 159 | .then(loginSuccess) | |
| 160 | .catch(handleAjaxError); | |
| 161 | ||
| 162 | function loginSuccess(userInfo) {
| |
| 163 | saveAuthInSession(userInfo); | |
| 164 | showHideMenuLinks(); | |
| 165 | showCollectionView(); | |
| 166 | showInfo('Login successful.');
| |
| 167 | } | |
| 168 | } | |
| 169 | //------------------- | |
| 170 | function register() {
| |
| 171 | event.preventDefault(); | |
| 172 | let username = $('#formRegister input[name=username]').val();
| |
| 173 | let password = $('#formRegister input[name=passwd]').val();
| |
| 174 | KinveyRequester.registerUser(username, password) | |
| 175 | .then(registerSuccess) | |
| 176 | .catch(handleAjaxError); | |
| 177 | ||
| 178 | function registerSuccess(userInfo) {
| |
| 179 | saveAuthInSession(userInfo); | |
| 180 | showHideMenuLinks(); | |
| 181 | showCollectionView(); | |
| 182 | showInfo('User registration successful.');
| |
| 183 | } | |
| 184 | } | |
| 185 | //------------------ | |
| 186 | function create() {
| |
| 187 | let title = $('#formCreateAd input[name=title]').val();
| |
| 188 | let body = $('#formCreateAd textarea[name=description]').val();
| |
| 189 | let author = sessionStorage.username; | |
| 190 | let date = $('#formCreateAd input[name=datePublished]').val();
| |
| 191 | KinveyRequester.createEntity(title, body, author, date) | |
| 192 | .then(createEntitySuccess) | |
| 193 | .catch(handleAjaxError); | |
| 194 | function createEntitySuccess() {
| |
| 195 | showCollectionView(); | |
| 196 | showInfo('Entity created.');
| |
| 197 | } | |
| 198 | } | |
| 199 | //----------------- | |
| 200 | function edit() {
| |
| 201 | let entity = $('#formEditAd input[name=id]').val();
| |
| 202 | console.log(entity); | |
| 203 | let title = $('#formEditAd input[name=title]').val();
| |
| 204 | console.log(title); | |
| 205 | let body = $('#formEditAd textarea[name=description]').val();
| |
| 206 | console.log(body); | |
| 207 | let author = sessionStorage.username; | |
| 208 | let date = $('#formEditAd input[name=datePublished]').val();
| |
| 209 | KinveyRequester.editEntity(entity, title, body, author, date) | |
| 210 | .then(editEntitySuccess) | |
| 211 | .catch(handleAjaxError); | |
| 212 | function editEntitySuccess() {
| |
| 213 | showCollectionView(); | |
| 214 | showInfo('Entity edited.');
| |
| 215 | } | |
| 216 | } | |
| 217 | ||
| 218 | //-----Save data in sessionStorage--------------------------------------------------// | |
| 219 | function saveAuthInSession(userInfo) {
| |
| 220 | let userAuth = userInfo._kmd.authtoken; | |
| 221 | sessionStorage.setItem('authToken', userAuth);
| |
| 222 | let userId = userInfo._id; | |
| 223 | sessionStorage.setItem('userID', userId);
| |
| 224 | let username = userInfo.username; | |
| 225 | sessionStorage.setItem('username', username);
| |
| 226 | $('#loggedInUser').text("Welcome, " + username + "!");
| |
| 227 | $('#loggedInUser').show();
| |
| 228 | } | |
| 229 | ||
| 230 | //-----Error and information messages--------------------------------------------------// | |
| 231 | function showInfo(message) {
| |
| 232 | $('#infoBox').text(message);
| |
| 233 | $('#infoBox').show();
| |
| 234 | setTimeout(function() {
| |
| 235 | $('#infoBox').fadeOut();
| |
| 236 | }, 3000); | |
| 237 | } | |
| 238 | function handleAjaxError(response) {
| |
| 239 | let errorMsg = JSON.stringify(response); | |
| 240 | if (response.readyState === 0) | |
| 241 | errorMsg = "Cannot connect due to network error."; | |
| 242 | if (response.responseJSON && | |
| 243 | response.responseJSON.description) | |
| 244 | errorMsg = response.responseJSON.description; | |
| 245 | showError(errorMsg); | |
| 246 | } | |
| 247 | function showError(errorMsg) {
| |
| 248 | $('#errorBox').text("Error: " + errorMsg);
| |
| 249 | $('#errorBox').show();
| |
| 250 | } | |
| 251 | } |