Revize 0ac9b68b
Přidáno uživatelem Pavel Fidranský před asi 6 roky(ů)
| sources/src/main/java/cz/zcu/kiv/offscreen/servlets/UploadFiles.java | ||
|---|---|---|
| 96 | 96 |
|
| 97 | 97 |
userDiagramList = diagram.getDiagramListByUserId(loggedUserId); |
| 98 | 98 |
} |
| 99 |
request.setAttribute("diagramNames", userDiagramList);
|
|
| 99 |
request.setAttribute("diagramsPrivate", userDiagramList);
|
|
| 100 | 100 |
|
| 101 | 101 |
List<Map<String, String>> publicDiagramList = diagram.getDiagramPublicList(); |
| 102 |
request.setAttribute("diagramPublic", publicDiagramList);
|
|
| 102 |
request.setAttribute("diagramsPublic", publicDiagramList);
|
|
| 103 | 103 |
|
| 104 | 104 |
// render |
| 105 | 105 |
RequestDispatcher rd = getServletContext().getRequestDispatcher("/uploadFiles.jsp");
|
| sources/src/main/webapp/css/main.css | ||
|---|---|---|
| 108 | 108 |
/* login popup */ |
| 109 | 109 |
|
| 110 | 110 |
.header .login_popup {
|
| 111 |
display: none; |
|
| 112 | 111 |
position: absolute; |
| 113 | 112 |
right: 4px; |
| 114 | 113 |
top: 45px; |
| ... | ... | |
| 136 | 135 |
/* register popup */ |
| 137 | 136 |
|
| 138 | 137 |
.header .register_popup {
|
| 139 |
display: none; |
|
| 140 | 138 |
position: absolute; |
| 141 | 139 |
right: 4px; |
| 142 | 140 |
top: 45px; |
| sources/src/main/webapp/js/legacy/diagram.js | ||
|---|---|---|
| 1 |
/** |
|
| 2 |
* Funkce zavola servlet, ktery odstrani diagram z databáze a ze serveru. |
|
| 3 |
* |
|
| 4 |
* @param id_diagram - id diagramu |
|
| 5 |
*/ |
|
| 6 |
function deleteDiagram(id_diagram) {
|
|
| 7 |
var really = confirm('Do you really want to remove diagram?');
|
|
| 8 |
if (really === false) {
|
|
| 9 |
return false; |
|
| 10 |
} |
|
| 11 |
|
|
| 12 |
$.ajax({
|
|
| 13 |
url: 'api/diagram?id_diagram=' + id_diagram, |
|
| 14 |
type: 'DELETE', |
|
| 15 |
success: function(result) {
|
|
| 16 |
$('#diagram_id_' + id_diagram).remove();
|
|
| 17 |
$('#public_diagram_id_' + id_diagram).remove();
|
|
| 18 |
}, |
|
| 19 |
}); |
|
| 20 |
} |
|
| 21 |
|
|
| 22 |
/** |
|
| 23 |
* Funkce nalezne vsechny komponenty zobrazene ve viewportu, ulozi je jako json a odesle servletu. |
|
| 24 |
* |
|
| 25 |
* @param id_diagram ID diagramu |
|
| 26 |
*/ |
|
| 27 |
function saveDiagram(id_diagram) {
|
|
| 28 |
var vertex_position = new Array(), |
|
| 29 |
vertex_position_counter = 0; |
|
| 30 |
|
|
| 31 |
$('g.vertex').each(function () {
|
|
| 32 |
vertex_position[vertex_position_counter] = ' {"id":"' + $(this).attr('id') + '" , ' +
|
|
| 33 |
' "transform":"' + $(this).attr('transform') + '" }';
|
|
| 34 |
vertex_position_counter++; |
|
| 35 |
}); |
|
| 36 |
|
|
| 37 |
vertex_position.join(',');
|
|
| 38 |
vertex_position = '{"vertices_position": [ ' + vertex_position + ' ]}';
|
|
| 39 |
|
|
| 40 |
$.post('api/diagram', {
|
|
| 41 |
id_diagram: id_diagram, |
|
| 42 |
vertices_position: vertex_position, |
|
| 43 |
}).done(function () {
|
|
| 44 |
alert("Diagram saved.");
|
|
| 45 |
}).fail(function () {
|
|
| 46 |
alert("Error - Diagram not saved!");
|
|
| 47 |
}); |
|
| 48 |
} |
|
| 49 |
|
|
| 50 |
/** |
|
| 51 |
* Funkce zobrazi vyskakovaci okno s potvrzenim |
|
| 52 |
* |
|
| 53 |
* @param diagramId ID diagramu |
|
| 54 |
* @returns {Boolean} true if reset confirmed
|
|
| 55 |
*/ |
|
| 56 |
function reset_diagram(diagramId) {
|
|
| 57 |
var really = confirm('Do you want to reset components position and refresh page?');
|
|
| 58 |
if (really === false) {
|
|
| 59 |
return false; |
|
| 60 |
} |
|
| 61 |
|
|
| 62 |
$.post('api/diagram', {
|
|
| 63 |
id_diagram: diagramId, |
|
| 64 |
vertices_position: "", |
|
| 65 |
}); |
|
| 66 |
|
|
| 67 |
return true; |
|
| 68 |
} |
|
| sources/src/main/webapp/js/legacy/user.js | ||
|---|---|---|
| 1 |
|
|
| 2 |
/** |
|
| 3 |
* Funkce odesle registracni formular |
|
| 4 |
*/ |
|
| 5 |
function send_register() {
|
|
| 6 |
|
|
| 7 |
// var viewport_html = $('#viewport').html();
|
|
| 8 |
// var rightpanel_html = $('#rightPanel').html();
|
|
| 9 |
|
|
| 10 |
$.post('api/register', { user_name: $('#user_name').val(),
|
|
| 11 |
user_email: $('#user_email').val(),
|
|
| 12 |
user_nick: $('#user_nick').val(),
|
|
| 13 |
user_password: $('#user_password').val(),
|
|
| 14 |
user_password_2: $('#user_password_2').val()},
|
|
| 15 |
function(data){
|
|
| 16 |
if (data.ok != null && data.ok == "ok"){
|
|
| 17 |
$('.register_popup .err_msg').html("");
|
|
| 18 |
$('.register_popup .err_msg').hide();
|
|
| 19 |
|
|
| 20 |
$('.register_popup').hide();
|
|
| 21 |
$('.login_popup').show();
|
|
| 22 |
var user_login_name = $('#user_nick').val();
|
|
| 23 |
clear_register_form(); |
|
| 24 |
$('.login_popup .not_msg').html("User registered.<br />Please login.");
|
|
| 25 |
$('#login_name').val(user_login_name);
|
|
| 26 |
|
|
| 27 |
}else if (data.err != null){
|
|
| 28 |
$('.register_popup .err_msg').html(data.err.replace(/\./g,".<br />"));
|
|
| 29 |
} |
|
| 30 |
}); |
|
| 31 |
} |
|
| 32 |
|
|
| 33 |
/** |
|
| 34 |
* Vycisti registracni formular |
|
| 35 |
*/ |
|
| 36 |
function clear_register_form(){
|
|
| 37 |
$('#user_name').val('');
|
|
| 38 |
$('#user_email').val('');
|
|
| 39 |
$('#user_nick').val('');
|
|
| 40 |
$('#user_password').val('');
|
|
| 41 |
$('#user_password_2').val('');
|
|
| 42 |
} |
|
| sources/src/main/webapp/js/userMenu.js | ||
|---|---|---|
| 1 |
document.addEventListener('DOMContentLoaded', function() {
|
|
| 2 |
var toggleLoginPopupButton = document.getElementById('toggleLoginPopupButton');
|
|
| 3 |
var loginPopup = document.getElementById('loginPopup');
|
|
| 4 |
|
|
| 5 |
var toggleRegisterPopupButton = document.getElementById('toggleRegisterPopupButton');
|
|
| 6 |
var registerPopup = document.getElementById('registerPopup');
|
|
| 7 |
|
|
| 8 |
if (toggleLoginPopupButton) {
|
|
| 9 |
toggleLoginPopupButton.addEventListener('click', function() {
|
|
| 10 |
loginPopup.classList.toggle('hidden');
|
|
| 11 |
}); |
|
| 12 |
} |
|
| 13 |
|
|
| 14 |
if (toggleRegisterPopupButton) {
|
|
| 15 |
toggleRegisterPopupButton.addEventListener('click', function() {
|
|
| 16 |
registerPopup.classList.toggle('hidden');
|
|
| 17 |
}); |
|
| 18 |
} |
|
| 19 |
}); |
|
| sources/src/main/webapp/logged_user.jsp | ||
|---|---|---|
| 1 |
<% if ( request.getSession().getAttribute("logged_user") == "1" ){ %>
|
|
| 2 |
|
|
| 3 |
<div class="login_box"> |
|
| 4 |
<%= request.getSession().getAttribute("logged_user_nick") %> <a href="log-out">Logout</a>
|
|
| 5 |
</div> |
|
| 6 |
|
|
| 7 |
<% } else { %>
|
|
| 8 |
|
|
| 9 |
<% if ( request.getSession().getAttribute("logged_user_err") != null && request.getSession().getAttribute("logged_user_err").toString() == "1") { %>
|
|
| 10 |
<script type="text/javascript"> |
|
| 11 |
$(document).ready(function() {
|
|
| 12 |
$('.login_popup .err_msg').html("Incorrect Login name or Password.");
|
|
| 13 |
$('#login_name').val('<%= request.getSession().getAttribute("logged_user_err_name") %>');
|
|
| 14 |
$('.login_popup').show();
|
|
| 15 |
}); |
|
| 16 |
|
|
| 17 |
</script> |
|
| 18 |
<% |
|
| 19 |
request.getSession().setAttribute("logged_user_err", null);
|
|
| 20 |
request.getSession().setAttribute("logged_user_err_name", null);
|
|
| 21 |
} %> |
|
| 22 |
<div class="login_box"> |
|
| 23 |
<a href="#" onclick="$('.register_popup').hide(); $('.login_popup').toggle()">Login</a>
|
|
| 24 |
<a href="#" onclick="$('.login_popup').hide(); $('.register_popup').toggle()">Register</a>
|
|
| 25 |
</div> |
|
| 26 |
<div class="login_popup"> |
|
| 27 |
<form action="log-in" method="post"> |
|
| 28 |
<div class="err_msg"></div> |
|
| 29 |
<div class="not_msg"></div> |
|
| 30 |
<table> |
|
| 31 |
<tr> |
|
| 32 |
<td>Login name:</td> |
|
| 33 |
<td><input type="text" name="login_name" id="login_name"></td> |
|
| 34 |
</tr> |
|
| 35 |
<tr> |
|
| 36 |
<td>Password:</td> |
|
| 37 |
<td><input type="password" name="password" id="login_password"></td> |
|
| 38 |
</tr> |
|
| 39 |
<tr> |
|
| 40 |
<td></td> |
|
| 41 |
<td><input type="submit" value="Login"></td> |
|
| 42 |
</tr> |
|
| 43 |
</table> |
|
| 44 |
</form> |
|
| 45 |
</div> |
|
| 46 |
<div class="register_popup"> |
|
| 47 |
<form action="api/register" method="post"> |
|
| 48 |
<div class="err_msg"></div> |
|
| 49 |
<div class="not_msg"></div> |
|
| 50 |
<table> |
|
| 51 |
<tr> |
|
| 52 |
<td>Name:</td> |
|
| 53 |
<td><input type="text" name="user_name" id="user_name" ></td> |
|
| 54 |
</tr> |
|
| 55 |
<tr> |
|
| 56 |
<td>E-mail:</td> |
|
| 57 |
<td><input type="text" name="user_email" id="user_email"></td> |
|
| 58 |
</tr> |
|
| 59 |
<tr> |
|
| 60 |
<td>Login name:</td> |
|
| 61 |
<td><input type="text" name="user_nick" id="user_nick"></td> |
|
| 62 |
</tr> |
|
| 63 |
<tr> |
|
| 64 |
<td>Password:</td> |
|
| 65 |
<td><input type="password" name="user_password" id="user_password"></td> |
|
| 66 |
</tr> |
|
| 67 |
<tr> |
|
| 68 |
<td>Password again:</td> |
|
| 69 |
<td><input type="password" name="user_password_2" id="user_password_2"></td> |
|
| 70 |
</tr> |
|
| 71 |
<tr> |
|
| 72 |
<td></td> |
|
| 73 |
<td><input type="button" value="Register" onclick="send_register(); return false;"></td> |
|
| 74 |
</tr> |
|
| 75 |
</table> |
|
| 76 |
</form> |
|
| 77 |
</div> |
|
| 78 |
|
|
| 79 |
<% } %> |
|
| sources/src/main/webapp/showGraph.jsp | ||
|---|---|---|
| 88 | 88 |
|
| 89 | 89 |
<h2 class="header-title">Interactive Multimodal Graph Explorer</h2> |
| 90 | 90 |
|
| 91 |
<jsp:include page="logged_user.jsp" />
|
|
| 91 |
<%@ include file="userMenu.jsp" %>
|
|
| 92 | 92 |
|
| 93 | 93 |
<nav class="navbar" id="navigation"> |
| 94 | 94 |
<ul> |
| sources/src/main/webapp/uploadFiles.jsp | ||
|---|---|---|
| 9 | 9 |
<link rel="stylesheet" href="css/main.css"> |
| 10 | 10 |
|
| 11 | 11 |
<script src="js/libs/jquery-1.8.3.js"></script> |
| 12 |
<script src="old/js/diagram.js"></script> |
|
| 13 |
<script src="old/js/user.js"></script> |
|
| 12 |
<script src="js/legacy/diagram.js"></script> |
|
| 13 |
<script src="js/legacy/user.js"></script> |
|
| 14 |
<script src="js/userMenu.js"></script> |
|
| 14 | 15 |
|
| 15 | 16 |
<title>IMiGEr</title> |
| 16 | 17 |
</head> |
| 17 | 18 |
|
| 18 | 19 |
<body> |
| 19 |
<div class="wrapper"> |
|
| 20 |
<header class="header" id="header"> |
|
| 21 |
<img src="images/logo.png" class="header-logo" alt="logo of University of West Bohemia" title="University of West Bohemia"> |
|
| 22 |
|
|
| 23 |
<h2 class="header-title">Interactive Multimodal Graph Explorer</h2> |
|
| 24 |
|
|
| 25 |
<jsp:include page="logged_user.jsp" /> |
|
| 26 |
|
|
| 27 |
<nav class="navbar" id="navigation"></nav> |
|
| 28 |
</header> |
|
| 29 |
|
|
| 30 |
<main class="upload-content"> |
|
| 31 |
<jsp:include page="logged_user_menu.jsp" /> |
|
| 32 |
|
|
| 33 |
<div class="upload-forms"> |
|
| 34 |
<c:if test="${not empty errorMessage}">
|
|
| 35 |
<p class="errorMessage">${errorMessage}</p>
|
|
| 36 |
</c:if> |
|
| 37 |
|
|
| 38 |
<h5>Upload SPADe data:</h5> |
|
| 39 |
|
|
| 40 |
<form action="/" method="post" enctype="multipart/form-data"> |
|
| 41 |
<div class="form-field"> |
|
| 42 |
<input type="file" name="file"> |
|
| 43 |
</div> |
|
| 44 |
|
|
| 45 |
<hr class="verticalSeparator"> |
|
| 46 |
|
|
| 47 |
<input type="submit" value="Start visualization"> |
|
| 48 |
</form> |
|
| 49 |
|
|
| 50 |
<%--<c:if test="${not empty componentNames}">
|
|
| 51 |
<hr class="verticalSeparator"> |
|
| 52 |
|
|
| 53 |
<h3>Uploaded components:</h3> |
|
| 54 |
|
|
| 55 |
<ul id="uploadedComponent"> |
|
| 56 |
<% |
|
| 57 |
if (request.getParameter("diagram_id") == null) {
|
|
| 58 |
request.setAttribute("url_diagram_id", "");
|
|
| 59 |
%> |
|
| 60 |
<li id="deleteAll">Delete all <a href="delete-components"><img src="images/button_cancel.png" alt="delete" class="imgDelete"/></a></li> |
|
| 61 |
<% |
|
| 62 |
} else {
|
|
| 63 |
request.setAttribute("url_diagram_id", "&diagram_id="+ request.getParameter("diagram_id") + "&diagram_hash="+ request.getParameter("diagram_hash"));
|
|
| 64 |
} |
|
| 65 |
%> |
|
| 66 |
<c:forEach items="${componentNames}" var="componentName">
|
|
| 67 |
<li id="${componentName}">${componentName}
|
|
| 68 |
<% if (request.getParameter("diagram_id") == null || ( request.getSession().getAttribute("logged_user_id") != null &&
|
|
| 69 |
request.getAttribute("diagram_user_id") != null &&
|
|
| 70 |
request.getAttribute("diagram_user_id").toString().compareTo(request.getSession().getAttribute("logged_user_id").toString()) == 0 )) { %>
|
|
| 71 |
<a href="delete-component?name=${componentName}<%= request.getAttribute("url_diagram_id") %>"><img src="images/button_cancel.png" alt="delete" class="imgDelete"/></a></li>
|
|
| 72 |
<% } %> |
|
| 73 |
</c:forEach> |
|
| 74 |
</ul> |
|
| 75 |
</c:if> |
|
| 76 |
<hr class="verticalSeparator"> |
|
| 77 |
|
|
| 78 |
<form name="diagramForm" action="graph" method="post"> |
|
| 79 |
<input type="submit" value="Start visualization" ${not empty componentNames ? "" : "disabled='disabled'"}>
|
|
| 80 |
</form> |
|
| 81 |
--%> |
|
| 20 |
<c:set var="HOME_URL" value="${initParam.HOME_URL}"/>
|
|
| 21 |
<c:set var="isLoggedIn" value="${sessionScope.isLoggedIn}"/>
|
|
| 22 |
<c:set var="user" value="${sessionScope.user}"/>
|
|
| 23 |
|
|
| 24 |
<header class="header" id="header"> |
|
| 25 |
<img src="images/logo.png" class="header-logo" alt="logo of University of West Bohemia" title="University of West Bohemia"> |
|
| 26 |
|
|
| 27 |
<h2 class="header-title">Interactive Multimodal Graph Explorer</h2> |
|
| 28 |
|
|
| 29 |
<%@ include file="userMenu.jsp" %> |
|
| 30 |
</header> |
|
| 31 |
|
|
| 32 |
<main class="upload-content"> |
|
| 33 |
<div class="upload-forms"> |
|
| 34 |
<c:if test="${not empty errorMessage}">
|
|
| 35 |
<p class="alert">${errorMessage}</p>
|
|
| 36 |
</c:if> |
|
| 37 |
|
|
| 38 |
<strong>Upload SPADe data:</strong> |
|
| 39 |
|
|
| 40 |
<form method="post" enctype="multipart/form-data"> |
|
| 41 |
<div class="form-field"> |
|
| 42 |
<input type="file" name="file"> |
|
| 43 |
</div> |
|
| 44 |
|
|
| 45 |
<input type="submit" value="Start visualization"> |
|
| 46 |
</form> |
|
| 47 |
</div> |
|
| 48 |
|
|
| 49 |
<c:if test="${isLoggedIn}">
|
|
| 50 |
<div class="diagrams-menu"> |
|
| 51 |
<h3>My diagrams</h3> |
|
| 52 |
|
|
| 53 |
<ul> |
|
| 54 |
<c:forEach items="${diagramsPrivate}" var="diagram">
|
|
| 55 |
<li> |
|
| 56 |
<a href="${HOME_URL}graph?diagramId=${diagram.id}">${diagram.name}</a>
|
|
| 57 |
<button onclick="return deleteDiagram(${diagram.id});"><img src="images/button_cancel.png" alt="odstranit"></a>
|
|
| 58 |
</li> |
|
| 59 |
</c:forEach> |
|
| 60 |
</ul> |
|
| 82 | 61 |
</div> |
| 83 |
</main> |
|
| 84 |
</div> |
|
| 62 |
</c:if> |
|
| 63 |
|
|
| 64 |
<div class="diagrams-menu"> |
|
| 65 |
<h3>Public diagrams</h3> |
|
| 66 |
|
|
| 67 |
<ul> |
|
| 68 |
<c:forEach items="${diagramsPublic}" var="diagram">
|
|
| 69 |
<li> |
|
| 70 |
<a href="${HOME_URL}graph?diagramId=${diagram.id}">${diagram.name}</a>
|
|
| 71 |
</li> |
|
| 72 |
</c:forEach> |
|
| 73 |
</ul> |
|
| 74 |
</div> |
|
| 75 |
</main> |
|
| 85 | 76 |
</body> |
| 86 | 77 |
</html> |
| sources/src/main/webapp/userMenu.jsp | ||
|---|---|---|
| 1 |
<c:if test="${isLoggedIn}">
|
|
| 2 |
<div class="login_box"> |
|
| 3 |
${user.username} <a href="api/log-out" id="logoutButton">Log out</a>
|
|
| 4 |
</div> |
|
| 5 |
</c:if> |
|
| 6 |
|
|
| 7 |
<c:if test="${!isLoggedIn}">
|
|
| 8 |
<div class="login_box"> |
|
| 9 |
<button id="toggleLoginPopupButton">Log in</a> |
|
| 10 |
<button id="toggleRegisterPopupButton">Register</a> |
|
| 11 |
</div> |
|
| 12 |
</c:if> |
|
| 13 |
|
|
| 14 |
<div class="login_popup hidden" id="loginPopup"> |
|
| 15 |
<form action="api/log-in" method="post" name="loginForm"> |
|
| 16 |
<div class="err_msg"></div> |
|
| 17 |
<div class="not_msg"></div> |
|
| 18 |
<table> |
|
| 19 |
<tr> |
|
| 20 |
<td> |
|
| 21 |
Login name: |
|
| 22 |
</td> |
|
| 23 |
<td> |
|
| 24 |
<input type="text" name="username"> |
|
| 25 |
</td> |
|
| 26 |
</tr> |
|
| 27 |
<tr> |
|
| 28 |
<td> |
|
| 29 |
Password: |
|
| 30 |
</td> |
|
| 31 |
<td> |
|
| 32 |
<input type="password" name="password"> |
|
| 33 |
</td> |
|
| 34 |
</tr> |
|
| 35 |
<tr> |
|
| 36 |
<td></td> |
|
| 37 |
<td> |
|
| 38 |
<button type="submit">Login</button> |
|
| 39 |
</td> |
|
| 40 |
</tr> |
|
| 41 |
</table> |
|
| 42 |
</form> |
|
| 43 |
</div> |
|
| 44 |
|
|
| 45 |
<div class="register_popup hidden" id="registerPopup"> |
|
| 46 |
<form action="api/register" method="post" name="registerForm"> |
|
| 47 |
<table> |
|
| 48 |
<tr> |
|
| 49 |
<td> |
|
| 50 |
Name: |
|
| 51 |
</td> |
|
| 52 |
<td> |
|
| 53 |
<input type="text" name="user_name" id="user_name"> |
|
| 54 |
</td> |
|
| 55 |
</tr> |
|
| 56 |
<tr> |
|
| 57 |
<td> |
|
| 58 |
E-mail: |
|
| 59 |
</td> |
|
| 60 |
<td> |
|
| 61 |
<input type="text" name="user_email" id="user_email"> |
|
| 62 |
</td> |
|
| 63 |
</tr> |
|
| 64 |
<tr> |
|
| 65 |
<td> |
|
| 66 |
Login name: |
|
| 67 |
</td> |
|
| 68 |
<td> |
|
| 69 |
<input type="text" name="user_nick" id="user_nick"> |
|
| 70 |
</td> |
|
| 71 |
</tr> |
|
| 72 |
<tr> |
|
| 73 |
<td> |
|
| 74 |
Password: |
|
| 75 |
</td> |
|
| 76 |
<td> |
|
| 77 |
<input type="password" name="user_password" id="user_password"> |
|
| 78 |
</td> |
|
| 79 |
</tr> |
|
| 80 |
<tr> |
|
| 81 |
<td> |
|
| 82 |
Password again: |
|
| 83 |
</td> |
|
| 84 |
<td> |
|
| 85 |
<input type="password" name="user_password_2" id="user_password_2"> |
|
| 86 |
</td> |
|
| 87 |
</tr> |
|
| 88 |
<tr> |
|
| 89 |
<td></td> |
|
| 90 |
<td> |
|
| 91 |
<button type="submit">Register</button> |
|
| 92 |
</td> |
|
| 93 |
</tr> |
|
| 94 |
</table> |
|
| 95 |
</form> |
|
| 96 |
</div> |
|
Také k dispozici: Unified diff
reworked upload screen