Revize 3817d6f3

reworked UploadFiles page to use extended App JS class

sources/src/main/webapp/js/uploadFiles.js

@@ -1 @@
-document.addEventListener('DOMContentLoaded', function() {
-	var privateDiagramList = document.getElementById('privateDiagramList');
-
-	privateDiagramList.querySelectorAll('.remove-diagram-button').forEach(function(button) {
-		button.addEventListener('click', removeDiagram);
-	});
-
-	document.addEventListener('imiger.userLoggedIn', function() {
-		loadPrivateDiagrams();
-	});
-
-	document.addEventListener('imiger.userLoggedOut', function() {
-		privateDiagramList.innerHTML = '';
-	});
-
-	async function loadPrivateDiagrams() {
-		try {
-			const data = await AJAX.getJSON(Constants.API.getPrivateDiagrams);
-
-			data.forEach(function(diagram) {
-				var openDiagramLink = document.createElement('a');
-				openDiagramLink.setAttribute('href', './graph?diagramId=' + diagram.id);
-				openDiagramLink.innerText = diagram.name;
-
-				var removeDiagramIcon = document.createElement('img');
-				removeDiagramIcon.setAttribute('src', 'images/button_cancel.png');
-				removeDiagramIcon.setAttribute('alt', 'odstranit');
-
-				var removeDiagramButton = document.createElement('button');
-				removeDiagramButton.setAttribute('class', 'remove-diagram-button');
-				removeDiagramButton.setAttribute('data-id', diagram.id);
-				removeDiagramButton.setAttribute('data-name', diagram.name);
-				removeDiagramButton.addEventListener('click', removeDiagram);
-				removeDiagramButton.appendChild(removeDiagramIcon);
-
-				var diagramListItem = document.createElement('li');
-				diagramListItem.appendChild(openDiagramLink);
-				diagramListItem.appendChild(removeDiagramButton);
-
-				privateDiagramList.appendChild(diagramListItem);
-			});
-		} catch (error) {
-			if (error instanceof HttpError) {
-				alert('Something went wrong.');
-			} else {
-				alert('Server has probably gone away.');
-			}
-		}
-	}
-
-	async function removeDiagram() {
-		let diagramId = this.getAttribute('data-id');
-		let diagramName = this.getAttribute('data-name');
-
-		if (confirm('Do you really want to delete ' + diagramName + '?')) {
-			try {
-				await AJAX.delete(Constants.API.removeDiagram + '?diagramId=' + diagramId);
-
-				location.reload(true);
-
-			} catch (error) {
-				if (error instanceof HttpError) {
-					switch (error.response.status) {
-						case 401:
-							alert('You are either not logged in or not an owner of this diagram.');
-							break;
-						default:
-							alert('Something went wrong.');
-					}
-				} else {
-					alert('Server has probably gone away.');
-				}
-			}
-		}
-	}
-});

sources/src/main/webapp/js/uploadFilesApp.js

@@ +1 @@
+/**
+ * Application running on the Upload files page.
+ * @constructor
+ */
+class UploadFilesApp extends App {
+	/**
+	 * Application startup method. It hooks event listeners to elements already present on the page and add listeners of auth events.
+	 */
+	run() {
+		console.log('running...');
+
+		let privateDiagramList = document.getElementById('privateDiagramList');
+		privateDiagramList.querySelectorAll('.remove-diagram-button').forEach(button => {
+			button.addEventListener('click', this._removeDiagram);
+		});
+
+		document.addEventListener('imiger.userLoggedIn', () => this._loadPrivateDiagrams());
+		document.addEventListener('imiger.userLoggedOut', () => privateDiagramList.innerHTML = '');
+	}
+
+	/**
+	 * Loads private diagrams of the logged in user and adds them to a list.
+	 */
+	async _loadPrivateDiagrams() {
+		try {
+			const data = await AJAX.getJSON(Constants.API.getPrivateDiagrams);
+
+			data.forEach(function(diagram) {
+				var openDiagramLink = document.createElement('a');
+				openDiagramLink.setAttribute('href', './graph?diagramId=' + diagram.id);
+				openDiagramLink.innerText = diagram.name;
+
+				var removeDiagramIcon = document.createElement('img');
+				removeDiagramIcon.setAttribute('src', 'images/button_cancel.png');
+				removeDiagramIcon.setAttribute('alt', 'odstranit');
+
+				var removeDiagramButton = document.createElement('button');
+				removeDiagramButton.setAttribute('class', 'remove-diagram-button');
+				removeDiagramButton.setAttribute('data-id', diagram.id);
+				removeDiagramButton.setAttribute('data-name', diagram.name);
+				removeDiagramButton.addEventListener('click', this._removeDiagram);
+				removeDiagramButton.appendChild(removeDiagramIcon);
+
+				var diagramListItem = document.createElement('li');
+				diagramListItem.appendChild(openDiagramLink);
+				diagramListItem.appendChild(removeDiagramButton);
+
+				privateDiagramList.appendChild(diagramListItem);
+			});
+		} catch (error) {
+			if (error instanceof HttpError) {
+				alert('Something went wrong.');
+			} else {
+				alert('Server has probably gone away.');
+			}
+		}
+	}
+
+	/**
+	 * Removes diagram from DB and reloads the page.
+	 */
+	async _removeDiagram() {
+		let diagramId = this.getAttribute('data-id');
+		let diagramName = this.getAttribute('data-name');
+
+		if (confirm('Do you really want to delete ' + diagramName + '?')) {
+			try {
+				await AJAX.delete(Constants.API.removeDiagram + '?diagramId=' + diagramId);
+
+				location.reload(true);
+
+			} catch (error) {
+				if (error instanceof HttpError) {
+					switch (error.response.status) {
+						case 401:
+							alert('You are either not logged in or not an owner of this diagram.');
+							break;
+						default:
+							alert('Something went wrong.');
+					}
+				} else {
+					alert('Server has probably gone away.');
+				}
+			}
+		}
+	}
+}

sources/src/main/webapp/uploadFiles.jsp

@@ -1 +1 @@
 <%@page contentType="text/html" pageEncoding="UTF-8"%>
 <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
 
-<c:set var="HOME_URL" value="${initParam.HOME_URL}"/>
+<c:set var="APP_NAME" value="IMiGEr"/>
+<c:set var="APP_HOME_URL" value="${initParam.HOME_URL}"/>
 <c:set var="isLoggedIn" value="${sessionScope.isLoggedIn}"/>
 <c:set var="user" value="${sessionScope.user}"/>
 
@@ -12 +13 @@
 
 		<link rel="stylesheet" href="css/main.css">
 
+		<script src="js/errors/abstractMethodError.js"></script>
 		<script src="js/errors/httpError.js"></script>
+
 		<script src="js/utils/ajax.js"></script>
+
 		<script src="js/constants.js"></script>
-		<script src="js/uploadFiles.js"></script>
+
+		<script src="js/app.js"></script>
+		<script src="js/uploadFilesApp.js"></script>
+
 		<script src="js/userMenu.js"></script>
 
-		<title>IMiGEr</title>
+		<title>${APP_NAME}</title>
 	</head>
 
 	<body class="${isLoggedIn ? 'loggedIn' : 'loggedOut'}">
@@ -61 +68 @@
 					<c:forEach items="${diagramsPrivate}" var="diagram">
 						<li>
 							<a href="${HOME_URL}graph?diagramId=${diagram.id}">${diagram.name}</a>
-							<button class="remove-diagram-button" data-id="${diagram.id}" data-name="${diagram.name}"><img src="images/button_cancel.png" alt="odstranit"></button>
+
+							<button class="button remove-diagram-button" data-id="${diagram.id}" data-name="${diagram.name}">
+								<img src="images/button_cancel.png" alt="odstranit">
+							</button>
 						</li>
 					</c:forEach>
 				</ul>
@@ -79 +89 @@
 				</ul>
 			</div>
 		</main>
+	
+		<script>
+			const app = new UploadFilesApp('${APP_NAME}', '${APP_HOME_URL}');
+
+			document.addEventListener('DOMContentLoaded', () => {
+				app.run();
+			});
+		</script>
 	</body>
 </html>