Incremental Commit to see WTF I was doing.

client/package-lock.json

@@ -3547,9 +3547,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001418",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001418.tgz",
-      "integrity": "sha512-oIs7+JL3K9JRQ3jPZjlH6qyYDp+nBTCais7hjh0s+fuBwufc7uZ7hPYMXrDOJhV360KGMTcczMRObk0/iMqZRg==",
+      "version": "1.0.30001651",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001651.tgz",
+      "integrity": "sha512-9Cf+Xv1jJNe1xPZLGuUXLNkE1BoDkqRqYyFJ9TDYSqhduqA4hu4oR9HluGoWYQC/aj8WHjsGVV+bwkh0+tegRg==",
       "dev": true,
       "funding": [
         {
@@ -3559,6 +3559,10 @@
         {
           "type": "tidelift",
           "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
         }
       ]
     },
@@ -12823,9 +12827,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001418",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001418.tgz",
-      "integrity": "sha512-oIs7+JL3K9JRQ3jPZjlH6qyYDp+nBTCais7hjh0s+fuBwufc7uZ7hPYMXrDOJhV360KGMTcczMRObk0/iMqZRg==",
+      "version": "1.0.30001651",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001651.tgz",
+      "integrity": "sha512-9Cf+Xv1jJNe1xPZLGuUXLNkE1BoDkqRqYyFJ9TDYSqhduqA4hu4oR9HluGoWYQC/aj8WHjsGVV+bwkh0+tegRg==",
       "dev": true
     },
     "case-sensitive-paths-webpack-plugin": {

client/public/img/icons/safari-pinned-tab.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.00251 14.9297L0 1.07422H6.14651L8.00251 4.27503L9.84583 1.07422H16L8.00251 14.9297Z" fill="black"/>
+</svg>

client/public/index.html

@@ -9,7 +9,8 @@
     <link rel="shortcut icon" href="/api/static/assets/favicon.ico" type="image/x-icon"/>
 
     <meta name="theme-color" content="#000" />
-    <link rel="manifest" href="/api/static/assets/manifest.json">
+    <!-- Manifest is generated per page -->
+    <!-- <link rel="manifest" href="/api/static/assets/manifest.json"> -->
 
     <title>Solid Scribe - An easy, encrypted Note App</title>
     <!-- <title><%= htmlWebpackPlugin.options.title %></title> -->

client/src/App.vue

@@ -1,7 +1,7 @@
 <template>
 	<div id="app" :class="{ 'night-mode':($store.getters.getIsNightMode == 2) }">
 
-		<div class="ui container" v-if="showFakeSite">
+		<!-- <div class="ui container" v-if="showFakeSite">
 			<div class="ui basic very padded segment">
 			<div class="ui inverted red segment">
 				<h1>WARNING - False site detected</h1>
@@ -11,7 +11,7 @@
 				<h2>You will be redirected to the correct domain in {{redirectSeconds}}</h2>
 			</div>
 			</div>
-		</div>
+		</div> -->
 
 		<div class="auth-block" v-if="requireAuth">
 			<div class="ui raised inverted segment">
@@ -82,6 +82,74 @@ export default {
 	// - Gets new session tokens from server and uses them in app
 	beforeCreate: function(){
 
+		const root = 'https://www.solidscribe.com'
+		// const root = 'https://192.168.1.164'
+		const manifest = {
+			"theme_color":"#000",
+			"background_color": "#000",
+			"description": "Take Notes",
+			"display_override": ["fullscreen", "minimal-ui"],
+  			"display": "standalone",
+			"icons": [
+				{
+					"src": root+"/api/static/assets/logo.png",
+					"sizes": "495x495",
+					"type": "image/png",
+					"purpose": "any" 
+				},
+				{
+					"src": root+"/api/static/assets/maskable_icon.png",
+					"sizes": "826x826",
+					"type": "image/png",
+					"purpose": "maskable"
+				}
+			],
+			"screenshots" : [
+				{
+					"src": root+"/api/static/assets/lightmode.png",
+					"sizes": "1000x1080",
+					"type": "image/png"
+				},
+				{
+					"src": root+"/api/static/assets/darkmode.png",
+					"sizes": "1000x1081",
+					"type": "image/png"
+				}
+			],
+			"shortcuts" : [
+				{
+					"name": "Files & Links",
+					"url": " /attachments",
+					"description": "All Note files and links",
+					"icons": [{
+						"src": root+"/api/static/assets/icon1.png", 
+						"sizes": "96x96",
+						"type": "image/png" 
+					}]
+				},
+				{
+					"name": "Metric Track",
+					"url": "/metrictrack",
+					"description": "Metric Tracking",
+					"icons": [{ 
+						"src": root+"/api/static/assets/icon2.png", 
+						"sizes": "96x96",
+						"type": "image/png" 
+					}]
+				}
+			],
+			"name": "Solid Scribe",
+			"short_name": "Solid Scribe",
+			"author": "Max",
+			"scope": root,
+			"start_url": window.location.href
+		}
+
+		const link = document.createElement('link')
+		link.rel = 'manifest'
+		link.href = `data:application/json;base64,${btoa(JSON.stringify(manifest))}`
+		document.head.appendChild(link)
+
 		//Before all requests going out
 		axios.interceptors.request.use(
 			(config) => {
@@ -173,15 +241,15 @@ export default {
 	mounted: function(){
 
 		const isDev = process.env['NODE_ENV'] == 'development'
-		if(window.location.hostname.toLowerCase().replace('www.','') != "solidscribe.com" && !isDev){
-			this.showFakeSite = true
-			setInterval(() => {
-				this.redirectSeconds--
-				if(this.redirectSeconds == 0){
-					window.location.href = 'https://www.solidscribe.com'
-				}
-			}, 1000)
-		}
+		// if(window.location.hostname.toLowerCase().replace('www.','') != "solidscribe.com" && !isDev){
+		// 	this.showFakeSite = true
+		// 	setInterval(() => {
+		// 		this.redirectSeconds--
+		// 		if(this.redirectSeconds == 0){
+		// 			window.location.href = 'https://www.solidscribe.com'
+		// 		}
+		// 	}, 1000)
+		// }
 
 		//Update totals for entire app on event
 		this.$io.on('update_counts', () => {

client/src/components/NoteInputPanel.vue

@@ -1068,6 +1068,10 @@
 			},
 			loadNoteNextFromServer(){
 
+				if(this.statusText != 'saved'){
+					return
+				}
+
 				clearTimeout(this.reloadNoteDebounce)
 				this.reloadNoteDebounce = setTimeout(() => {
 
@@ -1075,13 +1079,27 @@
 					// this.setText('')
 
 					//Focus Regained on Note, check for update
+					console.log('Ajax Call to /api/note/get')
 					axios.post('/api/note/get', { 'noteId': this.noteid })
 					.then(response => {
 
-						this.setupLoadedNoteData(response)
+						// Skip note update if it didn't change.
+						const newNoteHash = this.hashString( response.data.text )
+						if(newNoteHash == this.lastNoteHash){
+							console.log('Skipping any changes. Notes match')
+							return
+						}
 
-						//Manually set squire text to show
-						this.setText(this.noteText)
+						this.setupLoadedNoteData(response) 
+
+						//Manually set squire text
+						const editorElement = document.getElementById('squire-id')
+						editorElement.innerHTML = response.data.text
+
+						this.$nextTick(() => {
+							this.restoreCaretPosition()
+							.catch(e => console.log(e) )
+						})
 						
 
 					})
@@ -1098,6 +1116,7 @@
 				//If user leaves page then returns to page, reload the first batch
 				if(checkForUpdateTimeout){
 
+					console.log('Focused then unfocused for greater than 3 seconds. Checking with server.')
 					this.loadNoteNextFromServer()
 					this.lastInteractionTimestamp = now
 				}
@@ -1185,10 +1204,11 @@
 						this.diffsApplied = diffSinceLastUpdate.length
 						// console.log('Got Diffs Total -> ', diffSinceLastUpdate)
 					}
-					// console.log(diffSinceLastUpdate)
+					console.log(diffSinceLastUpdate)
 					this.patchText(diffSinceLastUpdate)
 					.then(() => {
 						this.restoreCaretPosition()
+						.catch(e => console.log(e) )
 					})
 				})
 
@@ -1197,11 +1217,16 @@
 					this.patchText([incomingDiff])
 					.then(() => {
 						this.restoreCaretPosition()
+						.catch(e => console.log(e) )
 					})
 				})
 
 				this.$io.on('new_note_text_saved', ({noteId, hash}) => {
 
+					if(this.statusText != 'saved'){
+						return
+					}
+
 					const sameIdCheck = (this.idleNote && this.noteid == noteId)
 					const differentHashCheck = (hash != this.lastNoteHash)
 
@@ -1235,6 +1260,8 @@
 				this.lastRange = this.generateSelector(element)
 				this.startOffset = parseInt(event.range.startOffset) || 0
 
+				console.log('Save Range ', [element, this.lastRange, this.startOffset])
+
 				return
 			},
 			restoreCaretPosition(){

client/src/mixins/SquireButtonFunctions.js

@@ -377,13 +377,13 @@ const SquireButtonFunctions = {
 			// this.diffNoteText = this.editor._getHTML()
 			
 			//Make sure all list items have draggable property
-			let container = document.getElementById('squire-id')
-			let listItems = container.getElementsByTagName('li')
-			for(let itemIndex in listItems){
-				// console.log(listItems[itemIndex])
-				// listItems[itemIndex].setAttribute('draggable','true')
-			}
-			// console.log(listItems)
+			// let container = document.getElementById('squire-id')
+			// let listItems = container.getElementsByTagName('li')
+			// for(let itemIndex in listItems){
+			// 	// console.log(listItems[itemIndex])
+			// 	// listItems[itemIndex].setAttribute('draggable','true')
+			// }
+			// // console.log(listItems)
 
 		},
 		getText(){

client/src/pages/CycletrackingPage.vue

@@ -0,0 +1,297 @@
+<style>
+	.calendar {
+		width: 300px;
+		height: 400px;
+		display: inline-block;
+	}
+	.day {
+		width: 40px;
+		height: 40px;
+		border: 1px solid var(--border_color);
+		display: inline-block;
+		text-align: center;
+		font-size: 1.2em;
+		cursor: pointer;
+	}
+		.today {
+			font-weight: bold;
+		}
+		.day ~ .active {
+			
+			background-color: var(--main-accent);
+			color: var(--body_bg_color);
+		}
+		.day ~ .has-data {
+			outline: #07f4f4;
+			outline-style: none;
+			outline-width: medium;
+			outline-style: none;
+			outline-offset: -4px;
+			outline-style: solid;
+			outline-width: 2px;
+		}
+</style>
+
+<template>
+	<div class="squire-box">
+
+		<h3>Cycle Tracking Beta
+			<span v-on:click="deleteData()">
+				<i class="clickable trash icon"></i>
+			</span>
+		</h3>
+
+		<div class="calendar">
+			<p>{{calendar.monthName}}, {{calendar.year}}</p>
+			<div v-for="day in calendar.weekdays" class="day">
+				{{ day }}
+			</div>
+			<div v-for="day in calendar.days" class="day" 
+				:class="{
+					'today':day == calendar.today,
+					'active':dateCode == `${day}.${calendar.month}.${calendar.year}`,
+					'has-data':cycleData[`${day}.${calendar.month}.${calendar.year}`],
+				}" 
+				v-on:click="openDayData(`${day}.${calendar.month}.${calendar.year}`)">
+				{{ day }}
+			</div>
+		</div>
+
+		<div class="ui form">
+			<h3><input type="text" v-model="dateCode" v-on:keypress.enter="openDayData(dateCode)"></h3>
+			<div class="field" v-for="field in fields">
+				<label>{{ field.label }}</label>
+
+				<div v-for="(value, key) in openDay">
+
+					<!-- float -->
+					<div v-if="field.type == 'float' && field.id == key" class="ui left icon input">
+						<input type="text" :placeholder="field.label" v-on:keyup="e => saveField(field.id, e.target.value)" :value="value">
+						<i class="thermometer half icon"></i>
+					</div>
+
+					<!-- range -->
+					<div v-if="field.type == 'range' && field.id == key">
+						<div :class="{green:(value == 1)}" v-on:click="saveField(field.id, 1)" class="ui button">1</div>
+						<div :class="{green:(value == 2)}" v-on:click="saveField(field.id, 2)" class="ui button">2</div>
+						<div :class="{green:(value == 3)}" v-on:click="saveField(field.id, 3)" class="ui button">3</div>
+						<div :class="{green:(value == 4)}" v-on:click="saveField(field.id, 4)" class="ui button">4</div>
+						<div :class="{green:(value == 5)}" v-on:click="saveField(field.id, 5)" class="ui button">5</div>
+					</div>
+
+					<!-- text area -->
+					<div v-if="field.type == 'text' && field.id == key">
+						<textarea rows="3" v-on:keyup="e => saveField(field.id, e.target.value)">
+							{{ value }}
+						</textarea>
+					</div>
+
+				</div>
+
+			</div>
+
+			<div class="ui green save button" v-on:click="saveDayData">
+				Save
+			</div>
+		</div>
+
+
+	</div>
+</template>
+
+<script>
+
+	import axios from 'axios'
+
+	export default {
+		name: 'CycleTracking',
+		components: {
+			'logo':require('@/components/LogoComponent.vue').default,
+		},
+		data () {
+			return {
+				appWorkingDate: null,
+				fields:[],
+				defaultFields:[
+					{'type':'float','label':'Basil Temp', 'id':'BT'},
+					{'type':'range','label':'Cervical Mucus', 'id':'CM'},
+					{'type':'text','label':'Notes', 'id':'NO'},
+				],
+				cycleData: {},
+				dateCode: null,
+				openDay: [],
+				calendar: {
+					monthName: '',
+					month: '',
+					year: '',
+					days: [],
+					weekdays: ['S','M','T','W','T','F','S'],
+					today: 0,
+				},
+			}
+		},
+		beforeCreate() {
+
+			// Perform Login check
+			this.$parent.loginGateway()
+
+		},
+		mounted(){
+			if(!this.$store.getters.getLoggedIn){
+				return
+			}
+
+			// setup date code
+			// day - month - year 
+			const now = new Date()
+			this.appWorkingDate = now
+			const dateSetup = [
+				now.getDate(), // 1-31 (Day)
+				now.getMonth()+1, // 0-11 (Month)
+				now.getFullYear(), // 1888-2022 (Year)
+			]
+
+			this.dateCode = dateSetup.join('.')
+
+			this.setupCalendar(this.appWorkingDate)
+
+			this.fetchCycleData()
+		},
+		methods: {
+			saveField(fieldId, value){
+				this.openDay[fieldId] = value
+			},
+			openDayData(dateCode){
+
+				if(String(dateCode).split('.').length != 3){
+					console.log('Invalid Date Code')
+					return
+				}
+
+				this.dateCode = dateCode || this.dateCode
+
+				let currentDay = this.cycleData[this.dateCode] || {}
+
+				//Set up each entry empty or with current value
+				this.fields.forEach(field => {
+					currentDay[field.id] = currentDay[field.id] || ''
+				})
+				
+				this.openDay = currentDay
+
+			},
+			saveDayData(){
+
+				// remove empty keys
+				let cleanDayData = {}
+				Object.keys(this.openDay).forEach(key => {
+					if(this.openDay[key] != ''){
+						cleanDayData[key] = this.openDay[key]
+					}
+				})
+
+				this.cycleData[this.dateCode] = cleanDayData
+
+				// Update calendar
+				this.setupCalendar(this.appWorkingDate)
+
+				this.saveCycleData()
+
+			},
+			fetchCycleData(){
+
+				axios.post('/api/cycle-tracking/get')
+				.then(({ data }) => {
+					if(data.hasOwnProperty("text")){
+
+						let appData = null
+						try {
+							appData = JSON.parse(data.text)
+						} catch(e) {
+							console.log('Didnt parse json')
+						}
+
+						console.log(appData) 
+
+						this.cycleData = appData?.cycleData || {}
+						this.fields = appData?.fields || []
+
+						this.$nextTick(() => {
+							this.setupFields()
+							this.openDayData(this.dateCode)
+						})
+					}
+				})
+				.catch(error => { this.$bus.$emit('notification', error) })
+
+			},
+			saveCycleData(){
+
+				const appData = JSON.stringify({
+					fields: this.fields,
+					cycleData: this.cycleData,
+				})
+				axios.post('/api/cycle-tracking/save', { cycleData:appData })
+				.then(response => {
+					{ this.$bus.$emit('notification', 'Data Saved') }
+				})
+				.catch(error => { this.$bus.$emit('notification', error) })
+			},
+			deleteData(){
+				axios.post('/api/cycle-tracking/save', { cycleData:'' })
+				.then(response => {
+					{ this.$bus.$emit('notification', 'Data Deleted') }
+				})
+			},
+			setupFields(){
+
+				// push the first 3 default fields to users set
+				if(this.fields.length == 0){
+					for (let i = 0; i < 3; i++) {
+						this.fields.push(this.defaultFields[i])
+					}
+				}
+			},
+			setupCalendar(date){
+				// ------------
+				// setup calendar display
+				var y = date.getFullYear()
+				var m = date.getMonth()
+
+				var firstDay = new Date(y, m, 1);
+				var lastDay = new Date(y, m + 1, 0);
+
+				function getDaysInMonth(year, month) {
+					return new Date(year, month, 0).getDate();
+				}
+
+				const currentYear = date.getFullYear();
+				const currentMonth = date.getMonth() + 1;
+				this.calendar.monthName = date.toLocaleString("en-US", { month: "long" });
+				this.calendar.year = currentYear
+				const daysInCurrentMonth = getDaysInMonth(currentYear, currentMonth);
+
+				const monthStartDay = firstDay.getDay()
+				let days = Array(monthStartDay).fill("."); // Pad days to start on correct weekday
+				for (let i = 0; i < daysInCurrentMonth; i++) {
+					days.push(i+1)
+				}
+				this.calendar.days = days
+
+				// set today
+				this.calendar.today = date.getDate()
+				this.calendar.month = date.getMonth()+1
+
+
+				/*
+					October 2022
+				S M T W T F S
+				  1 2 3 4 5 6
+				7 8 9 
+				*/
+
+				// -------
+			}
+		}
+	}
+</script>

client/src/pages/HomePage.vue

@@ -562,10 +562,10 @@ export default {
 	},
 	beforeCreate(){
 		//Force HTTPS on prod, always. Dev doesn't have certs
-		const isDev = process.env['NODE_ENV'] == 'development'
-		if (!isDev && location.protocol != 'https:'){
-			window.location.replace('https://www.solidscribe.com')
-		}
+		// const isDev = process.env['NODE_ENV'] == 'development'
+		// if (!isDev && location.protocol != 'https:'){
+		// 	window.location.replace('https://www.solidscribe.com')
+		// }
 	},
 	beforeMount(){
 		

client/vue.config.js

@@ -0,0 +1,23 @@
+const fs = require("fs");
+
+module.exports = {
+  pwa: {
+    name: "SolidScribe",
+    iconPaths: {
+      favicon32: null,
+      favicon16: null,
+      appleTouchIcon: null,
+      maskIcon: null,
+      msTileImage: null,
+    },
+  },
+  //   devServer: {
+  //     disableHostCheck: true,
+  //     proxy: "http://localhost:8081",
+  //     public: "blarvin.local",
+  //     https: {
+  //       key: fs.readFileSync("./certs/192.168.1.164+4-key.pem"),
+  //       cert: fs.readFileSync("./certs/192.168.1.164+4.pem"),
+  //     },
+  //   },
+};