Skip to content

Commit 3f46d73

Browse files
committed
Added Nakov's Bookmarks exam prep (simple implementation, no framework)
1 parent d234663 commit 3f46d73

File tree

7 files changed

+9584
-0
lines changed

7 files changed

+9584
-0
lines changed
Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
body>header, body>footer {
2+
margin: 10px 0px;
3+
background: orange;
4+
text-align: center;
5+
color: white;
6+
}
7+
8+
body>header a {
9+
display: none;
10+
float: right;
11+
}
12+
13+
#bookmarksView li a {
14+
display: block;
15+
}
Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<!DOCTYPE html>
2+
3+
<html>
4+
5+
<head lang="en">
6+
<meta charset="UTF-8">
7+
<title>Bookmarks</title>
8+
<link rel="stylesheet" href="bookmarks.css" />
9+
<script src="scripts/libs/jquery-2.1.1.js"></script>
10+
<script src="scripts/libs/jquery.noty.packaged.min.js"></script>
11+
<script src="scripts/ajaxRequester.js"></script>
12+
<script src="scripts/userSession.js"></script>
13+
<script src="scripts/app.js"></script>
14+
</head>
15+
16+
<body>
17+
<header id="header">
18+
<div>
19+
Bookmarks
20+
<span></span>
21+
<a href="#" id="btnLogout">Logout</a>
22+
</div>
23+
</header>
24+
<main>
25+
<div id="homeView">
26+
<a href="#" id="btnShowLoginView">Login</a>
27+
<a href="#" id="btnShowRegisterView">Register</a>
28+
</div>
29+
30+
<div id="loginView">
31+
<div>Login</div>
32+
Username: <input type="text" id="txtLoginUsername" /><br/>
33+
Password: <input type="password" id="txtLoginPassword" /><br/>
34+
<a href="#" id="btnLoginLogin">Login</a>
35+
<a href="#" id="btnLoginRegister">Register</a>
36+
</div>
37+
38+
<div id="registerView">
39+
<div>Register</div>
40+
Username: <input type="text" id="txtRegisterUsername" /><br/>
41+
Password: <input type="password" id="txtRegisterPassword" /><br/>
42+
<a href="#" id="btnRegister">Register</a>
43+
</div>
44+
45+
<div id="bookmarksView">
46+
<ul>
47+
</ul>
48+
<div>
49+
<div>New Bookmark</div>
50+
Title: <input type="text" id="txtTitle" /><br>
51+
Url: <input type="url" id="txtUrl" /><br>
52+
<a href="#" id="btnAddBookmark">Add</a>
53+
</div>
54+
</div>
55+
</main>
56+
<footer>
57+
<div>&copy; 2014 by SoftUni Foundation, No Rights Reserved</div>
58+
</footer>
59+
</body>
60+
61+
</html>
Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
'use strict';
2+
3+
var ajaxRequester = (function() {
4+
var baseUrl = "https://api.parse.com/1/";
5+
6+
var headers =
7+
{
8+
"X-Parse-Application-Id": "C0NsUSFtKPOq4TaGeqMf62XI6IG7HXydrpkjvSQX",
9+
"X-Parse-REST-API-Key": "0SL1EbtpvbP2QajiY0ENXKAjQkYLOmlrkgbNnBgN"
10+
};
11+
12+
function login(username, password, success, error) {
13+
jQuery.ajax({
14+
method: "GET",
15+
headers: headers,
16+
url: baseUrl + "login",
17+
data: {username: username, password: password},
18+
success: success,
19+
error: error
20+
});
21+
}
22+
23+
function register(username, password, success, error) {
24+
jQuery.ajax({
25+
method: "POST",
26+
headers: headers,
27+
url: baseUrl + "users",
28+
data: JSON.stringify({username: username, password: password}),
29+
success: success,
30+
error: error
31+
});
32+
}
33+
34+
function getHeadersWithSessionToken(sessionToken) {
35+
var headersWithToken = JSON.parse(JSON.stringify(headers));
36+
headersWithToken['X-Parse-Session-Token'] = sessionToken;
37+
return headersWithToken;
38+
}
39+
40+
function getBookmarks(sessionToken, success, error) {
41+
var headersWithToken = getHeadersWithSessionToken(sessionToken);
42+
jQuery.ajax({
43+
method: "GET",
44+
headers: headersWithToken,
45+
url: baseUrl + "classes/Bookmark",
46+
success: success,
47+
error: error
48+
});
49+
}
50+
51+
function createBookmark(title, url, userId, success, error) {
52+
var bookmark = {title: title, url: url, ACL : {}};
53+
bookmark.ACL[userId] = {"write": true, "read": true};
54+
jQuery.ajax({
55+
method: "POST",
56+
headers: headers,
57+
url: baseUrl + "classes/Bookmark",
58+
data: JSON.stringify(bookmark),
59+
success: success,
60+
error: error
61+
});
62+
}
63+
64+
function deleteBookmark(sessionToken, bookmarkId, success, error) {
65+
var headersWithToken = getHeadersWithSessionToken(sessionToken);
66+
jQuery.ajax({
67+
method: "DELETE",
68+
headers: headersWithToken,
69+
url: baseUrl + "classes/Bookmark/" + bookmarkId,
70+
success: success,
71+
error: error
72+
});
73+
}
74+
75+
return {
76+
login: login,
77+
register: register,
78+
getBookmarks: getBookmarks,
79+
createBookmark: createBookmark,
80+
deleteBookmark: deleteBookmark
81+
};
82+
})();
Lines changed: 210 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,210 @@
1+
'use strict';
2+
3+
(function() {
4+
5+
$(function() {
6+
registerEventHandlers();
7+
8+
var currentUser = userSession.getCurrentUser();
9+
if (currentUser) {
10+
showBookmarksView()
11+
} else {
12+
showHomeView();
13+
}
14+
});
15+
16+
function registerEventHandlers() {
17+
$("#btnShowLoginView").click(showLoginView);
18+
$("#btnLoginRegister").click(showRegisterView);
19+
$("#btnShowRegisterView").click(showRegisterView);
20+
$("#btnLoginLogin").click(loginClicked);
21+
$("#btnRegister").click(registerClicked);
22+
$("#btnLogout").click(logoutClicked);
23+
$("#btnAddBookmark").click(addBookmarkClicked);
24+
}
25+
26+
function showHomeView() {
27+
$("main > *").hide();
28+
$("#homeView").show();
29+
var currentUser = userSession.getCurrentUser();
30+
if (! currentUser) {
31+
$("#header span").text("");
32+
$("#header a").hide();
33+
}
34+
}
35+
36+
function showLoginView() {
37+
$("main > *").hide();
38+
$("#loginView").show();
39+
$("#txtLoginUsername").val('');
40+
$("#txtLoginPassword").val('');
41+
}
42+
43+
function loginClicked() {
44+
var username = $("#txtLoginUsername").val();
45+
var password = $("#txtLoginPassword").val();
46+
ajaxRequester.login(username, password, authSuccess, loginError);
47+
}
48+
49+
function authSuccess(data) {
50+
userSession.login(data);
51+
showBookmarksView();
52+
}
53+
54+
function loginError(error) {
55+
showAjaxError("Login failed", error);
56+
}
57+
58+
function logoutClicked() {
59+
userSession.logout();
60+
showHomeView();
61+
}
62+
63+
function showRegisterView() {
64+
$("main > *").hide();
65+
$("#registerView").show();
66+
$("#txtRegisterUsername").val('');
67+
$("#txtRegisterPassword").val('');
68+
}
69+
70+
function registerClicked() {
71+
var username = $("#txtRegisterUsername").val();
72+
var password = $("#txtRegisterPassword").val();
73+
ajaxRequester.register(username, password,
74+
function(data) {
75+
data.username = username;
76+
authSuccess(data);
77+
},
78+
registerError);
79+
}
80+
81+
function registerError(error) {
82+
showAjaxError("Register failed", error);
83+
}
84+
85+
function showBookmarksView() {
86+
var currentUser = userSession.getCurrentUser();
87+
if (currentUser) {
88+
$("#header span").text(" - " + currentUser.username);
89+
$("#header a").show();
90+
91+
$("main > *").hide();
92+
var sessionToken = currentUser.sessionToken;
93+
ajaxRequester.getBookmarks(sessionToken, loadBookmarksSuccess, loadBookmarksError);
94+
} else {
95+
showHomeView();
96+
}
97+
}
98+
99+
function loadBookmarksSuccess(data) {
100+
var $bookmarksUl = $("#bookmarksView ul");
101+
$bookmarksUl.html('');
102+
for (var b in data.results) {
103+
var bookmark = data.results[b];
104+
var $bookmarkLi = $("<li>");
105+
$bookmarkLi.data("bookmark", bookmark);
106+
107+
var $title = $("<div class='title'>");
108+
$title.text(bookmark.title);
109+
$bookmarkLi.append($title);
110+
111+
var $url = $("<a class='url'>");
112+
$url.text(bookmark.url);
113+
$url.attr("href", bookmark.url);
114+
$bookmarkLi.append($url);
115+
116+
var $deleteButton = $('<a href="#">Delete</a>');
117+
$deleteButton.click(deleteBookmarkButtonClicked);
118+
$bookmarkLi.append($deleteButton);
119+
120+
$bookmarksUl.append($bookmarkLi);
121+
}
122+
123+
$("#txtTitle").val('');
124+
$("#txtUrl").val('');
125+
126+
$("#bookmarksView").show();
127+
}
128+
129+
function loadBookmarksError(error) {
130+
showErrorMessage("Bookmarks load failed.");
131+
}
132+
133+
function addBookmarkClicked() {
134+
var title = $("#txtTitle").val();
135+
var url = $("#txtUrl").val();
136+
var currentUser = userSession.getCurrentUser();
137+
ajaxRequester.createBookmark(title, url, currentUser.objectId,
138+
showBookmarksView, addBookmarkError);
139+
}
140+
141+
function addBookmarkError(error) {
142+
showErrorMessage("Bookmarks create failed.");
143+
}
144+
145+
function deleteBookmarkButtonClicked() {
146+
var bookmark = $(this).parent().data('bookmark');
147+
var currentUser = userSession.getCurrentUser();
148+
var sessionToken = currentUser.sessionToken;
149+
150+
noty(
151+
{
152+
text: "Delete this bookmark?",
153+
type: 'confirm',
154+
layout: 'topCenter',
155+
buttons: [
156+
{
157+
text : "Yes",
158+
onClick : function($noty) {
159+
deleteBookmark(sessionToken, bookmark);
160+
$noty.close();
161+
}
162+
},
163+
{
164+
text : "Cancel",
165+
onClick : function($noty) {
166+
$noty.close();
167+
}
168+
}
169+
]}
170+
);
171+
}
172+
173+
function deleteBookmark(sessionToken, bookmark) {
174+
ajaxRequester.deleteBookmark(
175+
sessionToken, bookmark.objectId,
176+
showBookmarksView, deleteBookmarkError);
177+
}
178+
179+
function deleteBookmarkError(error) {
180+
showErrorMessage("Delete bookmark failed.");
181+
}
182+
183+
function showAjaxError(msg, error) {
184+
var errMsg = error.responseJSON;
185+
if (errMsg && errMsg.error) {
186+
showErrorMessage(msg + ": " + errMsg.error);
187+
} else {
188+
showErrorMessage(msg + ".");
189+
}
190+
}
191+
192+
function showInfoMessage(msg) {
193+
noty({
194+
text: msg,
195+
type: 'info',
196+
layout: 'topCenter',
197+
timeout: 5000}
198+
);
199+
}
200+
201+
function showErrorMessage(msg) {
202+
noty({
203+
text: msg,
204+
type: 'error',
205+
layout: 'topCenter',
206+
timeout: 5000}
207+
);
208+
}
209+
210+
})();

0 commit comments

Comments
 (0)