Merge pull request #50 from jackyzha0/034-past-intent-list

added adjustable table of intents, url, and time
getreflect · Apr 30, 2020 · 54aa72d · 54aa72d
2 parents 7d7d6d3 + 6bc5c68
commit 54aa72d
Show file tree

Hide file tree

Showing 14 changed files with 506 additions and 89 deletions.
diff --git a/dist/manifest.json b/dist/manifest.json
@@ -1,8 +1,8 @@
 {
   "manifest_version": 2,
-  "name": "reflect.",
-  "description": "a mindful website blocker for the productive.",
-  "version": "1.0.2",
+  "name": "reflect. - a mindful website blocker",
+  "description": "a website blocker that asks users to reflect on their usage.",
+  "version": "1.1.0",
   "options_page": "res/pages/options.html",
   "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
   "background": {
@@ -16,9 +16,8 @@
   },
   "browser_action": {
     "default_icon": "res/icon.png",
-    "icons": {
-      "16": "res/icon.png"
-    }
+    "default_popup": "res/pages/popup.html",
+    "default_title": "open reflect. options"
   },
   "permissions": [
     "storage",

diff --git a/dist/res/common.css b/dist/res/common.css
@@ -8,14 +8,21 @@ table {
 	width: 75%;
 }
 
+th {
+	text-align: left;
+	padding: 0.5em 0.5em;
+	font-size: 1.5em;
+	font-family: circular;
+}
+
 .styled {
 	margin-top: 3em;
 	border: 1.2px solid var(--blue);
 	border-radius: 5px;
 }
 
 th, td {
-	border: none;
+	border: none !important;
 }
 
 html {
@@ -27,13 +34,25 @@ html {
 }
 
 .hover {
-	transition: all 1s ease-in;
+	transition: box-shadow 1s ease-in;
 }
 
 .hover:hover {
 	box-shadow: 0 14px 28px rgba(0,0,0,0.18), 0 10px 10px rgba(0,0,0,0.04);
 }
 
+.secondary_button {
+    border: 1px solid var(--shale);
+    color: var(--shale);
+    padding: .5em 1.5em;
+    margin: 1em 0;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 1em;
+    border-radius: 5px;
+}
+
 button {
   background-color: var(--white);
   color: #dd6666;
@@ -46,12 +65,12 @@ button {
   cursor: pointer;
 }
 
-.urlDisplay {
+.urlDisplay, .intentDisplay {
 	margin: 0.2em 0.5em !important;
 	display: inline-block !important;
 }
 
-.options_panel {
+.options_panel, .analytics_panel {
 	padding-top: 2em;
 	padding-bottom: 5em;
 }
@@ -241,4 +260,94 @@ input[type=submit] {
 	width: 100vw;
 	height: 100vh;
 	background-color: var(--white);
+}
+
+.popup {
+	color: var(--shale);
+	text-align: center;
+}
+
+.popup h3 {
+	font-size: 3em;
+	margin: 0.25em 0.5em;
+}
+
+.button-con {
+  text-align: center;
+  padding: 0.5em 1em;
+}
+
+.toggle {
+  display: none;
+}
+
+.toggle,
+.toggle:after,
+.toggle:before,
+.toggle *,
+.toggle *:after,
+.toggle *:before,
+.toggle + .toggle-button {
+  box-sizing: border-box;
+}
+
+.toggle::selection,
+.toggle:after::selection,
+.toggle:before::selection,
+.toggle *::selection,
+.toggle *:after::selection,
+.toggle *:before::selection,
+.toggle + .toggle-button::selection {
+  background: none;
+}
+
+.toggle + .toggle-button {
+  outline: 0;
+  display: inline-block;
+  width: 4em;
+  height: 2em;
+  position: relative;
+  cursor: pointer;
+  border: 2px solid var(--shale);
+  user-select: none;
+}
+
+.toggle + .toggle-button:after,
+.toggle + .toggle-button:before {
+  position: relative;
+  display: block;
+  content: "";
+  width: 50%;
+  height: 100%;
+}
+
+.toggle + .toggle-button:after {
+  left: 0;
+}
+
+.toggle + .toggle-button:before {
+  display: none;
+}
+
+.toggle:checked + .toggle-button:after {
+  left: 50%;
+  background-color: var(--white);
+}
+
+.toggle:checked + .toggle-button {
+  background-color: var(--shale);
+}
+
+.toggle + .toggle-button {
+  padding: 2px;
+  transition: all 0.2s ease;
+  border: 2px solid var(--shale);
+  border-radius: 10px;
+}
+
+.toggle + .toggle-button:after {
+  transition: all 0.2s ease;
+  background: var(--shale);
+  content: "";
+  border-radius: 10px;
 }
diff --git a/dist/res/pages/options.html b/dist/res/pages/options.html
@@ -20,6 +20,15 @@ <h3 class="setting">whitelist time.</h3>
 							<input id="whitelistTime" type="number" min="0">
 						</td>
 					</tr>
+					<tr>
+						<td style="width:90%">
+							<h3 class="setting">number of intent entries.</h3>
+							<p class="subtext">number of most recent intents shown in the analytics panel.</p>
+						</td>
+						<td style="width:10%">
+							<input id="numIntentEntries" type="number" min="0">
+						</td>
+					</tr>
 				</table>
 			  	<p id="statusMessage">
 				  	<span>&nbsp;</span>
@@ -28,13 +37,22 @@ <h3 class="setting">whitelist time.</h3>
 				<input id="save" type="submit" value="save">
 			</div>
 
-			<h2>sites.</h2>
-			<p>a list of sites you would like to be more mindful of. sites added here will have the reflect prompt shown to you.</p>
-			<div id="addSite">
-				<input type="text" id="urlInput" />
-				<input class="urlSubmit" type="submit" id="add" value="add site">
+			<div class="sites_panel">
+				<h2>sites.</h2>
+				<p>a list of sites you would like to be more mindful of. sites added here will have the reflect prompt shown to you.</p>
+					<div id="addSite">
+						<input type="text" id="urlInput" />
+						<input class="urlSubmit" type="submit" id="add" value="add site">
+					</div>
+				<div id="filterList"></div>
+			</div>
+
+			<div class="analytics_panel">
+				<br>
+				<h2>analytics.</h2>
+				<p>a list showing your most recent entries.</p>
+				<div class='previousIntents' id="previousIntents"></div>
 			</div>
-			<div id="filterList"></div>
 		</div>
 	</body>
 </html>
diff --git a/dist/res/pages/popup.html b/dist/res/pages/popup.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<link rel="stylesheet" href="/res/common.css">
+		<script src="/src/popup.js"></script>
+	</head>
+	<body id="reflectMain" class="popup">
+		<h3>reflect.</h3>
+		<div class="button-con">
+		  <input class='toggle' id='reflect-toggle' type='checkbox'>
+		  <label class='toggle-button' for='reflect-toggle'></label>
+		</div>
+
+		<a class="secondary_button shadow hover" href="options.html" target="_blank">options.</a>
+	</body>
+</html>
diff --git a/dist/src/background.js b/dist/src/background.js
diff --git a/dist/src/background.js.map b/dist/src/background.js.map
diff --git a/dist/src/content.js b/dist/src/content.js
@@ -46,7 +46,7 @@ function iterWhitelist() {
                 const currentDate = new Date();
                 if (currentDate >= parsedDate) {
                     console.log("expired");
-                    loadBlockPage();
+                    loadBlockPage(strippedURL);
                 }
                 else {
                     // is currently on whitelist
@@ -56,19 +56,19 @@ function iterWhitelist() {
             }
             else {
                 console.log("blocked");
-                loadBlockPage();
+                loadBlockPage(strippedURL);
             }
         }
         // otherwise do nothing
     });
 }
-function loadBlockPage() {
+function loadBlockPage(strippedURL) {
     // get prompt page content
     $.get(chrome.runtime.getURL("res/pages/prompt.html"), (page) => {
         // stop current page and replace with our blocker page
         window.stop();
         $('html').html(page);
-        addFormListener();
+        addFormListener(strippedURL);
         // inject show options page
         $("#linkToOptions").attr("href", chrome.runtime.getURL('res/pages/options.html'));
         // load css
@@ -81,7 +81,7 @@ function loadBlockPage() {
         $("#small-blob2").attr("src", chrome.runtime.getURL('res/blob-small.svg'));
     });
 }
-function addFormListener() {
+function addFormListener(strippedURL) {
     var _a;
     const form = document.forms.namedItem("inputForm");
     // add listener for form submit
@@ -92,7 +92,37 @@ function addFormListener() {
         const intentForm = event.target;
         const intent = new FormData(intentForm).get('intent');
         const intentString = intent.toString();
+        const intentDate = new Date;
         callBackgroundWithIntent(intentString);
+        addToStorage(intentString, intentDate, strippedURL);
+    });
+}
+function addToStorage(intentString, intentDate, url) {
+    chrome.storage.sync.get(null, (storage) => {
+        // getting intent list map from storage
+        let intentList = storage.intentList;
+        // getting oldest date value from intent list map
+        let oldest_date = new Date();
+        for (const rawDate in intentList) {
+            const date = new Date(rawDate);
+            if (date < oldest_date) {
+                oldest_date = date;
+            }
+        }
+        // deleting oldest intent to keep intent count under 20
+        if (Object.keys(intentList).length > storage.numIntentEntries) {
+            console.log(`list full, popping ${oldest_date.toJSON()}`);
+            delete intentList[oldest_date.toJSON()];
+        }
+        // adding new intent and date to intent list
+        intentList[intentDate.toJSON()] = {
+            "intent": intentString,
+            "url": url,
+        };
+        // saving intentList to chrome storage
+        chrome.storage.sync.set({ 'intentList': intentList }, () => {
+            console.log('the intent "' + intentString + '" has been added');
+        });
     });
 }
 function callBackgroundWithIntent(intent) {