|
|
@ -6,9 +6,13 @@ import { addPluginRoutes } from '../plugins/addPluginRoutes.js' |
|
|
|
import { repeat } from 'lit/directives/repeat.js'; |
|
|
|
import { repeat } from 'lit/directives/repeat.js'; |
|
|
|
import ShortUniqueId from 'short-unique-id'; |
|
|
|
import ShortUniqueId from 'short-unique-id'; |
|
|
|
import { setNewTab } from '../redux/app/app-actions.js' |
|
|
|
import { setNewTab } from '../redux/app/app-actions.js' |
|
|
|
|
|
|
|
import localForage from "localforage"; |
|
|
|
|
|
|
|
|
|
|
|
import '@material/mwc-icon' |
|
|
|
import '@material/mwc-icon' |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const chatLastSeen = localForage.createInstance({ |
|
|
|
|
|
|
|
name: "chat-last-seen", |
|
|
|
|
|
|
|
}); |
|
|
|
class ShowPlugin extends connect(store)(LitElement) { |
|
|
|
class ShowPlugin extends connect(store)(LitElement) { |
|
|
|
static get properties() { |
|
|
|
static get properties() { |
|
|
|
return { |
|
|
|
return { |
|
|
@ -19,7 +23,10 @@ class ShowPlugin extends connect(store)(LitElement) { |
|
|
|
registeredUrls: { type: Array }, |
|
|
|
registeredUrls: { type: Array }, |
|
|
|
currentTab: { type: Number }, |
|
|
|
currentTab: { type: Number }, |
|
|
|
tabs: { type: Array }, |
|
|
|
tabs: { type: Array }, |
|
|
|
theme: { type: String, reflect: true } |
|
|
|
theme: { type: String, reflect: true }, |
|
|
|
|
|
|
|
tabInfo: { type: Object }, |
|
|
|
|
|
|
|
chatLastSeen: { type: Array }, |
|
|
|
|
|
|
|
chatHeads: { type: Array } |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
@ -155,6 +162,20 @@ class ShowPlugin extends connect(store)(LitElement) { |
|
|
|
color: #999; |
|
|
|
color: #999; |
|
|
|
--mdc-icon-size: 20px; |
|
|
|
--mdc-icon-size: 20px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.count { |
|
|
|
|
|
|
|
position: absolute; |
|
|
|
|
|
|
|
background: red; |
|
|
|
|
|
|
|
color: white; |
|
|
|
|
|
|
|
padding: 5px; |
|
|
|
|
|
|
|
font-size: 12px; |
|
|
|
|
|
|
|
border-radius: 50%; |
|
|
|
|
|
|
|
height: 10px; |
|
|
|
|
|
|
|
width: 10px; |
|
|
|
|
|
|
|
display: flex; |
|
|
|
|
|
|
|
justify-content: center; |
|
|
|
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
} |
|
|
|
` |
|
|
|
` |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
@ -165,6 +186,9 @@ class ShowPlugin extends connect(store)(LitElement) { |
|
|
|
this.tabs = [] |
|
|
|
this.tabs = [] |
|
|
|
this.uid = new ShortUniqueId() |
|
|
|
this.uid = new ShortUniqueId() |
|
|
|
this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light' |
|
|
|
this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light' |
|
|
|
|
|
|
|
this.tabInfo = {} |
|
|
|
|
|
|
|
this.chatLastSeen = [] |
|
|
|
|
|
|
|
this.chatHeads = [] |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
async getUpdateComplete() { |
|
|
|
async getUpdateComplete() { |
|
|
@ -189,9 +213,44 @@ class ShowPlugin extends connect(store)(LitElement) { |
|
|
|
return myPlug === undefined ? 'about:blank' : `${window.location.origin}/plugin/${myPlug.domain}/${myPlug.page}${this.linkParam}` |
|
|
|
return myPlug === undefined ? 'about:blank' : `${window.location.origin}/plugin/${myPlug.domain}/${myPlug.page}${this.linkParam}` |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return html` |
|
|
|
return html` |
|
|
|
<div class="tabs"> |
|
|
|
<div class="tabs"> |
|
|
|
${this.tabs.map((tab, index) => html` |
|
|
|
${this.tabs.map((tab, index) => { |
|
|
|
|
|
|
|
let title = '' |
|
|
|
|
|
|
|
let count = 0 |
|
|
|
|
|
|
|
if (tab.myPlugObj && tab.myPlugObj.title) { |
|
|
|
|
|
|
|
title = tab.myPlugObj.title |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
if (tab.myPlugObj && (tab.myPlugObj.url === 'websites' || tab.myPlugObj.url === 'qapps') && this.tabInfo[tab.id]) { |
|
|
|
|
|
|
|
title = this.tabInfo[tab.id].name |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
if (tab.myPlugObj && (tab.myPlugObj.url === 'websites' || tab.myPlugObj.url === 'qapps') && this.tabInfo[tab.id]) { |
|
|
|
|
|
|
|
count = this.tabInfo[tab.id].count |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (tab.myPlugObj && tab.myPlugObj.url === 'q-chat') { |
|
|
|
|
|
|
|
for (const chat of this.chatHeads) { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const lastReadMessage = this.chatLastSeen.find((ch) => { |
|
|
|
|
|
|
|
let id |
|
|
|
|
|
|
|
if (chat.groupId === 0) { |
|
|
|
|
|
|
|
id = chat.groupId |
|
|
|
|
|
|
|
} else if (chat.groupId) { |
|
|
|
|
|
|
|
id = chat.groupId |
|
|
|
|
|
|
|
} else { |
|
|
|
|
|
|
|
id = chat.address |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return ch.key.includes(id) |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
if (lastReadMessage && lastReadMessage.timestamp < chat.timestamp) { |
|
|
|
|
|
|
|
count = count + 1 |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
return html` |
|
|
|
<div
|
|
|
|
<div
|
|
|
|
class="tab ${this.currentTab === index ? 'active' : ''}" |
|
|
|
class="tab ${this.currentTab === index ? 'active' : ''}" |
|
|
|
@click=${() => this.currentTab = index} |
|
|
|
@click=${() => this.currentTab = index} |
|
|
@ -200,26 +259,31 @@ class ShowPlugin extends connect(store)(LitElement) { |
|
|
|
<div class="${this.currentTab === index ? "iconActive" : "iconInactive"}"> |
|
|
|
<div class="${this.currentTab === index ? "iconActive" : "iconInactive"}"> |
|
|
|
<mwc-icon>${tab.myPlugObj && tab.myPlugObj.mwcicon}</mwc-icon> |
|
|
|
<mwc-icon>${tab.myPlugObj && tab.myPlugObj.mwcicon}</mwc-icon> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
${count ? html` |
|
|
|
|
|
|
|
<div class="count">${count}</div> |
|
|
|
|
|
|
|
` : ''}
|
|
|
|
|
|
|
|
|
|
|
|
<div> |
|
|
|
<div> |
|
|
|
|
|
|
|
|
|
|
|
${tab.myPlugObj && tab.myPlugObj.title} |
|
|
|
${title} |
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="close" @click=${() => { this.removeTab(index) }}>x</div> |
|
|
|
<div class="close" @click=${() => { this.removeTab(index) }}>x</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
`)}
|
|
|
|
` |
|
|
|
|
|
|
|
})} |
|
|
|
<button
|
|
|
|
<button
|
|
|
|
class="add-tab-button"
|
|
|
|
class="add-tab-button"
|
|
|
|
title="Add Tab" |
|
|
|
title="Add Tab" |
|
|
|
@click=${() => { |
|
|
|
@click=${() => { |
|
|
|
const lengthOfTabs = this.tabs.length |
|
|
|
const lengthOfTabs = this.tabs.length |
|
|
|
this.addTab({ |
|
|
|
this.addTab({ |
|
|
|
url: "", |
|
|
|
url: "", |
|
|
|
id: this.uid() |
|
|
|
id: this.uid() |
|
|
|
}) |
|
|
|
}) |
|
|
|
this.currentTab = lengthOfTabs |
|
|
|
this.currentTab = lengthOfTabs |
|
|
|
}} |
|
|
|
}} |
|
|
|
> |
|
|
|
> |
|
|
|
+ |
|
|
|
+ |
|
|
|
</button> |
|
|
|
</button> |
|
|
@ -227,7 +291,7 @@ class ShowPlugin extends connect(store)(LitElement) { |
|
|
|
|
|
|
|
|
|
|
|
${repeat(this.tabs, (tab) => tab.id, (tab, index) => html` |
|
|
|
${repeat(this.tabs, (tab) => tab.id, (tab, index) => html` |
|
|
|
<div class=${this.currentTab === index ? "showIframe" : "hideIframe"}> |
|
|
|
<div class=${this.currentTab === index ? "showIframe" : "hideIframe"}> |
|
|
|
<iframe src="${plugSrc(tab.myPlugObj)}" id="showPluginFrame${index}" style="width:100%; |
|
|
|
<iframe src="${plugSrc(tab.myPlugObj)}" data-id=${tab.id} id="showPluginFrame${index}" style="width:100%; |
|
|
|
height:calc(var(--window-height) - 102px); |
|
|
|
height:calc(var(--window-height) - 102px); |
|
|
|
border:0; |
|
|
|
border:0; |
|
|
|
padding:0; |
|
|
|
padding:0; |
|
|
@ -325,7 +389,7 @@ class ShowPlugin extends connect(store)(LitElement) { |
|
|
|
this.tabs = copiedTabs |
|
|
|
this.tabs = copiedTabs |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
stateChanged(state) { |
|
|
|
async stateChanged(state) { |
|
|
|
const split = state.app.url.split('/') |
|
|
|
const split = state.app.url.split('/') |
|
|
|
const newRegisteredUrls = state.app.registeredUrls |
|
|
|
const newRegisteredUrls = state.app.registeredUrls |
|
|
|
|
|
|
|
|
|
|
@ -356,6 +420,23 @@ class ShowPlugin extends connect(store)(LitElement) { |
|
|
|
if (newLinkParam !== this.linkParam) { |
|
|
|
if (newLinkParam !== this.linkParam) { |
|
|
|
this.linkParam = newLinkParam |
|
|
|
this.linkParam = newLinkParam |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
if (this.tabInfo !== state.app.tabInfo) { |
|
|
|
|
|
|
|
this.tabInfo = state.app.tabInfo |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
if (this.chatLastSeen !== state.app.chatLastSeen) { |
|
|
|
|
|
|
|
this.chatLastSeen = state.app.chatLastSeen |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
if (state.app.chatHeads !== this.unModifiedChatHeads) { |
|
|
|
|
|
|
|
let chatHeads = [] |
|
|
|
|
|
|
|
if (state.app.chatHeads && state.app.chatHeads.groups) { |
|
|
|
|
|
|
|
chatHeads = [...chatHeads, ...state.app.chatHeads.groups] |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
if (state.app.chatHeads && state.app.chatHeads.direct) { |
|
|
|
|
|
|
|
chatHeads = [...chatHeads, ...state.app.chatHeads.direct] |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
this.chatHeads = chatHeads |
|
|
|
|
|
|
|
this.unModifiedChatHeads = state.app.chatHeads |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
if (state.app.newTab) { |
|
|
|
if (state.app.newTab) { |
|
|
|
const newTab = state.app.newTab |
|
|
|
const newTab = state.app.newTab |
|
|
@ -621,8 +702,8 @@ class NavBar extends connect(store)(LitElement) { |
|
|
|
<div class="app-list"> |
|
|
|
<div class="app-list"> |
|
|
|
${repeat(this.myMenuList, (plugin) => plugin.url, (plugin, index) => html` |
|
|
|
${repeat(this.myMenuList, (plugin) => plugin.url, (plugin, index) => html` |
|
|
|
<div class="app-icon" @click=${() => { |
|
|
|
<div class="app-icon" @click=${() => { |
|
|
|
this.changePage(plugin) |
|
|
|
this.changePage(plugin) |
|
|
|
}}> |
|
|
|
}}> |
|
|
|
<div class="app-icon-box"> |
|
|
|
<div class="app-icon-box"> |
|
|
|
<mwc-icon class="menuIcon">${plugin.mwcicon}</mwc-icon> |
|
|
|
<mwc-icon class="menuIcon">${plugin.mwcicon}</mwc-icon> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|