Do the same for plugins
This commit is contained in:
parent
93f536bf21
commit
ea0dc0c6f1
|
@ -65,6 +65,69 @@ export default class ServerEmu {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
static async plugins(args) {
|
||||||
|
if (!this._plugins) this._plugins = this.generatePlugins();
|
||||||
|
|
||||||
|
await new Promise(r => setTimeout(r, Math.random() * 3000));
|
||||||
|
|
||||||
|
let docs = [];
|
||||||
|
|
||||||
|
if (args && args.sterm) {
|
||||||
|
const { sterm } = args;
|
||||||
|
const reg = new RegExp(sterm, 'gi');
|
||||||
|
docs = this._plugins.filter(doc => doc.tags.includes(sterm) || reg.exec(doc.name) || reg.exec(doc.description));
|
||||||
|
} else {
|
||||||
|
docs = this._plugins;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (args.sort) {
|
||||||
|
switch (args.sort) {
|
||||||
|
case 'updated':
|
||||||
|
if (args.ascending) docs = docs.sort((docA, docB) => new Date(docA.updated).getTime() - new Date(docB.updated).getTime());
|
||||||
|
else docs = docs.sort((docA, docB) => new Date(docB.updated).getTime() - new Date(docA.updated).getTime());
|
||||||
|
break;
|
||||||
|
case 'installs':
|
||||||
|
if (args.ascending) docs = docs.sort((docA, docB) => docA.installs - docB.installs);
|
||||||
|
else docs = docs.sort((docA, docB) => docB.installs - docA.installs);
|
||||||
|
break;
|
||||||
|
case 'users':
|
||||||
|
if (args.ascending) docs = docs.sort((docA, docB) => docA.activeUsers - docB.activeUsers);
|
||||||
|
else docs = docs.sort((docA, docB) => docB.activeUsers - docA.activeUsers);
|
||||||
|
break;
|
||||||
|
case 'rating':
|
||||||
|
if (args.ascending) docs = docs.sort((docA, docB) => docA.rating - docB.rating);
|
||||||
|
else docs = docs.sort((docA, docB) => docB.rating - docA.rating);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const total = docs.length;
|
||||||
|
const pages = Math.ceil(total / 9);
|
||||||
|
|
||||||
|
let page = 1;
|
||||||
|
if (args && args.page) {
|
||||||
|
page = args.page;
|
||||||
|
docs = docs.slice((page - 1) * 9, page * 9);
|
||||||
|
} else {
|
||||||
|
docs = docs.slice(0, 9);
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
docs,
|
||||||
|
filters: {
|
||||||
|
sterm: args.sterm || '',
|
||||||
|
ascending: args.ascending || false,
|
||||||
|
sort: args.sort || 'name'
|
||||||
|
},
|
||||||
|
pagination: {
|
||||||
|
total,
|
||||||
|
pages,
|
||||||
|
limit: 9,
|
||||||
|
page
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
static generateThemes() {
|
static generateThemes() {
|
||||||
const docs = [];
|
const docs = [];
|
||||||
const count = Math.floor(Math.random() * 50 + 30);
|
const count = Math.floor(Math.random() * 50 + 30);
|
||||||
|
@ -94,6 +157,35 @@ export default class ServerEmu {
|
||||||
return docs;
|
return docs;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
static generatePlugins() {
|
||||||
|
const docs = [];
|
||||||
|
const count = Math.floor(Math.random() * 50 + 30);
|
||||||
|
|
||||||
|
for (let i = 0; i < count; i++) {
|
||||||
|
const id = `plugin${i}-${this.randomId()}`;
|
||||||
|
const name = `Dummy Plugin ${i}`;
|
||||||
|
const tags = dummyTags.sort(() => .5 - Math.random()).slice(0, 3);
|
||||||
|
|
||||||
|
docs.push({
|
||||||
|
id,
|
||||||
|
name,
|
||||||
|
tags,
|
||||||
|
installs: Math.floor(Math.random() * 5000) + 5000,
|
||||||
|
updated: this.randomTimestamp(),
|
||||||
|
rating: Math.floor(Math.random() * 500) + 500,
|
||||||
|
activeUsers: Math.floor(Math.random() * 1000) + 1000,
|
||||||
|
rated: Math.random() > .5,
|
||||||
|
version: this.randomVersion(),
|
||||||
|
repository: this.dummyRepo,
|
||||||
|
files: this.dummyFiles,
|
||||||
|
author: this.dummyAuthor,
|
||||||
|
description: ''
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return docs;
|
||||||
|
}
|
||||||
|
|
||||||
static get dummyRepo() {
|
static get dummyRepo() {
|
||||||
return {
|
return {
|
||||||
name: 'ExampleRepository',
|
name: 'ExampleRepository',
|
||||||
|
|
|
@ -29,6 +29,12 @@ export default class BdWebApi {
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
static get plugins() {
|
||||||
|
return {
|
||||||
|
get: this.getPlugins
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
static get users() {
|
static get users() {
|
||||||
return {
|
return {
|
||||||
get: this.getUsers
|
get: this.getUsers
|
||||||
|
@ -54,6 +60,10 @@ export default class BdWebApi {
|
||||||
*/
|
*/
|
||||||
}
|
}
|
||||||
|
|
||||||
|
static getPlugins(args) {
|
||||||
|
return ServerEmu.plugins(args);
|
||||||
|
}
|
||||||
|
|
||||||
static getUsers(args) {
|
static getUsers(args) {
|
||||||
if (!args) return request.get(ENDPOINTS.users);
|
if (!args) return request.get(ENDPOINTS.users);
|
||||||
const { id } = args;
|
const { id } = args;
|
||||||
|
|
|
@ -28,18 +28,31 @@
|
||||||
</ScrollerWrap>
|
</ScrollerWrap>
|
||||||
</div>
|
</div>
|
||||||
<div v-else class="bd-onlinePh">
|
<div v-else class="bd-onlinePh">
|
||||||
<div class="bd-onlinePhHeader">
|
<div class="bd-onlinePhHeader bd-flexCol">
|
||||||
<div class="bd-fancySearch" :class="{'bd-disabled': loadingOnline, 'bd-active': loadingOnline || (onlinePlugins && onlinePlugins.docs)}">
|
<div class="bd-flex bd-flexRow">
|
||||||
<input type="text" class="bd-textInput" placeholder="Search" @keydown.enter="searchInput" @keyup.stop />
|
<div v-if="loadingOnline" class="bd-spinnerContainer">
|
||||||
|
<div class="bd-spinner7" />
|
||||||
|
</div>
|
||||||
|
<div class="bd-searchHint">{{searchHint}}</div>
|
||||||
|
<div class="bd-fancySearch" :class="{'bd-disabled': loadingOnline, 'bd-active': loadingOnline || (onlinePlugins && onlinePlugins.docs)}">
|
||||||
|
<input type="text" class="bd-textInput" placeholder="Search" @keydown.enter="searchInput" @keyup.stop :value="onlinePlugins.filters.sterm" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="loadingOnline" class="bd-spinnerContainer">
|
<div class="bd-flex bd-flexRow" v-if="onlinePlugins && onlinePlugins.docs && onlinePlugins.docs.length">
|
||||||
<div class="bd-spinner7" />
|
<div class="bd-searchSort bd-flex bd-flexGrow">
|
||||||
|
<div v-for="btn in sortBtns"
|
||||||
|
class="bd-sort"
|
||||||
|
:class="{'bd-active': onlinePlugins.filters.sort === btn.toLowerCase(), 'bd-flipY': onlinePlugins.filters.ascending}"
|
||||||
|
@click="sortBy(btn.toLowerCase())">
|
||||||
|
{{btn}}<MiChevronDown v-if="onlinePlugins.filters.sort === btn.toLowerCase()" size="18" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<ScrollerWrap class="bd-onlinePhBody" v-if="!loadingOnline && onlinePlugins" :scrollend="scrollend">
|
<ScrollerWrap class="bd-onlinePhBody" v-if="!loadingOnline && onlinePlugins" :scrollend="scrollend">
|
||||||
<RemoteCard v-if="onlinePlugins && onlinePlugins.docs" v-for="plugin in onlinePlugins.docs" :key="plugin.id" :item="plugin" />
|
<RemoteCard v-if="onlinePlugins && onlinePlugins.docs" v-for="plugin in onlinePlugins.docs" :key="onlinePlugins.id" :item="plugin" :tagClicked="searchByTag" />
|
||||||
<div v-if="loadingMore" class="bd-spinnerContainer">
|
<div class="bd-spinnerContainer">
|
||||||
<div class="bd-spinner7" />
|
<div v-if="loadingMore" class="bd-spinner7" />
|
||||||
</div>
|
</div>
|
||||||
</ScrollerWrap>
|
</ScrollerWrap>
|
||||||
</div>
|
</div>
|
||||||
|
@ -49,28 +62,45 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// Imports
|
// Imports
|
||||||
import { PluginManager } from 'modules';
|
import { PluginManager, BdWebApi } from 'modules';
|
||||||
import { Modals } from 'ui';
|
import { Modals } from 'ui';
|
||||||
import { ClientLogger as Logger } from 'common';
|
import { ClientLogger as Logger } from 'common';
|
||||||
import { MiRefresh, ScrollerWrap } from '../common';
|
import { MiRefresh, ScrollerWrap, MiChevronDown } from '../common';
|
||||||
import SettingsWrapper from './SettingsWrapper.vue';
|
import SettingsWrapper from './SettingsWrapper.vue';
|
||||||
import PluginCard from './PluginCard.vue';
|
import PluginCard from './PluginCard.vue';
|
||||||
|
import RemoteCard from './RemoteCard.vue';
|
||||||
import RefreshBtn from '../common/RefreshBtn.vue';
|
import RefreshBtn from '../common/RefreshBtn.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
PluginManager,
|
PluginManager,
|
||||||
|
sortBtns: ['Updated', 'Installs', 'Users', 'Rating'],
|
||||||
local: true,
|
local: true,
|
||||||
localPlugins: PluginManager.localPlugins,
|
localPlugins: PluginManager.localPlugins,
|
||||||
onlinePlugins: null,
|
onlinePlugins: {
|
||||||
|
docs: [],
|
||||||
|
filters: {
|
||||||
|
sterm: '',
|
||||||
|
sort: 'installs',
|
||||||
|
ascending: false
|
||||||
|
},
|
||||||
|
pagination: {
|
||||||
|
total: 0,
|
||||||
|
pages: 0,
|
||||||
|
limit: 9,
|
||||||
|
page: 1
|
||||||
|
}
|
||||||
|
},
|
||||||
loadingOnline: false,
|
loadingOnline: false,
|
||||||
loadingMore: false
|
loadingMore: false,
|
||||||
|
searchHint: ''
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
SettingsWrapper, PluginCard,
|
SettingsWrapper, PluginCard, RemoteCard,
|
||||||
MiRefresh, ScrollerWrap,
|
MiRefresh, MiChevronDown,
|
||||||
|
ScrollerWrap,
|
||||||
RefreshBtn
|
RefreshBtn
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
@ -84,7 +114,19 @@
|
||||||
await this.PluginManager.refreshPlugins();
|
await this.PluginManager.refreshPlugins();
|
||||||
},
|
},
|
||||||
async refreshOnline() {
|
async refreshOnline() {
|
||||||
// TODO
|
this.searchHint = '';
|
||||||
|
if (this.loadingOnline || this.loadingMore) return;
|
||||||
|
this.loadingOnline = true;
|
||||||
|
try {
|
||||||
|
const getPlugins = await BdWebApi.plugins.get(this.onlinePlugins.filters);
|
||||||
|
this.onlinePlugins = getPlugins;
|
||||||
|
if (!this.onlinePlugins.docs) return;
|
||||||
|
this.searchHint = `${this.onlinePlugins.pagination.total} Results`;
|
||||||
|
} catch (err) {
|
||||||
|
Logger.err('PluginsView', err);
|
||||||
|
} finally {
|
||||||
|
this.loadingOnline = false;
|
||||||
|
}
|
||||||
},
|
},
|
||||||
async togglePlugin(plugin) {
|
async togglePlugin(plugin) {
|
||||||
// TODO: display error if plugin fails to start/stop
|
// TODO: display error if plugin fails to start/stop
|
||||||
|
@ -116,21 +158,45 @@
|
||||||
},
|
},
|
||||||
searchInput(e) {
|
searchInput(e) {
|
||||||
if (this.loadingOnline || this.loadingMore) return;
|
if (this.loadingOnline || this.loadingMore) return;
|
||||||
|
this.onlinePlugins.filters.sterm = e.target.value;
|
||||||
this.refreshOnline();
|
this.refreshOnline();
|
||||||
},
|
},
|
||||||
async scrollend(e) {
|
async scrollend(e) {
|
||||||
// TODO
|
if (this.onlinePlugins.pagination.page >= this.onlinePlugins.pagination.pages) return;
|
||||||
return;
|
|
||||||
if (this.loadingOnline || this.loadingMore) return;
|
if (this.loadingOnline || this.loadingMore) return;
|
||||||
this.loadingMore = true;
|
this.loadingMore = true;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const getPlugins = await BdWebApi.plugins.get();
|
const getPlugins = await BdWebApi.plugins.get({
|
||||||
|
sterm: this.onlinePlugins.filters.sterm,
|
||||||
|
page: this.onlinePlugins.pagination.page + 1,
|
||||||
|
sort: this.onlinePlugins.filters.sort,
|
||||||
|
ascending: this.onlinePlugins.filters.ascending
|
||||||
|
});
|
||||||
|
|
||||||
this.onlinePlugins.docs = [...this.onlinePlugins.docs, ...getPlugins.docs];
|
this.onlinePlugins.docs = [...this.onlinePlugins.docs, ...getPlugins.docs];
|
||||||
|
this.onlinePlugins.filters = getPlugins.filters;
|
||||||
|
this.onlinePlugins.pagination = getPlugins.pagination;
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
Logger.err('PluginsView', err);
|
Logger.err('PluginsView', err);
|
||||||
} finally {
|
} finally {
|
||||||
this.loadingMore = false;
|
this.loadingMore = false;
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
async sortBy(by) {
|
||||||
|
if (this.loadingOnline || this.loadingMore) return;
|
||||||
|
if (this.onlinePlugins.filters.sort === by) {
|
||||||
|
this.onlinePlugins.filters.ascending = !this.onlinePlugins.filters.ascending;
|
||||||
|
} else {
|
||||||
|
this.onlinePlugins.filters.sort = by;
|
||||||
|
this.onlinePlugins.filters.ascending = false;
|
||||||
|
}
|
||||||
|
this.refreshOnline();
|
||||||
|
},
|
||||||
|
async searchByTag(tag) {
|
||||||
|
if (this.loadingOnline || this.loadingMore) return;
|
||||||
|
this.onlinePlugins.filters.sterm = tag;
|
||||||
|
this.refreshOnline();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -50,7 +50,9 @@
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
resolveThumb() {
|
resolveThumb() {
|
||||||
return `${this.item.repository.rawUri}/${this.item.files.previews[0].thumb}`;
|
// TODO
|
||||||
|
return '';
|
||||||
|
// return `${this.item.repository.rawUri}/${this.item.files.previews[0].thumb}`;
|
||||||
},
|
},
|
||||||
fromNow() {
|
fromNow() {
|
||||||
const { Moment } = Reflection.modules;
|
const { Moment } = Reflection.modules;
|
||||||
|
|
|
@ -108,7 +108,6 @@
|
||||||
},
|
},
|
||||||
async showOnline() {
|
async showOnline() {
|
||||||
this.local = false;
|
this.local = false;
|
||||||
if (this.loadingOnline || this.onlineThemes) return;
|
|
||||||
},
|
},
|
||||||
async refreshLocal() {
|
async refreshLocal() {
|
||||||
await this.ThemeManager.refreshThemes();
|
await this.ThemeManager.refreshThemes();
|
||||||
|
|
Loading…
Reference in New Issue