From 3b4e7112e4e317d97ce42c5b727282b743e34eee Mon Sep 17 00:00:00 2001
From: Adam R Claxton <adam.claxton@uconn.edu>
Date: Sun, 16 Apr 2017 20:11:57 -0400
Subject: [PATCH] Made a Notification settings form on the profile page, which
 doesn't do anything yet.

Gave Users a notificationPreferences integer attribute
---
 WebContent/html/css/stylesheet.css           |  63 ++++-
 WebContent/html/webpages/profileSettings.jsp | 239 +++++++++++--------
 src/entities/User.java                       |  10 +
 3 files changed, 216 insertions(+), 96 deletions(-)

diff --git a/WebContent/html/css/stylesheet.css b/WebContent/html/css/stylesheet.css
index 0238400..7026714 100644
--- a/WebContent/html/css/stylesheet.css
+++ b/WebContent/html/css/stylesheet.css
@@ -25,7 +25,8 @@ div.displayDevice{
     overflow: scroll;
 }
 
-div.profileContainer{
+div.profileContainer,
+div.notificationContainer{
     display: inline-block; 
     position: absolute; 
     padding-left: 30px;
@@ -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%;
+}
\ No newline at end of file
diff --git a/WebContent/html/webpages/profileSettings.jsp b/WebContent/html/webpages/profileSettings.jsp
index d5fd7de..71cd20b 100644
--- a/WebContent/html/webpages/profileSettings.jsp
+++ b/WebContent/html/webpages/profileSettings.jsp
@@ -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);});
@@ -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()%>');
@@ -209,7 +255,7 @@
 			$('#' + id).parent().attr('class','form-group');
 			$('#' + id).siblings('span').text('')
 		}
-	
+
 	}
 	
 	function warningtext(id){
@@ -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('');
@@ -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>
 
diff --git a/src/entities/User.java b/src/entities/User.java
index 34fdd60..9585c78 100644
--- a/src/entities/User.java
+++ b/src/entities/User.java
@@ -7,6 +7,7 @@ public class User {
 private String name;
 private String phone;
 private String email;
+private int notificationPreferences;
 private int icon;
 
 	public User(){
@@ -20,6 +21,7 @@ public User(int id, int location, String name, String phone, String email, int i
 		this.phone = phone;
 		this.email = email;
 		this.icon = icon;
+		this.notificationPreferences = 1+2+4;
 	}
 	
 	public int getIcon(){
@@ -94,4 +96,12 @@ public void setLocationName(String locationName)
 	{
 		this.locationName=locationName;
 	}	
+	public void setNotificationPreferences(int prefs)
+	{
+		this.notificationPreferences=prefs;
+	}
+	public int getNotificationPreferences()
+	{
+		return notificationPreferences;
+	}
 }