Remove timeline area of AddColumn/User component

Fix name fediverse -> federated
This commit is contained in:
kPherox 2019-05-22 16:14:08 +09:00
parent 78d87633f5
commit f00b0dd3f1
No known key found for this signature in database
GPG Key ID: C04751C2BFA2F62D
2 changed files with 31 additions and 139 deletions

View File

@ -1,149 +1,53 @@
<template> <template>
<div> <div>
<div> <form @submit.prevent="addTL">
<form @submit.prevent="addTL"> <label v-for="(type) in timelineTypes" :key="type" :class="{selected: type === timelineType}">
<label <input type="radio" :value="type" v-model="timelineType">
v-for="(types,name) in userTimelineTypes" {{ timelineTypeNames[type] }}
:key="name" </label>
:class="{selected: name === timelineType}" <BaseButton
> type="submit"
<input type="radio" :value="name" v-model="timelineType"> class="primary fill"
{{ types }} style="--font-size:.8em;margin-top:1em;"
</label> >Add Column</BaseButton>
<BaseButton </form>
type="submit"
class="primary fill"
style="--font-size:.8em;margin-top:1em;"
>Add Column</BaseButton>
</form>
</div>
<div id="timelines">
<div v-for="(value, key, index) in TL" :key="index" class="tl">
{{value.name}}/{{value.type}}
<TimelineToot
v-for="[id,status] in value.statuses"
:key="id"
:status="status"
:pref-static="pref.static"
/>
</div>
</div>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { ipcRenderer } from "electron" import { ipcRenderer } from "electron"
import { Status } from "megalodon"
import { Component, Prop, Vue } from "vue-property-decorator" import { Component, Prop, Vue } from "vue-property-decorator"
import TimelineToot from "@/components/Timeline/Toot.vue"
type Timeline = {
name: string
type: string
statuses: Map<number, Status>
error?: Error
}
type Timelines = Timeline[]
type DeleteListener = (e: Event, id: number) => void
type UpdateListener = (e: Event, status: Status) => void
@Component({ type TimelineType = 'home' | 'notify' | 'dm' | 'local' | 'federated' | 'integrated' | 'localPlus'
components: {
TimelineToot @Component
}
})
export default class UserTimeline extends Vue { export default class UserTimeline extends Vue {
@Prop() public username!: string @Prop() public username!: string
public deleteListeners: [string, DeleteListener][] = []
public updateListeners: [string, UpdateListener][] = [] public timelineTypes: TimelineType[] = [
public timelineType: string = "home" 'home',
public userTimelineTypes: { [key: string]: string } = { 'notify',
'dm',
'local',
'federated',
'integrated',
'localPlus'
]
public timelineTypeNames: { [key: string]: string } = {
home: "Home Timeline", home: "Home Timeline",
notify: "Notifications", notify: "Notifications",
dm: "Direct Messages", dm: "Direct Messages",
local: "Local Timeline", local: "Local Timeline",
fediverse: "Fediverse Timeline", federated: "Federated Timeline",
integrated: "Integrated Timeline (Home + Local)", integrated: "Integrated Timeline (Home + Local)",
localPlus: "Integrated Timeline (Local + Boost + Reply)" localPlus: "Integrated Timeline (Local + Boost + Reply)"
} }
public TL: Timelines = []
//test
public pref = {
static: false
}
beforeDestroy() { public timelineType: TimelineType = "home"
this.updateListeners.forEach(([name, listener]) => {
ipcRenderer.removeListener(name, listener)
})
this.deleteListeners.forEach(([name, listener]) => {
ipcRenderer.removeListener(name, listener)
})
}
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 = { ipcRenderer.send("add-timeline", this.username, this.timelineType)
name: this.username,
type: this.timelineType,
statuses: new Map()
}
this.TL.push(timeline)
// TL
ipcRenderer.once(
`timeline-${timeline.name}-${timeline.type}`,
(e: Event, statuses: Status[], error?: Error) => {
timeline.error = error
if (error === undefined) {
this.loadTL(timeline, statuses)
}
this.$forceUpdate()
}
)
ipcRenderer.send("timeline", timeline.name, timeline.type)
}
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}-${timeline.type}`, updateListener)
this.updateListeners.push([
`update-${timeline.name}-${timeline.type}`,
updateListener
])
// delete
let deleteListener = (_: Event, id: number) => {
timeline.statuses.delete(id)
this.$forceUpdate()
}
ipcRenderer.on(`delete-${timeline.name}-${timeline.type}`, deleteListener)
this.deleteListeners.push([
`delete-${timeline.name}-${timeline.type}`,
deleteListener
])
ipcRenderer.send("open-streaming", timeline.name, timeline.type)
}
public showAccount(id: number) {
console.log("Account dialog:" + id)
} }
} }
</script> </script>
@ -166,16 +70,4 @@ label {
display: none; display: none;
} }
} }
#timelines {
display: flex;
width: 100%;
height: 100vh;
overflow-y: hidden;
}
.tl {
height: 100%;
flex-grow: 4;
overflow-y: scroll;
overflow-x: hidden;
}
</style> </style>

View File

@ -22,7 +22,7 @@ export default class Timeline {
notify: "/timelines/notifications", notify: "/timelines/notifications",
dm: "/conversations", dm: "/conversations",
local: "/timelines/public?local=true", local: "/timelines/public?local=true",
fediverse: "/timelines/public", federated: "/timelines/public",
} }
public static ready() { public static ready() {