Remove timeline area of AddColumn/Public component

This commit is contained in:
kPherox 2019-05-22 12:35:33 +09:00
parent 2133ff22d0
commit a7c09009a7
No known key found for this signature in database
GPG Key ID: C04751C2BFA2F62D

View File

@ -1,6 +1,5 @@
<template> <template>
<div> <div>
<div v-if="showInput">
<form @submit.prevent="addTL"> <form @submit.prevent="addTL">
<BaseInputText placeholder="e.g:mstdn.jp" v-model="instance"/> <BaseInputText placeholder="e.g:mstdn.jp" v-model="instance"/>
<BaseButton <BaseButton
@ -11,150 +10,27 @@
>Add Column</BaseButton> >Add Column</BaseButton>
</form> </form>
</div> </div>
<div id="timelines">
<div v-for="(value, key, index) in pubTL" :key="index" class="tl">
{{value.name}}
<TimelineToot
v-for="[id,status] in value.statuses"
:key="id"
:status="status"
:pref-static="pref.static"
/>
</div>
</div>
<BaseButton
v-if="!showInput"
@click.native="showInput = true"
class="primary fill"
style="--font-size:.8em;"
>Show Menu</BaseButton>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { ipcRenderer } from "electron" import { ipcRenderer } from "electron"
import { Component, Vue } from "vue-property-decorator" import { Component, Vue } from "vue-property-decorator"
import { Status } from "megalodon"
import TimelineToot from '@/components/Timeline/Toot.vue' @Component
import "@/extensions/map-sortbyvalue" // Add sortByValue function to Map prototype
type DeleteListener = (e: Event, id: number) => void
type Instance = string
type Timeline = {
name: string
statuses: Map<number, Status>
error?: Error
}
type Timelines = Timeline[]
type UpdateListener = (e: Event, status: Status) => void
@Component({
components: {
TimelineToot
}
})
export default class PublicTimeline extends Vue { export default class PublicTimeline extends Vue {
public instance: Instance = "" public instance: string = ""
public showInput: boolean = true
public updateListeners: [string, UpdateListener][] = []
public deleteListeners: [string, DeleteListener][] = []
public pubTL: Timelines = []
//test
public pref = {
static: false
}
beforeDestroy() {
this.updateListeners.forEach(([name, listener]) => {
ipcRenderer.removeListener(name, listener)
})
this.deleteListeners.forEach(([name, listener]) => {
ipcRenderer.removeListener(name, listener)
})
}
public get hasDomain() { public get hasDomain() {
return this.instance != "" return this.instance != ""
} }
public sortedStatus(statuses: Map<number, Status>): Map<number, Status> {
return statuses.sortByValue(
(s1, s2): number => {
return s1.created_at > s2.created_at ? -1 : 1
}
)
}
public addTL() { public addTL() {
let timeline: Timeline = { name: this.instance, statuses: new Map() } ipcRenderer.send("add-timeline", this.instance, 'no-auth')
ipcRenderer.send("add-timeline", timeline.name, 'no-auth')
this.showInput = false
this.instance = "" this.instance = ""
this.pubTL.push(timeline)
// TL
ipcRenderer.once(`timeline-${timeline.name}-no-auth`, (e: Event, statuses: Status[], error?: Error) => {
timeline.error = error
if (error === undefined) {
this.loadTL(timeline, statuses)
}
this.$forceUpdate()
})
ipcRenderer.send("no-auth-timeline", timeline.name)
}
public loadTL(timeline: Timeline, statuses: Status[]) {
timeline.statuses = new Map(
statuses.map((status): [number, Status] => [status.id, status])
)
// streaming
this.subscribeStreaming(timeline)
}
public async subscribeStreaming(timeline: Timeline) {
// update
let updateListener = (_: Event, status: Status) => {
timeline.statuses.set(status.id, status)
timeline.statuses = this.sortedStatus(timeline.statuses)
this.$forceUpdate()
}
ipcRenderer.on(`update-${timeline.name}-no-auth`, updateListener)
this.updateListeners.push([
`update-${timeline.name}-no-auth`,
updateListener
])
// delete
let deleteListener = (_: Event, id: number) => {
timeline.statuses.delete(id)
this.$forceUpdate()
}
ipcRenderer.on(`delete-${timeline.name}-no-auth`, deleteListener)
this.deleteListeners.push([
`delete-${timeline.name}-no-auth`,
deleteListener
])
ipcRenderer.send("open-streaming", timeline.name, "no-auth")
}
public showAccount(id: number) {
console.log("Account dialog:" + id)
} }
} }
</script> </script>
<style scoped lang="postcss"> <style scoped lang="postcss">
#timelines {
display: flex;
width: 100%;
}
.tl {
height: 100%;
flex-grow: 4;
}
</style> </style>