Skip to content

Commit

Permalink
Merge pull request #58 from eurohlam/web-profile
Browse files Browse the repository at this point in the history 
UI improvements
  • Loading branch information
@eurohlam
eurohlam authored Mar 8, 2020
2 parents 56e8f12 + 642cfe6 commit 9363181
Show file tree
Hide file tree
Showing 6 changed files with 132 additions and 91 deletions.
12 changes: 10 additions & 2 deletions rss-2-kindle-web-test/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ Before running tests we need to bring up environment for testing. The easiest wa

docker-compose build
docker-compose up
After that we can run automated tests
* go to testing module directory

Expand All @@ -30,7 +30,15 @@ After that we can run automated tests
By default tests run in headless mode. If you want to see the browser window then use enable-head profile

mvn test -P docker-env -P enable-head
mvn test -P docker-env -P enable-head
There might be a problem that selenium browser driver is not able to resolve URLs like `https://web.localhost`.
If so, you just need to add following mappings into `hosts` file (for linux systems `/etc/hosts`)

127.0.0.1 web.localhost
127.0.0.1 api.localhost
127.0.0.1 smtp.localhost

## How to run test report

Expand Down
2 changes: 1 addition & 1 deletion rss-2-kindle-web-test/pom.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@
<id>docker-env</id>
<properties>
<maven.test.skip>false</maven.test.skip>
<selenide.baseUrl>https://localhost/r2kweb</selenide.baseUrl>
<selenide.baseUrl>https://web.localhost/r2kweb</selenide.baseUrl>
<selenide.headless>true</selenide.headless>
<selenide.screenshots>true</selenide.screenshots>
<selenide.holdBrowserOpen>false</selenide.holdBrowserOpen>
Expand Down
27 changes: 21 additions & 6 deletions rss-2-kindle-web/src/main/webapp/jsp/admin/users.jsp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
type="text/css">

<!-- Theme CSS -->
<link href="../../css/freelancer.css" rel="stylesheet">
<link href="../../css/freelancer.min.css" rel="stylesheet">

<!-- Custom css -->
<link href="../../css/simple-sidebar.css" rel="stylesheet">
Expand Down Expand Up @@ -169,28 +169,43 @@
<form id="users_form" action="" method="post">
<div class="btn-toolbar bg-light" role="toolbar">
<div class="btn-group" role="group">
<button id="unlock_btn" class="navbar-brand btn-outline-primary" type="submit" data-toggle="tooltip" data-placement="top" title="Unlock users">
<button id="unlock_btn" class="navbar-brand btn-outline-primary" type="submit"
data-toggle="tooltip" data-placement="top" title="Unlock users">
<i class="fas fa-user-cog fa-2x"></i>
</button>
<button id="lock_btn" class="navbar-brand btn-outline-warning" type="submit" data-toggle="tooltip" data-placement="top" title="Lock users">
<button id="lock_btn" class="navbar-brand btn-outline-warning" type="submit"
data-toggle="tooltip" data-placement="top" title="Lock users">
<i class="fas fa-user-lock fa-2x"></i>
</button>
</div>
<div class="btn-group" role="group">
<button id="remove_btn" class="navbar-brand btn-outline-danger" type="submit" data-toggle="tooltip" data-placement="top" title="Remove users">
<button id="remove_btn" class="navbar-brand btn-outline-danger" type="submit"
data-toggle="tooltip" data-placement="top" title="Remove users">
<i class="fas fa-user-slash fa-2x"></i>
</button>
</div>
</div>
<div id="alerts_panel"></div>
<div id="all_users" class="table-responsive-sm"></div>
<div id="all_users" class="table-responsive"></div>
</form>
</div>
</div>
</main>
</div>

<jsp:include page="../_footer.jsp"/>
<!-- Footer -->
<footer class="row footer <c:out value="${param.stickyFooter}"/> copyright py-4 text-center text-white">
<div class="container">
<small>Copyright &copy; <a href="https://roundkick.studio">Roundkick Studio</a> 2019</small>
</div>
</footer>

<!-- Scroll to Top Button (Only visible on small and extra-small screen sizes) -->
<div class="scroll-to-top d-lg-none position-fixed ">
<a class="js-scroll-trigger d-block text-center text-white rounded" href="#page-top">
<i class="fa fa-chevron-up"></i>
</a>
</div>
</div>

<!-- Bootstrap core JavaScript -->
Expand Down
52 changes: 32 additions & 20 deletions rss-2-kindle-web/src/main/webapp/jsp/profile.jsp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,21 +88,21 @@
});
$('#dashboard_user_status').append('<h5>User status: ' + data.status + '</h5>');
$('#dashboard_user_status').append('User status: ' + data.status);
$('#dashboard_user_info').append(
'Contact email: ' + data.email + '<br>' +
'Created: ' + data.dateCreated + '<br>' +
'Modified: ' + data.dateModified + '<br>' +
'Last logged in: ' + data.previousLogin + '<br>'
);
$('#dashboard_subscribers_status').append('<h5>Number of subscribers: ' + data.subscribers.length + '</h5>');
$('#dashboard_subscribers_status').append('Number of subscribers: ' + data.subscribers.length);
$('#dashboard_subscribers_info').append(
'Active subscribers:' + (data.subscribers.length - suspendedSubscribersnumber) + '<br>' +
'Suspended subscribers: ' + suspendedSubscribersnumber + '<br><br><br>'
);
$('#dashboard_subscriptions_status').append('<h5>Number of subscriptions: ' + rssNumber + '</h5>');
$('#dashboard_subscriptions_status').append('Number of subscriptions: ' + rssNumber);
$('#dashboard_subscriptions_info').append(
'Active subscriptions:' + (rssNumber - deadRssNumber - offlineRssNumber) + '<br>' +
'Dead subscriptions: ' + deadRssNumber + '<br>' +
Expand Down Expand Up @@ -132,28 +132,40 @@
<hr class="star-dark"/>
</div>
<div class="row text-center">
<div class="col-md-4 col-lg-4" style="background-color: #c7ddef">
<div id="dashboard_user_status"></div>
<h4>User info</h4>
<div class="text-muted" id="dashboard_user_info"></div>
<div class="col-md-4 col-lg-4" style="padding-top: 1rem">
<div class="card" style="background-color: #c7ddef">
<h6 id="dashboard_user_status" class="card-header"></h6>
<h4 class="card-title">User info</h4>
<div class="card-text text-muted" id="dashboard_user_info"></div>
</div>
</div>
<div class="col-md-4 col-lg-4" style="background-color: #f0ad4e">
<div id="dashboard_subscribers_status"></div>
<h4>Subscribers</h4>
<div class="text-muted" id="dashboard_subscribers_info"></div>
<div class="col-md-4 col-lg-4" style="padding-top: 1rem">
<div class="card" style="background-color: #f0ad4e">
<h6 id="dashboard_subscribers_status" class="card-header"></h6>
<h4 class="card-title">Subscribers</h4>
<div class="card-text text-muted" id="dashboard_subscribers_info"></div>
</div>
</div>
<div class="col-md-4 col-lg-4" style="background-color: #c9e2b3">
<div id="dashboard_subscriptions_status"></div>
<h4>Subscriptions</h4>
<div class="text-muted" id="dashboard_subscriptions_info"></div>
<div class="col-md-4 col-lg-4" style="padding-top: 1rem">
<div class="card" style="background-color: #c9e2b3">
<h6 id="dashboard_subscriptions_status" class="card-header"></h6>
<h4 class="card-title">Subscriptions</h4>
<div class="card-text text-muted" id="dashboard_subscriptions_info"></div>
</div>
</div>
</div>
<div class="row" style="padding-top: 5rem">
<div class="col-xl-6 text-left table-responsive-sm" id="subscribers_view">
<h3 class="sub-header">Subscribers</h3>
<div class="row" style="padding-top: 2rem">
<div class="col-xl-6 text-left" style="padding-top: 1rem">
<div class="card">
<h4 class="card-header">Subscribers</h4>
<div id="subscribers_view" class="table-responsive"></div>
</div>
</div>
<div class="col-xl-6 text-left table-responsive-sm" id="subscriptions_view">
<h3 class="sub-header">Subscriptions</h3>
<div class="col-xl-6 text-left" style="padding-top: 1rem">
<div class="card">
<h4 class="card-header">Subscriptions</h4>
<div id="subscriptions_view" class="table-responsive"></div>
</div>
</div>
</div>
</div>
Expand Down
120 changes: 62 additions & 58 deletions rss-2-kindle-web/src/main/webapp/jsp/subscriberDetails.jsp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,75 +86,75 @@
$('#subscribers_form').submit(function (e) {
e.preventDefault();
var srcButtonId = $(document.activeElement).attr('id');
var operation;
var message;
if (srcButtonId == 'add_btn') {
operation = 'add';
message = 'Subscriptions added successfully';
$('#addModal').modal('show');
$('#add_subscriptions_form').submit(function (e) {
e.preventDefault();
//validate rss list
var rsslistField = $('#rss_list');
rsslistField.popover('dispose');
if ($('#rss_list option').length === 0) {
rsslistField.popover(
{
content: 'At least one RSS is required',
trigger: 'manual',
placement: 'auto'
});
rsslistField.popover('show');
return false;
}
var newRssList = userData.rsslist;
$('#rss_list option').each(function (i) {
newRssList.push({'rss': $(this).val(), 'status': 'active'});
});
userData.rsslist = newRssList;
$().runAjax(rootURL + '/update',
'PUT',
JSON.stringify(userData),
'New subscriptions have been added successfully',
'Adding new subscriptions failed',
reloadRssTable
);
$('#addModal').modal('hide');
rsslistField.empty();
});
} else if (srcButtonId == 'deactivate_btn') {
operation = 'deactivate';
message = 'Subscriptions deactivated successfully';
$('#deactivateModal').modal('show');
$('#deactivate_subscriptions_form').submit(function (e) {
e.preventDefault();
updateSubscriptions(operation, message);
$('#deactivateModal').modal('hide');
});
} else if (srcButtonId == 'activate_btn') {
operation = 'activate';
message = 'Subscriptions activated successfully';
$('#activateModal').modal('show');
$('#activate_subscriptions_form').submit(function (e) {
e.preventDefault();
updateSubscriptions(operation, message);
$('#activateModal').modal('hide');
});
} else if (srcButtonId == 'remove_btn') {
operation = 'remove';
message = 'Subscriptions removed successfully';
$('#removeModal').modal('show');
$('#remove_subscriptions_form').submit(function (e) {
e.preventDefault();
updateSubscriptions(operation, message);
$('#removeModal').modal('hide');
});
}
}); //subscribers_form.submit
$('#add_subscriptions_form').submit(function (ev) {
ev.preventDefault();
//validate rss list
var rsslistField = $('#rss_list');
rsslistField.popover('dispose');
if ($('#rss_list option').length === 0) {
rsslistField.popover(
{
content: 'At least one RSS is required',
trigger: 'manual',
placement: 'auto'
});
rsslistField.popover('show');
return false;
}
var newRssList = userData.rsslist;
$('#rss_list option').each(function (i) {
newRssList.push({'rss': $(this).val(), 'status': 'active'});
});
userData.rsslist = newRssList;
$().runAjax(rootURL + '/update',
'PUT',
JSON.stringify(userData),
'New subscriptions have been added successfully',
'Adding new subscriptions failed',
reloadRssTable
);
$('#addModal').modal('hide');
rsslistField.empty();
});
$('#activate_subscriptions_form').submit(function (ev) {
ev.preventDefault();
var operation = 'activate';
var message = 'Subscriptions activated successfully';
updateSubscriptions(operation, message);
$('#activateModal').modal('hide');
});
$('#deactivate_subscriptions_form').submit(function (ev) {
ev.preventDefault();
var operation = 'deactivate';
var message = 'Subscriptions deactivated successfully';
updateSubscriptions(operation, message);
$('#deactivateModal').modal('hide');
});
$('#remove_subscriptions_form').submit(function (ev) {
ev.preventDefault();
var operation = 'remove';
var message = 'Subscriptions removed successfully';
updateSubscriptions(operation, message);
$('#removeModal').modal('hide');
});
function updateSubscriptions(operation, message) {
var updatedRssList = userData.rsslist;
$("input:checked[id!='select_all_checkbox']").each(function (index) {
Expand Down Expand Up @@ -230,29 +230,33 @@
<div class="btn-toolbar bg-light" role="toolbar" aria-label="">
<div class="btn-group" role="group">
<button id="add_btn" class="navbar-brand btn-outline-info" type="submit"
data-toggle="modal" data-target="#addModal"
data-tooltip="tooltip" data-placement="top" title="New subscription">
<i class="fas fa-plus-circle fa-2x"></i>
</button>
</div>
<div class="btn-group mr-2" role="group" aria-label="">
<button id="activate_btn" class="navbar-brand btn-outline-primary" type="submit"
data-toggle="modal" data-target="#activateModal"
data-tooltip="tooltip" data-placement="top" title="Activate subscriptions">
<i class="far fa-play-circle fa-2x"></i>
</button>
<button id="deactivate_btn" class="navbar-brand btn-outline-warning" type="submit"
data-toggle="modal" data-target="#deactivateModal"
data-tooltip="tooltip" data-placement="top" title="Deactivate subscriptions">
<i class="far fa-pause-circle fa-2x"></i>
</button>
</div>
<div class="btn-group" role="group">
<button id="remove_btn" class="navbar-brand btn-outline-danger" type="submit"
data-toggle="modal" data-target="#removeModal"
data-tooltip="tooltip" data-placement="top" title="Remove subscriptions">
<i class="far fa-trash-alt fa-2x"></i>
</button>
</div>
</div>
<div id="alerts_panel" class="row"></div>
<div id="details" class="row table-responsive-sm"></div>
<div id="details" class="row table-responsive"></div>
</form>
</div>
</div>
Expand Down
10 changes: 6 additions & 4 deletions rss-2-kindle-web/src/main/webapp/test.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -336,17 +336,19 @@ <h1>[email protected]</h1>
<div class="btn-toolbar bg-light" role="toolbar" aria-label="">
<div class="btn-group" role="group">
<button id="add_btn" class="navbar-brand btn-outline-info" type="submit"
data-tooltip="tooltip" data-placement="top" title="New subscription">
<i class="fas fa-plus-circle fa-2x"></i>
data-placement="top" title="New subscription">
<span data-tooltip="tooltip" data-placement="top" title="Edit subscriber">
<i class="fas fa-plus-circle fa-2x"></i>
</span>
</button>
</div>
<div class="btn-group mr-2" role="group" aria-label="">
<button id="activate_btn" class="navbar-brand btn-outline-primary" type="submit"
data-tooltip="tooltip" data-placement="top" title="Activate subscriptions">
data-placement="top" title="Activate subscriptions">
<i class="far fa-play-circle fa-2x"></i>
</button>
<button id="deactivate_btn" class="navbar-brand btn-outline-warning" type="submit"
data-tooltip="tooltip" data-placement="top"
data-placement="top"
title="Deactivate subscriptions">
<i class="far fa-pause-circle fa-2x"></i>
</button>
Expand Down

0 comments on commit 9363181

Please sign in to comment.