Do the same for plugins

This commit is contained in:
Jiiks 2018-12-05 10:58:43 +02:00
parent 93f536bf21
commit ea0dc0c6f1
5 changed files with 189 additions and 20 deletions

View File

@ -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() {
const docs = [];
const count = Math.floor(Math.random() * 50 + 30);
@ -94,6 +157,35 @@ export default class ServerEmu {
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() {
return {
name: 'ExampleRepository',

View File

@ -29,6 +29,12 @@ export default class BdWebApi {
};
}
static get plugins() {
return {
get: this.getPlugins
};
}
static get users() {
return {
get: this.getUsers
@ -54,6 +60,10 @@ export default class BdWebApi {
*/
}
static getPlugins(args) {
return ServerEmu.plugins(args);
}
static getUsers(args) {
if (!args) return request.get(ENDPOINTS.users);
const { id } = args;

View File

@ -28,18 +28,31 @@
</ScrollerWrap>
</div>
<div v-else class="bd-onlinePh">
<div class="bd-onlinePhHeader">
<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 />
<div class="bd-onlinePhHeader bd-flexCol">
<div class="bd-flex bd-flexRow">
<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 v-if="loadingOnline" class="bd-spinnerContainer">
<div class="bd-spinner7" />
<div class="bd-flex bd-flexRow" v-if="onlinePlugins && onlinePlugins.docs && onlinePlugins.docs.length">
<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>
<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" />
<div v-if="loadingMore" class="bd-spinnerContainer">
<div class="bd-spinner7" />
<RemoteCard v-if="onlinePlugins && onlinePlugins.docs" v-for="plugin in onlinePlugins.docs" :key="onlinePlugins.id" :item="plugin" :tagClicked="searchByTag" />
<div class="bd-spinnerContainer">
<div v-if="loadingMore" class="bd-spinner7" />
</div>
</ScrollerWrap>
</div>
@ -49,28 +62,45 @@
<script>
// Imports
import { PluginManager } from 'modules';
import { PluginManager, BdWebApi } from 'modules';
import { Modals } from 'ui';
import { ClientLogger as Logger } from 'common';
import { MiRefresh, ScrollerWrap } from '../common';
import { MiRefresh, ScrollerWrap, MiChevronDown } from '../common';
import SettingsWrapper from './SettingsWrapper.vue';
import PluginCard from './PluginCard.vue';
import RemoteCard from './RemoteCard.vue';
import RefreshBtn from '../common/RefreshBtn.vue';
export default {
data() {
return {
PluginManager,
sortBtns: ['Updated', 'Installs', 'Users', 'Rating'],
local: true,
localPlugins: PluginManager.localPlugins,
onlinePlugins: null,
onlinePlugins: {
docs: [],
filters: {
sterm: '',
sort: 'installs',
ascending: false
},
pagination: {
total: 0,
pages: 0,
limit: 9,
page: 1
}
},
loadingOnline: false,
loadingMore: false
loadingMore: false,
searchHint: ''
};
},
components: {
SettingsWrapper, PluginCard,
MiRefresh, ScrollerWrap,
SettingsWrapper, PluginCard, RemoteCard,
MiRefresh, MiChevronDown,
ScrollerWrap,
RefreshBtn
},
methods: {
@ -84,7 +114,19 @@
await this.PluginManager.refreshPlugins();
},
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) {
// TODO: display error if plugin fails to start/stop
@ -116,21 +158,45 @@
},
searchInput(e) {
if (this.loadingOnline || this.loadingMore) return;
this.onlinePlugins.filters.sterm = e.target.value;
this.refreshOnline();
},
async scrollend(e) {
// TODO
return;
if (this.onlinePlugins.pagination.page >= this.onlinePlugins.pagination.pages) return;
if (this.loadingOnline || this.loadingMore) return;
this.loadingMore = true;
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.filters = getPlugins.filters;
this.onlinePlugins.pagination = getPlugins.pagination;
} catch (err) {
Logger.err('PluginsView', err);
} finally {
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();
}
}
}

View File

@ -50,7 +50,9 @@
},
methods: {
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() {
const { Moment } = Reflection.modules;

View File

@ -108,7 +108,6 @@
},
async showOnline() {
this.local = false;
if (this.loadingOnline || this.onlineThemes) return;
},
async refreshLocal() {
await this.ThemeManager.refreshThemes();