Added cycle tracking beta to app

This commit is contained in:
Max 2022-10-21 19:34:13 +00:00
parent f12be22765
commit 178a7dfc2c
5 changed files with 702 additions and 179 deletions

View File

@ -169,6 +169,10 @@ i.green.icon.icon.icon.icon {
}
.button {
box-shadow: 2px 2px 4px -2px rgba(40, 40, 40, 0.89) !important;
transition: all 0.9s ease;
}
.button:hover {
box-shadow: 3px 2px 5px -2px rgba(40, 40, 40, 0.95) !important;
}
.ui.green.buttons, .ui.green.button, .ui.green.button:hover {
background-color: var(--main-accent);

View File

@ -1,101 +1,423 @@
<style>
.calendar {
width: 300px;
height: 400px;
display: inline-block;
.squire-box {
padding: 0 !important;
}
div.calendar {
width: calc(100% - 20px);
min-height: 350px;
display: flex;
margin: 5px 10px 15px;
flex-wrap: wrap;
flex-direction: row;
justify-content: flex-start;
}
.day {
width: 40px;
height: 40px;
/*width: calc(100% / 8);*/
flex: 0 0 calc(14.28% - 2px);
height: 50px;
border: 1px solid var(--border_color);
display: inline-block;
text-align: center;
font-size: 1.2em;
cursor: pointer;
/*overflow: hidden;*/
box-sizing: border-box;
margin: 1px;
padding: 0 0 0 5px;
position: relative;
}
.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;
}
.today {
font-weight: bold;
text-decoration: underline;
}
.day ~ .active {
outline: #07f4f4;
outline-style: none;
outline-width: medium;
outline-style: none;
outline-offset: -1px;
outline-style: solid;
outline-width: 3px;
}
.day ~ .has-data {
}
.day ~ .no-data {
background: #c7c7c787;
opacity: 0.6;
}
.day > .number {
position: absolute;
top: 0;
right: 5px;
z-index: 10;
}
.day > .sex {
font-size: 0.7em;
border-radius: 5px;
background: rgba(249, 0, 0, 0.15);
color: white;
padding: 0 0 0 4px;
z-index: 10;
position: absolute;
left: 0;
height: 26px;
}
.day > .period {
position: absolute;
bottom: 1px;
left: 1px;
right: 1px;
height: 5px;
background: red;
z-index: 10;
}
.day > .mucus {
position: absolute;
bottom: 0;
left: 0;
right: 0;
min-height: 10px;
background: #abecff7d;
z-index: 2;
}
.day > .notes {
}
.key-holder {
display: flex;
width: 100%;
flex-wrap: wrap;
flex-direction: row;
justify-content: flex-start;
}
.key-display {
/*width: calc(100% - 70px);*/
float: left;
height: 50px;
box-sizing: border-box;
padding: 10px 0 0 10px;
/*flex-basis: 70%;*/
flex: 1 0 80%;
}
.option-buttons {
display: flex;
width: 100%;
flex-wrap: wrap;
flex-direction: column;
}
.option-buttons > div.button {
flex: 1;
margin: 0 0 3px 0;
text-align: left;
}
</style>
<template>
<div class="squire-box">
<h3>Cycle Tracking Beta
<div class="ui centered dividing header">
<br>
Metric Tracking Beta
<span v-on:click="deleteData()">
<i class="clickable trash icon"></i>
</span>
</h3>
<i class="clickable trash icon"></i>
</span>
</div>
<!-- data input -->
<div class="ui basic segment">
<div class="ui very compact grid">
<div class="ui twelve wide middle aligned column">
<div class="ui header">
Entry for {{ calendar.monthName }}, {{ calendar.today }}
</div>
</div>
<div class="ui four wide right aligned middle aligned column">
<span v-if="saving == 0">
<i class="heart icon"></i>
</span>
<span v-if="saving == 1">
<i class="asterisk icon"></i>
</span>
<span v-if="saving == 2">
<i class="sync loading icon"></i>
</span>
<span v-if="saving == 3">
<i class="green circle check icon"></i>
</span>
</div>
</div>
<div class="ui form">
<div class="ui compact grid">
<div v-for="field in fields" :class="defaultFields[field].width || 'eight wide column'">
<!-- field label display -->
<div class="ui very compact grid">
<div class="ui fourteen wide column">
<i v-if="defaultFields[field].icon" :class="`${defaultFields[field].icon} icon`"></i>
<b>{{ defaultFields[field].label }} </b>
</div>
<div class="ui two wide right aligned column">
<span v-on:click="fieldRemove(field)">
<i class="grey clickable minus icon"></i>
</span>
</div>
</div>
<!-- float -->
<div v-if="defaultFields[field].type == 'float'" class="ui fluid input">
<input type="text" :placeholder="defaultFields[field].label" v-on:keyup="e => saveField(field, e.target.value)" :value="openDay[field]">
</div>
<!-- range -->
<div v-if="defaultFields[field].type == 'shortRange'">
<div :class="{green:(openDay[field] == 1)}" v-on:click="saveField(field, 1)" class="ui button">1</div>
<div :class="{green:(openDay[field] == 2)}" v-on:click="saveField(field, 2)" class="ui button">2</div>
<div :class="{green:(openDay[field] == 3)}" v-on:click="saveField(field, 3)" class="ui button">3</div>
<div :class="{green:(openDay[field] == 4)}" v-on:click="saveField(field, 4)" class="ui button">4</div>
<div :class="{green:(openDay[field] == 5)}" v-on:click="saveField(field, 5)" class="ui button">5</div>
</div>
<!-- text area -->
<div v-if="defaultFields[field].type == 'text'">
<textarea rows="3" v-on:keyup="e => saveField(field, e.target.value)">{{ openDay[field] }}</textarea>
</div>
<!-- boolean -->
<div v-if="defaultFields[field].type == 'boolean'">
<div :class="{green:(openDay[field] == 1)}" v-on:click="saveField(field, 1)" class="ui button">Yes</div>
<div :class="{green:(openDay[field] == 2)}" v-on:click="saveField(field, 2)" class="ui button">No</div>
</div>
<div v-if="['sex','period','mucus','pms'].includes(defaultFields[field].type)">
<div class="option-buttons">
<div :class="{green:(openDay[field] == key)}" v-on:click="saveField(field, key)" class="ui compact button" v-for="(item,key) in fieldTypes[defaultFields[field].type].split(',')">{{ item }}</div>
</div>
</div>
</div>
</div>
</div>
<span class="clickable" v-on:click="toggleFolded('fieldOptions')">
<i class="tiny circular blue clickable plus icon"></i>
Add/Remove Fields
</span>
<div class="ui very compact grid" v-if="folded.includes('fieldOptions')">
<div class="ui row">
<div class="eight wide column">
<span>
<i class="ui disabeld plus icon"></i>
</span>
<b>Name</b>
</div>
<div class="six wide column">
<b>Type</b>
</div>
</div>
<div class="ui row" v-for="(field,fieldId) in defaultFields" v-if="!fields.includes(fieldId)">
<div class="eight wide column">
<span v-on:click="fieldAdd(fieldId)">
<i class="ui clickable orange plus icon"></i>
</span>
{{ field.label }}
</div>
<div class="six wide column">
{{ fieldTypes[field.type] }}
</div>
<div class="two wide column">
{{ openDay[fieldId] }}
</div>
</div>
</div>
</div>
<!-- day navigation -->
<div class="ui compact grid">
<div class="ui five wide right aligned column">
<div class="ui tiny basic compact button" v-on:click="openDayData(getPreviousDay)">
<i class="caret left icon"></i>
Previous
</div>
</div>
<div class="ui six wide center aligned column">
<div class="ui tiny basic compact button" v-on:click="openDayData(getToday)">
<i class="caret down icon"></i>
Today
</div>
</div>
<div class="ui five wide left aligned column">
<div class="ui tiny basic compact button" v-on:click="openDayData(getNextDay)">
Next
<i class="caret right icon"></i>
</div>
</div>
</div>
<div class="ui very compact grid">
<div class="ui four wide column">
<span v-on:click="openDayData(getPreviousMonth)">
<i class="clickable caret square left outline icon"></i>
</span>
</div>
<div class="ui eight wide center aligned column">
<p>{{calendar.monthName}}, {{calendar.year}}</p>
</div>
<div class="ui four wide right aligned column">
<span v-on:click="openDayData(getNextMonth)">
<i class="clickable caret square right outline icon"></i>
</span>
</div>
</div>
<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}`,
'active':calendar.dateCode == `${day}.${calendar.month}.${calendar.year}`,
'has-data':cycleData[`${day}.${calendar.month}.${calendar.year}`],
'no-data':showDayDataColor(day),
}"
v-on:click="openDayData(`${day}.${calendar.month}.${calendar.year}`)">
{{ day }}
<span class="number">{{ day }}</span>
<!-- period display -->
<span v-if="isPeriod(day)" class="period"></span>
<!-- sex display -->
<span v-if="isSex(day) > 0" class="sex" >
<span v-if="isSex(day) == 1">
<i class="red heart icon"></i>
</span>
<span v-if="isSex(day) == 2">
<i class="red baby carriage icon"></i>
</span>
</span>
<!-- mucus display -->
<span v-if="isMucus(day)" class="mucus" :style="`top:${100-(isMucus(day)*22)}%`">
</span>
</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 class="ui basic segment">
<div class="ui clickable" v-on:click="toggleFolded('key')">
<i class="tiny circular blue clickable plus icon"></i>
Calendar Explanation
</div>
<div class="ui segment key-holder" v-if="folded.includes('key')">
<div class="day">
<span class="number">1</span>
<span class="period"></span>
</div>
<span class="key-display">
Period in Progress
</span>
</div>
<div class="day">
<span class="number">1</span>
<span class="mucus" :style="`top:50%`">
</span>
</div>
<span class="key-display">
Amount of cervical mucus
</span>
<div class="ui green save button" v-on:click="saveDayData">
Save
<div class="day">
<span class="number">1</span>
<span class="sex" >
<span>
<i class="red heart icon"></i>
</span>
</span>
</div>
<span class="key-display">
Had sex with contraception
</span>
<div class="day">
<span class="number">1</span>
<span class="sex" >
<span>
<i class="red baby carriage icon"></i>
</span>
</span>
</div>
<span class="key-display">
Had sex without contraception
</span>
<div class="day no-data">
<span class="number">1</span>
</div>
<span class="key-display">
No Data entered
</span>
</div>
</div>
<!-- Temp graph -->
<div class="ui basic segment" >
<div class="ui dividing header">
Basil temp last {{ tempChartDays }} days
</div>
<div class="ui tiny compact basic fluid buttons">
<div :class="{'green':(tempChartDays == 1000000)}" v-on:click="tempChartDays = 1000000; graphCurrentData()" class="ui button">ALL</div>
<div :class="{'green':(tempChartDays == 360)}" v-on:click="tempChartDays = 360; graphCurrentData()" class="ui button">360</div>
<div :class="{'green':(tempChartDays == 180)}" v-on:click="tempChartDays = 180; graphCurrentData()" class="ui button">180</div>
<div :class="{'green':(tempChartDays == 90)}" v-on:click="tempChartDays = 90; graphCurrentData()" class="ui button">90</div>
<div :class="{'green':(tempChartDays == 60)}" v-on:click="tempChartDays = 60; graphCurrentData()" class="ui button">60</div>
<div :class="{'green':(tempChartDays == 30)}" v-on:click="tempChartDays = 30; graphCurrentData()" class="ui button">30</div>
<div :class="{'green':(tempChartDays == 7)}" v-on:click="tempChartDays = 7; graphCurrentData()" class="ui button">7</div>
</div>
<div id="graphdiv" style="width: 100%; min-height: 320px;"></div>
</div>
<!-- notes -->
<div class="ui basic segment">
<div class="ui clickable" v-on:click="toggleFolded('notes')">
<i class="tiny circular blue clickable plus icon"></i>
Additional Notes
</div>
<div class="ui fitted segments" v-if="folded.includes('notes')">
<div class="ui segment">
<a href="https://www.plannedparenthood.org/learn/birth-control/fertility-awareness">Further Reading on planned parenthood.</a>
</div>
<div class="ui segment">
Follicular phase
Luteal phase
</div>
<div class="ui segment">
Ovulation is detected by sustained temperate elevation. <br>
Ovulation can only be determined in hindsight, as progesterone is what makes the temperatures rise, and progesterone is only produced in abundance post-ovulation.
</div>
<div class="ui segment">
Some people may find that their temperature drops the day before or the day their period arrives. This is a very helpful sign in knowing that your period is on its way!
</div>
<div class="ui segment">
About halfway through your menstrual cycle, your hormones tell one of your ovaries to release a mature egg this is called ovulation. Most people dont feel it when they ovulate, but some ovulation symptoms are bloating, spotting, or a little pain in your lower belly that you may only feel on one side.
</div>
<div class="ui segment">
If you do get pregnant, your body needs the lining thats why your period stops during pregnancy. Your period comes back when youre not pregnant anymore.
</div>
</div>
</div>
<!-- spacer at the bottom for mobile menu -->
<div class="ui basic segment"></div>
<!-- may or may not need digraph CSS, maybe disect -->
<!-- <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/dygraph/2.1.0/dygraph.min.css" /> -->
</div>
</template>
@ -103,24 +425,50 @@
import axios from 'axios'
var BASAL_TEMP = 'BT'
export default {
name: 'CycleTracking',
name: 'MetricTracking',
components: {
'logo':require('@/components/LogoComponent.vue').default,
},
data () {
return {
appWorkingDate: null,
folded:[],
working: true,
showNotes: false,
fields:[],
defaultFields:[
{'type':'float','label':'Basil Temp', 'id':'BT'},
{'type':'range','label':'Cervical Mucus', 'id':'CM'},
{'type':'text','label':'Notes', 'id':'NO'},
],
fieldTypes:{
'float':'Precise Number',
'shortRange':'Options 1-5',
'longRange':'Options 1-10',
'text':'Text Input',
'boolean':'Yes, No',
'period':'No, 1. Light, 2. Normal, 3. Heavy, 4. Irregular, 5. Painful',
'mucus':'None, 1. Watery, 2. Eggwhite, 3. Creamy, 4. Sticky',
'sex':'None, With contraception, Without contraception',
'pms':'No, 1. Maybe, 2. A little, 3. Real Cranky',
},
defaultFields:{
'BT': {'type':'float','label':'Basal Temp','icon':'thermometer half','width':'sixteen wide column'},
'CM': {'type':'mucus','label':'Cervical Mucus','icon':'','width':'eight wide column'},
'PE': {'type':'period','label':'Having Period','icon':'','width':'eight wide column'},
'SE': {'type':'sex','label':'Sex','icon':'','width':'eight wide column'},
'NO': {'type':'text','label':'Notes','icon':'','width':'sixteen wide column'},
'OV': {'type':'boolean','label':'Suspect Ovulation','icon':'','width':''},
'PM': {'type':'pms','label':'PMS','icon':'','width':''},
'HO': {'type':'boolean','label':'Horny','icon':'','width':''},
'DI': {'type':'text','label':'Diet','icon':'','width':''},
'EX': {'type':'text','label':'Exercise','icon':'','width':''},
},
cycleData: {},
dateCode: null,
openDay: [],
totalEntries: 0,
openDay: {},
saveDataDebounce:null,
saving: 0, // 0 blank, 1 modified, 2 saving, 3 saved
calendar: {
dateObject: null,
dateCode: null,
monthName: '',
month: '',
year: '',
@ -128,6 +476,7 @@
weekdays: ['S','M','T','W','T','F','S'],
today: 0,
},
tempChartDays: 60,
}
},
beforeCreate() {
@ -141,25 +490,178 @@
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)
]
// set up reactive open day object
Object.keys(this.defaultFields).forEach(fieldId => {
this.$set(this.openDay, fieldId, '')
})
this.dateCode = dateSetup.join('.')
// Include JS libraries
let graphs = document.createElement('script')
graphs.setAttribute('src', '//cdnjs.cloudflare.com/ajax/libs/dygraph/2.1.0/dygraph.min.js')
document.head.appendChild(graphs)
this.setupCalendar(this.appWorkingDate)
// setup date to today
this.setupCalendar()
this.fetchCycleData()
},
computed: {
getToday(){
return this.generateDateCode(new Date())
},
getPreviousDay(){
const workingDate = this.calendar.dateObject || new Date()
workingDate.setDate(workingDate.getDate()-1)
return this.generateDateCode(workingDate)
},
getNextDay(){
const workingDate = this.calendar.dateObject || new Date()
workingDate.setDate(workingDate.getDate()+1)
return this.generateDateCode(workingDate)
},
getNextMonth(){
const workingDate = this.calendar.dateObject || new Date()
workingDate.setMonth(workingDate.getMonth() +1)
return this.generateDateCode(workingDate)
},
getPreviousMonth(){
const workingDate = this.calendar.dateObject || new Date()
workingDate.setMonth(workingDate.getMonth() -1)
return this.generateDateCode(workingDate)
},
},
methods: {
toggleFolded(key){
const index = this.folded.indexOf(key)
if(index == -1){
this.folded.push(key)
return
}
this.folded.splice(index,1)
},
showDayDataColor(day){
// Determine if day has any data set
if(day == ''){
return false
}
return !(this.cycleData[`${day}.${this.calendar.month}.${this.calendar.year}`])
},
isPeriod(day){
const data = this.cycleData[`${day}.${this.calendar.month}.${this.calendar.year}`]
if(data?.PE > 0){
return true
}
},
isSex(day){
const data = this.cycleData[`${day}.${this.calendar.month}.${this.calendar.year}`]
return data?.SE
},
isMucus(day){
const data = this.cycleData[`${day}.${this.calendar.month}.${this.calendar.year}`]
return data?.CM
},
isNotes(day){
const data = this.cycleData[`${day}.${this.calendar.month}.${this.calendar.year}`]
return data?.NO
},
isTemp(day){
const data = this.cycleData[`${day}.${this.calendar.month}.${this.calendar.year}`]
return data?.BT
},
fieldRemove(field){
for (let i = this.fields.length - 1; i >= 0; i--) {
if(field == this.fields[i]){
this.fields.splice(i,1)
break
}
}
this.saveCycleData()
},
fieldAdd(fieldId){
this.fields.push(fieldId)
this.saveCycleData()
},
graphCurrentData(){
// CSV or path to a CSV file.
let dataString = "Date,Temperature,Average\n"
// Excel date format YYYYMMDD
const convertToExcelDate = (dateCode) => {
return dateCode
.split('.')
.reverse()
.map(item => String(item).padStart(2,0))
.join('')
}
const dataKeys = Object.keys(this.cycleData)
// calculate average
let average = 0.0
let totalTemps = 0
for (var i = 0; i < dataKeys.length; i++) {
const current = this.cycleData[dataKeys[i]]
if(current.BT){
average += parseFloat(current.BT)
totalTemps++
}
}
average = (average/totalTemps)
// build CSV data
for (var i = 0; i < dataKeys.length; i++) {
const current = this.cycleData[dataKeys[i]]
let nextFragment = []
// push date code
nextFragment.push(convertToExcelDate(dataKeys[i]))
if(current.BT){
// parse temp to fixed length float 00.00
nextFragment.push(parseFloat(current.BT).toFixed(2))
} else {
continue
}
nextFragment.push(average)
dataString += nextFragment.join(',') + "\n"
if(i >= this.tempChartDays){
break
}
}
let graphDiv = document.getElementById("graphdiv")
const graphOptions = {
animatedZoom: true,
}
const g = new Dygraph(graphDiv, dataString ,graphOptions)
},
saveField(fieldId, value){
this.openDay[fieldId] = value
// Dont save value if it hasn't changed
if(this.openDay[fieldId] == value){ return }
// update field to be reactive
this.$set(this.openDay, fieldId, value)
// remove debounce and set to modified
this.$nextTick(() => {
//0 blank, 1 modified, 2 saving, 3 saved
this.saving = 1
clearTimeout(this.saveDataDebounce)
this.saveDataDebounce = setTimeout(() => {
this.saveDayData()
}, 500)
})
},
openDayData(dateCode){
@ -168,16 +670,14 @@
return
}
this.dateCode = dateCode || this.dateCode
this.setupCalendar(this.dateCodeToDate(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] || ''
// open day has all fields defined, just set values
let currentDay = this.cycleData[dateCode] || {}
Object.keys(this.openDay).forEach(fieldId => {
this.openDay[fieldId] = currentDay[fieldId] || ''
})
this.openDay = currentDay
},
saveDayData(){
@ -185,15 +685,18 @@
// remove empty keys
let cleanDayData = {}
Object.keys(this.openDay).forEach(key => {
if(this.openDay[key] != ''){
if(this.openDay[key] != '' && this.openDay[key] != 0){
cleanDayData[key] = this.openDay[key]
}
})
this.cycleData[this.dateCode] = cleanDayData
// Only save entry if there is data
delete this.cycleData[this.calendar.dateCode]
if(Object.keys(cleanDayData).length > 0){
this.cycleData[this.calendar.dateCode] = cleanDayData
}
// Update calendar
this.setupCalendar(this.appWorkingDate)
this.graphCurrentData()
this.saveCycleData()
@ -211,14 +714,20 @@
console.log('Didnt parse json')
}
console.log(appData)
// console.clear()
// console.log(appData)
this.cycleData = appData?.cycleData || {}
this.fields = appData?.fields || []
this.$nextTick(() => {
this.totalEntries = Object.keys(this.cycleData).length
this.setupFields()
this.openDayData(this.dateCode)
this.openDayData(this.calendar.dateCode)
this.graphCurrentData()
this.generateTonsOfRandomData()
})
}
})
@ -231,9 +740,17 @@
fields: this.fields,
cycleData: this.cycleData,
})
// 0 blank, 1 modified, 2 saving, 3 saved
this.saving = 2 // Working
this.totalEntries = Object.keys(this.cycleData).length
axios.post('/api/cycle-tracking/save', { cycleData:appData })
.then(response => {
{ this.$bus.$emit('notification', 'Data Saved') }
// { this.$bus.$emit('notification', 'Data Saved') }
this.saving = 3 //Saved
setTimeout(() => {
this.saving = 0 //Reset
}, 2000)
})
.catch(error => { this.$bus.$emit('notification', error) })
},
@ -241,18 +758,54 @@
axios.post('/api/cycle-tracking/save', { cycleData:'' })
.then(response => {
{ this.$bus.$emit('notification', 'Data Deleted') }
this.fetchCycleData()
})
},
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])
const fieldKeys = Object.keys(this.defaultFields)
console.log('Setup default fierds')
for (let i = 0; i < 5; i++) {
this.fields.push(fieldKeys[i])
}
}
},
generateDateCode(date){
const dateSetup = [
date.getDate(), // 1-31 (Day)
date.getMonth()+1, // 0-11 (Month)
date.getFullYear(), // 1888-2022 (Year)
]
return dateSetup.join('.')
},
dateCodeToDate(dateCode){
const dateChunk = dateCode.split('.')
return new Date(dateChunk[2], dateChunk[1]-1, dateChunk[0])
},
setupCalendar(date){
this.working = true
setTimeout(() => {
this.working = false
}, 500)
if(!date && this.dateObject){
date = this.dateObject
}
if(!date){
date = new Date()
}
this.calendar.dateObject = date
this.calendar.dateCode = this.generateDateCode(date)
// ------------
// setup calendar display
var y = date.getFullYear()
@ -272,7 +825,7 @@
const daysInCurrentMonth = getDaysInMonth(currentYear, currentMonth);
const monthStartDay = firstDay.getDay()
let days = Array(monthStartDay).fill("."); // Pad days to start on correct weekday
let days = Array(monthStartDay).fill(""); // Pad days to start on correct weekday
for (let i = 0; i < daysInCurrentMonth; i++) {
days.push(i+1)
}
@ -291,7 +844,33 @@
*/
// -------
}
},
generateTonsOfRandomData(){
return
let workingDate = new Date()
for (var i = 0; i < 365 * 2; i++) {
const cycleTime = (i%30)+1
const randomInt = Math.floor(Math.random() * cycleTime+20) + (cycleTime);
let randomTemp = parseFloat(`97.${randomInt}`)
const randomFive = Math.floor(Math.random() * 4) + 0;
const randomHundo = Math.floor(Math.random() * 100) + 1;
const randUnoOrDuo = Math.floor(Math.random() * 2) + 1;
this.cycleData[this.generateDateCode(workingDate)] = {
'BT':randomTemp,
'CM':randomFive,
'SE':randomHundo > 90 ? randUnoOrDuo : 0,
}
workingDate.setDate(workingDate.getDate()-1)
}
this.graphCurrentData(5000)
},
}
}
</script>

View File

@ -48,7 +48,7 @@ export default new Vuex.Store({
'small_element_bg_color': '#000',
'text_color': '#FFF',
'dark_border_color': '#555',//'#ACACAC', //Lighter color to accent elemnts user can interact with
'border_color': '#0b0110',
'border_color': '#505050',
'menu-accent': '#626262',
'menu-text': '#d9d9d9',
},

View File

@ -2,12 +2,22 @@
# Working dev server config
#
server {
listen 80;
listen [::]:80;
server_name 192.168.1.164;
return 301 https://$host$request_uri;
}
server {
listen 443 ssl;
ssl_certificate /home/mab/ss/client/certs/192.168.1.164+4.pem;
ssl_certificate_key /home/mab/ss/client/certs/192.168.1.164+4-key.pem;
ssl_certificate /home/mab/ss/client/certs/nginx-selfsigned.crt;
ssl_certificate_key /home/mab/ss/client/certs/nginx-selfsigned.key;
ssl_dhparam /home/mab/ss/client/certs/dhparam.pem;
ssl_session_cache shared:SSL:1m;
ssl_session_timeout 5m;
ssl_protocols TLSV1.1 TLSV1.2 TLSV1.3;
@ -67,77 +77,6 @@ server {
}
##
## Working Copy below --------------------------------------------
##
server {
listen 443 ssl;
ssl_certificate /home/mab/ss/client/certs/192.168.1.164+4.pem;
ssl_certificate_key /home/mab/ss/client/certs/192.168.1.164+4-key.pem;
ssl_session_cache shared:SSL:1m;
ssl_session_timeout 5m;
ssl_protocols TLSV1.1 TLSV1.2 TLSV1.3;
ssl_ciphers HIGH:!aNULL:!MD5;
ssl_prefer_server_ciphers on;
access_log /var/log/nginx/httpslocalhost.access.log;
error_log /var/log/nginx/httpslocalhost.error.log;
client_max_body_size 20M;
location / {
proxy_pass https://127.0.0.1:8081;
proxy_set_header Host localhost;
proxy_set_header X-Forwarded-Host localhost;
proxy_set_header X-Forwarded-Server localhost;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_redirect off;
proxy_connect_timeout 90s;
proxy_read_timeout 90s;
proxy_send_timeout 90s;
proxy_ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
}
location /sockjs-node {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-NginX-Proxy true;
proxy_pass https://127.0.0.1:8081;
proxy_redirect off;
proxy_ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
}
location /api {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-NginX-Proxy true;
proxy_pass http://127.0.0.1:3000;
proxy_redirect off;
proxy_ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
}
location /socket {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-NginX-Proxy true;
proxy_pass http://127.0.0.1:3001;
proxy_redirect off;
proxy_ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
}
}
# Prod settings to serve static index

View File

@ -994,7 +994,8 @@ Note.search = (userId, searchQuery, searchTags, fastFilters, masterKey) => {
LEFT JOIN tag ON (tag.id = note_tag.tag_id)
LEFT JOIN attachment ON (note.id = attachment.note_id AND attachment.visible = 1)
LEFT JOIN user as shareUser ON (note.share_user_id = shareUser.id)
WHERE note.user_id = ?
WHERE note.user_id = ?
AND note.quick_note <= 1
`
//If text search returned results, limit search to those ids