Max/SolidScribe
1
0
Fork 0
Code Issues 24 Pull Requests Releases Wiki Activity

Added some realtime events to the app

Browse Source 
* When a user gets a new shared message, it will popup instantly
* When a new website is scraped, it will update in real time
* Various other little bug fixes and improvements
* Sharing displays correct notes and handles shared notes correctly
* Tags were not displaying on notes, they do now. They better.
This commit is contained in:
Max G
2020-02-14 01:08:46 +00:00
parent a51d81b013
commit daa674c54f
14 changed files with 247 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
client/src/App.vue
View File

@@ -27,10 +27,17 @@ export default {
},
beforeCreate: function(){
//Puts token into state on page load
let token = localStorage.getItem('loginToken')
let username = localStorage.getItem('username')
// const socket = io({ path:'/socket' });
const socket = this.$io
socket.on('connect', () => {
this.$store.commit('setSocketIoSocket', socket.id)
this.$io.emit('user_connect', token)
})
//Detect if user is on a mobile browser and set a flag in store
@@ -41,16 +48,20 @@ export default {
this.$store.commit('toggleNightMode')
}
//Puts token into state on page load
let token = localStorage.getItem('loginToken')
let username = localStorage.getItem('username')
//Put user data into global store on load
if(token){
this.$store.commit('setLoginToken', {token, username})
}
},
mounted: function(){
//Update totals for entire app on event
this.$io.on('update_counts', () => {
console.log('Got event, update totals')
this.$store.dispatch('fetchAndUpdateUserTotals')
})
},
computed: {
loggedIn () {

113
client/src/components/AnimatedCounterComponent.vue Normal file
View File

@@ -0,0 +1,113 @@
<style type="text/css" scoped>
.numtainer {
height: 1.1em;
font-size: 1em;
overflow: hidden;
display: inline-block;
box-sizing: border-box;
}
.start-high {
color: #4dc86a;
animation: startHigh 0.5s forwards;
}
.start-low {
color: #4dc86a;
animation: startLow 0.5s forwards;
}
@keyframes startLow {
0% {
margin-top: 0;
}
100% {
margin-top: -1.2em;
}
}
@keyframes startHigh {
0% {
margin-top: -1.2em;
}
100% {
margin-top: 0;
}
}
</style>
<template>
<div class="numtainer">
<div v-if="animateUp">
<div class="start-high">{{ newNumber }}</div>
<div>{{ oldNumber }}</div>
</div>
<div v-if="animateDown">
<div class="start-low">{{ oldNumber }}</div>
<div>{{ newNumber }}</div>
</div>
<div v-if="totals">{{ totals[numberId] }}</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
name: 'AnimatedCounterComponent',
props: [ 'numberId' ],
data () {
return {
oldNumber: 100,
newNumber: 99,
animateUp: false,
animateDown: false,
}
},
computed: {
...mapGetters(['totals'])
},
watch:{
totals(newVal, oldVal){
if(oldVal && newVal && newVal[this.numberId] != oldVal[this.numberId]){
console.log('New number ', newVal[this.numberId])
this.oldNumber = oldVal[this.numberId]
this.newNumber = newVal[this.numberId]
if(this.oldNumber > this.newNumber){
this.animateDown = true
} else {
this.animateUp = true
}
setTimeout( () => {
this.animateUp = false
this.animateDown = false
}, 550)
}
}
},
beforeMount(){
},
mounted(){
},
methods: {
onFileClick(file){
},
}
}
</script>

7
client/src/components/GlobalSiteMenu.vue
View File

@@ -21,7 +21,7 @@
.menu-item {
color: #fff;
padding: 0.8em 0px 0.8em 10px;
padding: 0.8em 10px 0.8em 10px;
display: inline-block;
width: 100%;
font-size: 1.15em;
@@ -154,7 +154,7 @@
<div class="menu-section" v-if="loggedIn">
<router-link exact-active-class="active" class="menu-item menu-button" to="/notes" v-on:click.native="emitReloadEvent()">
<i class="file outline icon"></i>Notes
<!-- <span v-if="$store.getters.totals">{{ $store.getters.totals['totalNotes'] }}</span> -->
<counter class="float-right" number-id="totalNotes" />
</router-link>
<div>
<!-- <div class="menu-item sub">Show Only <i class="caret down icon"></i></div> -->
@@ -167,7 +167,7 @@
<div class="menu-section" v-if="loggedIn && $store.getters.totals && $store.getters.totals['totalFiles']">
<router-link class="menu-item menu-button" exact-active-class="active" to="/attachments">
<i class="folder open outline icon"></i>Files
<!-- <span>{{ $store.getters.totals['totalFiles'] }}</span> -->
<counter class="float-right" number-id="totalFiles" />
</router-link>
</div>
@@ -216,6 +216,7 @@
export default {
components: {
'search-input': require('@/components/SearchInput.vue').default,
'counter':require('@/components/AnimatedCounterComponent.vue').default,
},
data: function(){
return {

4
client/src/components/NoteTitleDisplayCard.vue
View File

@@ -15,6 +15,10 @@
<div class="sixteen wide column overflow-hidden note-card-text" @click="e => onClick(note.id, e)">
<div class="subtext" v-if="note.shareUsername">Shared by {{ note.shareUsername }}</div>
<div class="subtext" v-if="note.shared == 2">You Shared</div>
<!-- Title display -->
<div v-if="note.title.length > 0"
data-test-id="title"

36
client/src/pages/NotesPage.vue
View File

@@ -14,8 +14,11 @@
<div class="ten wide column" :class="{ 'sixteen wide column':$store.getters.getIsUserOnMobile }">
<div class="ui basic button" v-on:click="updateFastFilters(3)" v-if="$store.getters.totals && $store.getters.totals['sharedToNotes'] > 0" style="position: relative;">
<i class="green mail icon"></i>Inbox
<div class="ui basic button"
v-on:click="updateFastFilters(3)"
v-if="$store.getters.totals && ($store.getters.totals['sharedToNotes'] > 0 || $store.getters.totals['sharedFromNotes'] > 0)"
style="position: relative;">
<i class="green mail icon"></i>Shared Notes
<span class="floating ui green label" v-if="$store.getters.totals['unreadNotes'] > 0">
{{ $store.getters.totals['unreadNotes'] }}
</span>
@@ -40,6 +43,11 @@
</div>
<h2 v-if="fastFilters['withLinks'] == 1">Notes with Links</h2>
<h2 v-if="fastFilters['withTags'] == 1">Notes with Tags</h2>
<h2 v-if="fastFilters['onlyArchived'] == 1">Archived Notes</h2>
<h2 v-if="fastFilters['onlyShowSharedNotes'] == 1">Shared Notes</h2>
<div v-if="commonTags.length > 0" class="sixteen wide column">
<h4><i class="green tags icon"></i>Tags</h4>
@@ -50,19 +58,17 @@
</span>
</div>
<h2 v-if="fastFilters['withLinks'] == 1">Only showing notes containing Links</h2>
<h2 v-if="fastFilters['withTags'] == 1">Only showing notse with Tags</h2>
<h2 v-if="fastFilters['onlyArchived'] == 1">Only showing Archived notes.</h2>
<!-- Note title card display -->
<div class="sixteen wide column">
<h3 v-if="searchTerm.length > 0 && notes.length == 0">No notes found. Check your spelling, try completing the word or using a different phrase.</h3>
<h3 v-if="searchTerm.length == 0 && notes.length == 0">Create your first note. Click the "New Note" button.</h3>
<h3 v-if="$store.getters.totals && $store.getters.totals['totalNotes'] == 0">
No Notes Yet. Create one when you feel ready.
</h3>
<div v-if="working">
<!-- <div v-if="working">
<div class="ui active inline loader"></div> Working...
</div>
</div> -->
<!-- Go to one wide column, do not do this on mobile interface -->
<div v-if="notes !== null && notes.length > 0"
@@ -155,6 +161,7 @@
'fast-filters': require('@/components/FastFilters.vue').default,
'search-input': require('@/components/SearchInput.vue').default,
'attachment-display': require('@/components/AttachmentDisplayCard').default,
'counter':require('@/components/AnimatedCounterComponent.vue').default
},
data () {
return {
@@ -196,7 +203,16 @@
lastVisibilityState: null,
foundAttachments: []
foundAttachments: [],
noteSections: {
'pinned': {},
'archived': {},
'recieved': {},
'sent':{},
'notes':{},
'textMatch':{}
}
}
},