Skip to content

Commit

Permalink
A lot added into the Profile Settings Page.
Browse files Browse the repository at this point in the history
  • Loading branch information
@clj13001
clj13001 committed Feb 9, 2017
1 parent d4a6920 commit 7eb10f0
Show file tree
Hide file tree
Showing 3 changed files with 161 additions and 14 deletions.
4 changes: 2 additions & 2 deletions WebContent/html/css/stylesheet.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ div.profileContainer{
width: 100%;
height: 100%;
overflow: scroll;
left: 300px;
left: 200px;
top: 70px;
}

Expand Down Expand Up @@ -76,7 +76,7 @@ input[type=text]{


span.close{
color: #aaa;
color: black;
float: right;
font-size: 28px;
font-weight: bold;
Expand Down
86 changes: 86 additions & 0 deletions WebContent/html/javascript/profileSettings.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
//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;
var doneTypingInterval = 2000 //ms

$('#inputSSO').keyup(function(){clearTimeout(typeTimer); typeTimer = setTimeout(querySSO,doneTypingInterval);});

var flag = 0;
var name;
var SSO;
var telephone;
var email;

//populates the fields
populate();

//sends applied changes to DB
function applyChanges(){
if(flag == 0){
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');
}

//populates form fields if info exists in db already
function populate(){
//get values from database

//$('#inputName').val(name);
//$('#inputSSO').val(SSO);
//$('#inputTelephone').val(telephone);
//$('#inputEmail').val(email);
}

function checkEmpty(){
var id = this.getAttribute('id');
if($('#' + id).val() == ""){
$('#' + id).parent().attr('class','form-group has-error');
$('#' + id).siblings('span').text(warningtext(id))
}
else{
$('#' + id).parent().attr('class','form-group');
$('#' + id).siblings('span').text('')
}

}

function warningtext(id){
if(id == "inputName")
return "This is a required field.";
else if (id == "inputSSO")
return "Invalid SSO.";
}

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('');
}

window.onclick = function(event) {
var modal = document.getElementById('missingcontent');
if(event.target == modal)
modal.style.display = "none";
}
85 changes: 73 additions & 12 deletions WebContent/html/webpages/profileSettings.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,33 @@
background-color: white;
padding: 10px;
}

div.sidebar{
width: 200px;
}

form.infobar{
display: inline-block;
vertical-align: top;
border: 5px solid;
background-color: white;
padding: 10px;
padding-top: 0px;
margin-left: 15px;
width: 400px;
}

div.inputelement{
padding: 5px;
}

div.inputelement input{
border-width: solid;
}

body, html{
overflow: hidden;
}
</style>

</head>
Expand All @@ -37,22 +64,56 @@
<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>
</ul>
</div>

<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>

<div class = "profileContainer">
<div class = "profileImageContainer">
<div class = "imageContainer">
<img id = "profimg">
<div class = "profileContainer">
<div style = "display: inline-block;">
<div class = "imageContainer">
<img id = "profimg">
</div>
<br>
<p style = "display: inline-block;">Change profile image:</p>
<div id="my-icon-select" style = "display: inline-block;"></div>
</div>
<br>
<p style = "display: inline-block;">Change profile image:</p>
<div id="my-icon-select" style = "display: inline-block;"></div>
<form class = "infobar">
<h2>Profile Settings</h2>
<div class = "form-group">
<label for="inputName">Full Name *</label>
<input 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 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 style = "width: 120px;" type = "tel" class="form-control" id="inputTelephone" placeholder="Telephone #">
</div>
<div class = "form-group">
<label for="inputEmail">Email</label>
<input style = "width: 350px;" type = "email" class="form-control" id="inputEmail" placeholder="Email">
</div>
<button type="submit" class="btn btn-primary" id = "apply">Apply Changes</button>
</form>
</div>
</div>

<script src = "../javascript/navbar.js"></script>
<script src = "../javascript/profileIcon.js"></script>
<script src = "../javascript/navbar.js"></script>
<script src = "../javascript/profileIcon.js"></script>
<script src = "../javascript/profileSettings.js"></script>
</body>

</html>

0 comments on commit 7eb10f0

Please sign in to comment.