Skip to content

Commit

Permalink
Made a Notification settings form on the profile page, which doesn't …
Browse files Browse the repository at this point in the history 
…do anything yet.

Gave Users a notificationPreferences integer attribute
  • Loading branch information
@arc12012
arc12012 committed Apr 17, 2017
1 parent e6c1f94 commit 3b4e711
Show file tree
Hide file tree
Showing 3 changed files with 216 additions and 96 deletions.
63 changes: 62 additions & 1 deletion WebContent/html/css/stylesheet.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,8 @@ div.displayDevice{
overflow: scroll;
}

div.profileContainer{
div.profileContainer,
div.notificationContainer{
display: inline-block;
position: absolute;
padding-left: 30px;
Expand Down Expand Up @@ -94,3 +95,63 @@ span.close:focus{
ul.nav{
padding: 0px;
}

/*this is all to make slider-switches*/
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}

/* Hide default HTML checkbox */
.switch input {display:none;}

/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}

.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}

input:checked + .slider {
background-color: #2196F3;
}

input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
border-radius: 34px;
}

.slider.round:before {
border-radius: 50%;
}
239 changes: 144 additions & 95 deletions WebContent/html/webpages/profileSettings.jsp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,95 +69,131 @@
<h4>User Profile Settings</h4>
<li class = "option" id = "os"><a href="#">Profile Settings</a></li>
<li class = "option" id = "ds"><a href="#">Location Settings</a></li>
</ul>
</div>
<li class = "option" id="ns"><a href="#">Notification Settings</a></li>
</ul>
</div>

<!-- Popup to indicate info is missing -->
<div class = "modal" id = "missingcontent">
<div class = "modal-content">
<div class = "modal-head">
<span id="closeBttn" class="close">&times;</span>
</div>
<div class = "modal-body">
You need to edit some fields still.
</div>
<!-- Popup to indicate info is missing -->
<div class = "modal" id = "missingcontent">
<div class = "modal-content">
<div class = "modal-head">
<span id="closeBttn" class="close">&times;</span>
</div>
<div class = "modal-body">
You need to edit some fields still.
</div>
</div>
</div>

<!-- All profile information -->
<div class = "profileContainer">
<div style = "display: inline-block;">
<!-- Where profile image gets edited -->
<div class = "imageContainer">
<img id = "profimg">
</div>
<br>
<p style = "display: inline-block;">Change profile image:</p>
<!-- Image selector tool -->
<div id="my-icon-select" style = "display: inline-block;"></div>
<!-- Profile Settings -->
<div class = "profileContainer" style="visibility: visible;">
<div style = "display: inline-block;">
<!-- Where profile image gets edited -->
<div class = "imageContainer">
<img id = "profimg">
</div>
<!-- Where main user information is edited -->
<form action = "redirect/profileSettingsRedirect.jsp" class = "infobar">
<h2>Profile Settings</h2>
<div class = "form-group">
<label for="inputName">Full Name *</label>
<input name = "name" style = "width: 350px;" type = "name" class="form-control" id="inputName" placeholder="Name" required = "true">
<span class = "help-block"></span>
</div>
<div class = "form-group">
<label for="inputSSO">SSO Number *</label>
<input name = "sso" readonly style = "width: 100px;" type = "id" class="form-control" id="inputSSO" placeholder="SSO #" required = "true">
<span class = "help-block"></span>
</div>
<div class = "form-group">
<label for="inputTelephone">Telephone Number</label>
<input name = "phone" style = "width: 120px;" type = "tel" class="form-control" id="inputTelephone" placeholder="Telephone #">
</div>
<div class = "form-group">
<label for="inputEmail">Email</label>
<input name = "email" style = "width: 350px;" type = "email" class="form-control" id="inputEmail" placeholder="Email">
</div>
<input id = "hiddenIMG" style = "display: none" name = "img">
<button name = "profile" type="submit" class="btn btn-primary" id = "apply">Apply Changes</button>
</form>
<br>
<p style = "display: inline-block;">Change profile image:</p>
<!-- Image selector tool -->
<div id="my-icon-select" style = "display: inline-block;"></div>
</div>
<script>
<!-- Where main user information is edited -->
<form action = "redirect/profileSettingsRedirect.jsp" class = "infobar">
<h2>Profile Settings</h2>
<div class = "form-group">
<label for="inputName">Full Name *</label>
<input name = "name" style = "width: 350px;" type = "name" class="form-control" id="inputName" placeholder="Name" required = "true">
<span class = "help-block"></span>
</div>
<div class = "form-group">
<label for="inputSSO">SSO Number *</label>
<input name = "sso" readonly style = "width: 100px;" type = "id" class="form-control" id="inputSSO" placeholder="SSO #" required = "true">
<span class = "help-block"></span>
</div>
<div class = "form-group">
<label for="inputTelephone">Telephone Number</label>
<input name = "phone" style = "width: 120px;" type = "tel" class="form-control" id="inputTelephone" placeholder="Telephone #">
</div>
<div class = "form-group">
<label for="inputEmail">Email</label>
<input name = "email" style = "width: 350px;" type = "email" class="form-control" id="inputEmail" placeholder="Email">
</div>
<input id = "hiddenIMG" style = "display: none" name = "img">
<button name = "profile" type="submit" class="btn btn-primary" id = "applyProfile">Apply Changes</button>
</form>
</div>
<!-- Notification Settings -->
<div class = "notificationContainer">
<!-- Where main user information is edited -->
<form action = "redirect/notificationSettingsRedirect.jsp" class = "infobar">
<h2>Email Notification Settings</h2>
<br>
<h4>Send me a messege when...</h4>
<div style="float: left; margin-right: 10px;"><h5>Tickets are generated</h5></div>
<div style="float: right;">
<label class="switch">
<input type="checkbox" id="notificationSlider1">
<div class="slider round"></div>
</label></div><br><br>
<div style="float: left; margin-right: 10px;"><h5>Ticket is approved</h5></div>
<div style="float: right;">
<label class="switch">
<input type="checkbox" id="notificationSlider2">
<div class="slider round"></div>
</label></div><br><br>
<div style="float: left; margin-right: 10px;"><h5>Ticket is rejected</h5></div>
<div style="float: right;">
<label class="switch">
<input type="checkbox" id="notificationSlider3">
<div class="slider round"></div>
</label></div><br><br><br>
<div style="text-align: center;">
<button name = "notification" type="submit" class="btn btn-primary" id = "applyNotifications">Apply Changes</button>
<button name="leaveMeAlone" class="btn btn-primary" style="background-color: red">Please just leave me alone</button>
</div>
</form>
</div>
<script>
var iconSelect;
window.onload = function(){
iconSelect = new IconSelect("my-icon-select",
{'selectedIconWidth':23,
'selectedIconHeight':23,
'selectedBoxPadding':3,
'iconsWidth':48,
'iconsHeight':48,
'boxIconSpace':5,
'vectoralIconNumber':2,
'horizontalIconNumber':8});
var icons = [];
icons.push({'iconFilePath':'../imgs/my-icons-collection-32px/png/' + <%=self.getIcon()%> + '.png', 'iconValue':' + <%=self.getIcon()%> + '});
for(var i = 1; i <= 15; i++){
window.onload = function(){
iconSelect = new IconSelect("my-icon-select",
{'selectedIconWidth':23,
'selectedIconHeight':23,
'selectedBoxPadding':3,
'iconsWidth':48,
'iconsHeight':48,
'boxIconSpace':5,
'vectoralIconNumber':2,
'horizontalIconNumber':8});
var icons = [];
icons.push({'iconFilePath':'../imgs/my-icons-collection-32px/png/' + <%=self.getIcon()%> + '.png', 'iconValue':' + <%=self.getIcon()%> + '});
for(var i = 1; i <= 15; i++){
if( i != <%=self.getIcon()%>)
icons.push({'iconFilePath':'../imgs/my-icons-collection-32px/png/' + i + '.png', 'iconValue': i });
}
iconSelect.refresh(icons);
icons.push({'iconFilePath':'../imgs/my-icons-collection-32px/png/' + i + '.png', 'iconValue': i });
}
iconSelect.refresh(icons);
//around here is where you'll have to define the current image, then this will update as the user selects new ones!
$('#profimg').attr("src","../imgs/my-icons-collection-128px/png/" + '<%=self.getIcon()%>' + ".png");
$('#hiddenIMG').val(<%=self.getIcon()%>);
};
//event listener on the apply changes button
document.getElementById('apply').addEventListener('click',applyChanges);
document.getElementById('inputName').addEventListener('keyup',checkEmpty);
document.getElementById('inputSSO').addEventListener('keyup',checkEmpty);
document.getElementById('closeBttn').addEventListener('click',function(){document.getElementById('missingcontent').style.display = "none";});
var typeTimer;
$('#hiddenIMG').val(<%=self.getIcon()%>);
};
//Listenress for sidebar options
document.getElementById('os').addEventListener('click',focusOnProfile);
document.getElementById('ns').addEventListener('click',focusOnNotifications);
//Listeners for profile ssettings
document.getElementById('applyProfile').addEventListener('click',applyProfileChanges);
document.getElementById('inputName').addEventListener('keyup',checkEmpty);
document.getElementById('inputSSO').addEventListener('keyup',checkEmpty);
document.getElementById('closeBttn').addEventListener('click',function(){document.getElementById('missingcontent').style.display = "none";});
// Listeners for notification settings
document.getElementById('applyNotifications').addEventListener('click',applyNotifiationChanges);
document.getElementsByName('leaveMeAlone')[0].addEventListener('click',disableAllNotifications);
var typeTimer;
var doneTypingInterval = 2000 //ms
$('#inputSSO').keyup(function(){clearTimeout(typeTimer); typeTimer = setTimeout(querySSO,doneTypingInterval);});
Expand All @@ -171,28 +207,38 @@
//populates the fields
populate();
function focusOnProfile() {
document.getElementsByClassName('profileContainer')[0].style.visibility='visible';
document.getElementsByClassName('notificationContainer')[0].style.visibility='hidden';
}
function focusOnNotifications() {
document.getElementsByClassName('notificationContainer')[0].style.visibility='visible';
document.getElementsByClassName('profileContainer')[0].style.visibility='hidden';
}
//sends applied changes to DB
function applyChanges(){
function applyProfileChanges(){
if(flag == 0){
name = $('#inputName').val();
SSO = $('#inputSSO').val();
telephone = $('#inputTelephone').val();
email = $('#inputEmail').val();
name = $('#inputName').val();
SSO = $('#inputSSO').val();
telephone = $('#inputTelephone').val();
email = $('#inputEmail').val();
//send these values to DB for updates to be made
//EX
//if(name != "")
//send to database
}
else
$('#missingcontent').css('display','block');
}
}
else
$('#missingcontent').css('display','block');
}
function applyNotifiationChanges(){
}
//populates form fields if info exists in db already
function populate(){
//get values from database
$('#inputName').val('<%=navname%>');
$('#inputSSO').val('<%=self.getID()%>');
$('#inputTelephone').val('<%=self.getPhone()%>');
Expand All @@ -209,7 +255,7 @@
$('#' + id).parent().attr('class','form-group');
$('#' + id).siblings('span').text('')
}
}
function warningtext(id){
Expand All @@ -221,12 +267,12 @@
function querySSO(){
//query to see if SSO is in database already
//if so... && val() != ""
//$('#' + id).parent().attr('class','form-group has-error');
//$('#inputSSO').siblings('span').text('SSO is currently in use.');
//flag = 1;
//if not... && val() != ""
//$('#' + id).parent().attr('class','form-group');
//$('#' + id).siblings('span').text('');
Expand All @@ -235,8 +281,11 @@
window.onclick = function(event) {
var modal = document.getElementById('missingcontent');
if(event.target == modal)
modal.style.display = "none";
}
modal.style.display = "none";
}
function disableAllNotifications(argument) {
// body...
}
</script>
</body>

Expand Down
Loading

0 comments on commit 3b4e711

Please sign in to comment.