Major UI and Bug fixes

aayushsingla · Aug 5, 2020 · ddb9bc8 · ddb9bc8
1 parent 870261b
commit ddb9bc8
Show file tree

Hide file tree

Showing 7 changed files with 105 additions and 60 deletions.
diff --git a/scripts/auth.js b/scripts/auth.js
@@ -8,35 +8,49 @@ var googleProfileUserLoader = (function() {
 
   var state = STATE_START;
 
-  var signin_button, revoke_button;
+  var sign_in_out_button;
 
  function disableButton(button) {
     button.setAttribute('disabled', 'disabled');
-    button.style.display="none";
+    button.classList.remove("fa-sign-in");
+    button.classList.remove("fa-sign-out");
+    button.classList.add("fa-spinner");
+    console.log("button_disabled")
+
   }
 
   function enableButton(button) {
     button.removeAttribute('disabled');
-    button.style.display="block";
+    button.classList.remove("fa-spinner");
+    isSignedIn(function(bool){
+      if(!  bool){
+        sign_in_out_button.addEventListener('click', interactiveSignIn);  
+        button.classList.add("fa-sign-in");
+      }else{
+        sign_in_out_button.addEventListener('click', revokeToken);  
+        button.classList.add("fa-sign-out");
+      }
+      console.log("button_enabled")
+    });
+
+
+
   }
 
   function changeState(newState) {
     state = newState;
     switch (state) {
       case STATE_START:
-        enableButton(signin_button);
-        disableButton(revoke_button);
+        enableButton(sign_in_out_button);
         break;
       case STATE_ACQUIRING_AUTHTOKEN:
       	showSnackbar('Please Wait...');
         console.log('Acquiring token...');
-        disableButton(signin_button);
-        disableButton(revoke_button);
+        disableButton(sign_in_out_button);
         break;
       case STATE_AUTHTOKEN_ACQUIRED:
       	showSnackbar('Signed In.');
-        disableButton(signin_button);
-        enableButton(revoke_button);
+        enableButton(sign_in_out_button);
         break;
     }
   }
@@ -96,6 +110,7 @@ var googleProfileUserLoader = (function() {
                    current_token);
           xhr.send();
           // @corecode_end removeAndRevokeAuthToken
+          changeState(STATE_START);
           showSnackbar("Logged Out.");
           // Update the user interface accordingly
           console.log('Token revoked and removed from cache. '+
@@ -106,12 +121,8 @@ var googleProfileUserLoader = (function() {
 
   return {
     onload: function () {
-      signin_button = document.getElementById('authorize_button');
-      signin_button.addEventListener('click', interactiveSignIn);
-
-      revoke_button = document.getElementById('signout_button');
-      revoke_button.addEventListener('click', revokeToken);
-
+      sign_in_out_button = document.getElementById('sign_in_out_button');
+      enableButton(sign_in_out_button);
     }
   };
 

diff --git a/scripts/home.js b/scripts/home.js
@@ -14,12 +14,20 @@ function loadHome(){
 }
 
 function populateHome(){
+	$("#DatePicker").css({"display":"block"});
 	$("#loaderBox").css({"display":"block"});
 	$("#homeBoxes").css({"display":"none"});
+
 	var upcoming = [];
 	var ongoing = [];
 	var unscheduled = [];
-
+	$("#list_ongoing").empty();
+	$("#list_upcoming").empty();
+	$("#list_unscheduled").empty();
+	console.log(upcoming.toString());
+	console.log(ongoing.toString());
+	console.log(unscheduled.toString());
+
 	fetchLists(upcoming,ongoing,unscheduled);
 }
 
@@ -40,12 +48,8 @@ function decrementDate(){
 
 
 function fetchLists(upcoming,ongoing,unscheduled){
-
-	var today = new Date();
-	var dd = String(today.getDate()).padStart(2, '0');
-	var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
-	var yyyy = today.getFullYear();
-	today = yyyy + '-' + mm + '-' + dd;
+	var date = $('#date').datepicker({ dateFormat: 'dd,MM,yyyy' }).val();
+	console.log("abc",date);
 
 	chrome.storage.sync.get(null, function(object){
 
@@ -57,9 +61,8 @@ function fetchLists(upcoming,ongoing,unscheduled){
 			var child = object[keys[i]];
 			console.log(child);
 			console.log(child["date"]);
-			console.log(today);
 
-			if(child["date"] == today){
+			if(child["date"] == date){
 				if(child["source"] == "custom"){
 					console.log(child);
 					if(child["purpose"] == "start"){

diff --git a/scripts/popup.js b/scripts/popup.js
@@ -1,21 +1,29 @@
 
-var currentPage = "Alarm";
+var currentPage = "Home";
 
 $(document).ready(function(){
-	loadAddAlarmBody();
-
+	$("#container").load("./home.html", function(){
+		loadHome();
+	});	
 	var addAlarmbutton = document.getElementById("addSchedule");
+	console.log(addAlarmbutton);
 	addAlarmbutton.addEventListener("click", loadAddAlarmBody);
 
 	var aayush = document.getElementById("aayush");
+	console.log(aayush);
 	aayush.addEventListener("click", loadAayush);
 
 	var hardik = document.getElementById("hardik");
+	console.log(hardik);
 	hardik.addEventListener("click", loadHardik);
 
 	var source = document.getElementById("source");
+	console.log(source);
 	source.addEventListener("click", loadSource);
 
+	var sync = document.getElementById("syncButton");
+	console.log(sync);
+	sync.addEventListener("click", sync_google);
 
 	function loadAddAlarmBody(){
 
@@ -31,15 +39,27 @@ $(document).ready(function(){
 		}else {
 			$("#container").load("./home.html", function(){
 	  			console.log("Home Loaded");
-	  			loadHome();
+	  			populateHome();
 				currentPage = "Home";
 		  		$("#addSchedule").removeClass("fa-home");
 		  		$("#addSchedule").addClass(" fa-calendar-plus-o");
 
 			});
 		}
 	}
-
+
+	function sync_google(){
+		console.log("Syncing...");
+		isSignedIn(function(bool){
+			if(!bool){
+				showSnackbar("Please Sign In to sync with Google Calendar");
+			}else{
+				showSnackbar("Syncing with your Google Account. Please Wait.");
+				populateHome();
+			}
+
+		});
+	}
 
 
 });
@@ -59,6 +79,8 @@ function loadSource(){
 }
 
 
+
+
 function showSnackbar(str) {
   // Get the snackbar DIV
   var x = document.getElementById("snackbar");
@@ -72,6 +94,19 @@ function showSnackbar(str) {
 }
 
 
+function isSignedIn(callback){
+	chrome.identity.getAuthToken({interactive: false}, function (token) {
+	console.log(token);
+    if (!token) {
+        console.log("not signed in");
+        callback(false);
+    } else {
+        console.log("signed in");
+        callback(true);	
+    }
+
+});
 
+}
 
 
diff --git a/scripts/utils.js b/scripts/utils.js
@@ -26,7 +26,7 @@ function createCustomAlarm(){
 	var startTime=$("#start").val();
 	console.log(startTime);
 	var endTime=$("#end").val();
-	console.log(startTime);
+	console.log(endTime);
 	var url=$("#url").val();
 	console.log(url);
 	var destinationFile = $("#destination").val();

diff --git a/ui/css/popup.css b/ui/css/popup.css
@@ -43,6 +43,7 @@ html,body {
 
 /*F14475   5781CC*/
 #AppName{
+  margin-right: -30px;
   font-size: 24px;
   font-weight: 800;
   display: inline-block;
@@ -82,24 +83,27 @@ html,body {
   font-size: 21px !important;
 }
 
+.fa:hover{
+  background: #181D2E;
+  opacity: 0.7;
+  letter-spacing: 1px;
+  box-shadow: 5px 40px -10px rgba(0,0,0,0.57);
+  transition: all 0.2s ease 0s;
+}
+
 .fa-refresh{
   padding: 15px;
   float: left;
 }
 
-.fa-calendar-plus-o{
-  padding: 15px;
-  float: right;
-}
 
-.fa-home{
-  padding: 10px;
+.fa-calendar-plus-o, .fa-home, .fa-sign-in, .fa-sign-out, .fa-spinner{
+  padding: 15px;
   float: right;
 }
 
-.fa-google-plus{
-  margin-bottom:15px;
-  margin-left:15px;
+.fa-chevron-right, .fa-chevron-left{
+  padding: 3px;
 }
 
 #Developed{

diff --git a/ui/css/snackbar.css b/ui/css/snackbar.css
@@ -1,45 +1,37 @@
 /* The snackbar - position it at the bottom and in the middle of the screen */
 #snackbar {
   visibility: hidden; /* Hidden by default. Visible on click */
-  min-width: 250px; /* Set a default minimum width */
-  margin-left: -141px; /* Divide value of min-width by 2 */
+  width: 100%; /* Set a default minimum width */
+  margin: 0px;
   background-color: #F14475; /* Black background color */
   color: #fff; /* White text color */
   text-align: center; /* Centered text */
   border-radius: 2px; /* Rounded borders */
-  padding: 16px !important; /* Padding */
+  padding: 10px !important; /* Padding */
   position: fixed; /* Sit on top of the screen */
   z-index: 1; /* Add a z-index if needed */
-  left: 50%; /* Center the snackbar */
-  bottom: 60px; /* 30px from the bottom */
+  left: 0px;
+  font-size: 10px;
+  right: 0px;
+  bottom: 0px; /* 30px from the bottom */
 }
 
 /* Show the snackbar when clicking on a button (class added with JavaScript) */
 #snackbar.show {
   visibility: visible; /* Show the snackbar */
   /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
   However, delay the fade out process for 2.5 seconds */
-  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
   animation: fadein 0.5s, fadeout 0.5s 2.5s;
 }
 
-/* Animations to fade the snackbar in and out */
-@-webkit-keyframes fadein {
-  from {bottom: 60px; opacity: 0;}
-  to {bottom: 60px; opacity: 0.8;}
-}
 
 @keyframes fadein {
-  from {bottom: 60px; opacity: 0;}
-  to {bottom: 60px; opacity: 0.8;}
+  from {bottom: -60px; opacity: 0.8;}
+  to {bottom: 0px; opacity: 0.8;}
 }
 
-@-webkit-keyframes fadeout {
-  from {bottom: 60px; opacity: 0.8;}
-  to {bottom: 60px; opacity: 0;}
-}
 
 @keyframes fadeout {
-  from {bottom: 60px; opacity: 0.8;}
-  to {bottom: 60px; opacity: 0;}
+  from {bottom: 0px; opacity: 0.8;}
+  to {bottom: -60px; opacity: 0.8;}
 }
diff --git a/ui/popup.html b/ui/popup.html
@@ -13,12 +13,12 @@
     <body>
       <div id="main">
         <h1 id="AppName">Schedule N Record</h1>
-        <i class="fa fa-google-plus" id="signout_button" aria-hidden="true"></i>
+        <i class="fa fa-spinner" id="sign_in_out_button" aria-hidden="true"></i>
 
 
        <div  id= "main_inner">
          <div id="nav">
-          <i class="fa fa-refresh" id="authorize_button" aria-hidden="true"></i>
+          <i class="fa fa-refresh" id="syncButton" aria-hidden="true"></i>
 
           <div id="DatePicker">
             <i class="fa fa-chevron-left" id="decrement" aria-hidden="true"></i>