sonot
/
PteroTheme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Migrate more core components

This commit is contained in:
Dane Everitt 2018-12-30 13:10:16 -08:00
parent 136e4b5b7b
commit 33e09b5619
No known key found for this signature in database
GPG Key ID: EEA66103B3D71F53
7 changed files with 223 additions and 184 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -3,6 +3,7 @@
"dependencies": { "dependencies": {
"cssnano": "^4.0.3", "cssnano": "^4.0.3",
"date-fns": "^1.29.0", "date-fns": "^1.29.0",
"feather-icons": "^4.10.0",
"socket.io-client": "^2.1.1", "socket.io-client": "^2.1.1",
"vee-validate": "^2.1.0-beta.2", "vee-validate": "^2.1.0-beta.2",
"vue": "^2.5.7", "vue": "^2.5.7",
@ -20,6 +21,7 @@
"@babel/plugin-transform-async-to-generator": "^7.0.0-beta.49", "@babel/plugin-transform-async-to-generator": "^7.0.0-beta.49",
"@babel/plugin-transform-runtime": "^7.0.0-beta.49", "@babel/plugin-transform-runtime": "^7.0.0-beta.49",
"@babel/preset-env": "^7.0.0-beta.49", "@babel/preset-env": "^7.0.0-beta.49",
"@types/feather-icons": "^4.7.0",
"@types/lodash": "^4.14.119", "@types/lodash": "^4.14.119",
"@types/node": "^10.12.15", "@types/node": "^10.12.15",
"@types/socket.io-client": "^1.4.32", "@types/socket.io-client": "^1.4.32",

14
resources/assets/scripts/components/core/Icon.ts Normal file
View File

@ -0,0 +1,14 @@
import Vue from 'vue';
import { replace } from 'feather-icons';
export default Vue.component('icon', {
props: {
name: {type: String, default: 'circle'},
},
mounted: function () {
replace();
},
template: `
<i data-feather="{{ name }}"></i>
`,
});

46
resources/assets/scripts/components/core/Modal.ts Normal file
View File

@ -0,0 +1,46 @@
import Vue from 'vue';
import Icon from "./Icon";
export default Vue.component('modal', {
components: {
Icon,
},
props: {
modalName: { type: String, default: 'modal' },
show: { type: Boolean, default: false },
closeOnEsc: { type: Boolean, default: true },
},
mounted: function () {
if (this.$props.closeOnEsc) {
document.addEventListener('keydown', e => {
if (this.show && e.key === 'Escape') {
this.close();
}
})
}
},
methods: {
close: function () {
this.$emit('close', this.$props.modalName);
}
},
template: `
<transition name="modal">
<div class="modal-mask" v-show="show" v-on:click="close">
<div class="modal-container" @click.stop>
<icon name="x"
class="absolute pin-r pin-t m-2 text-grey cursor-pointer"
aria-label="Close modal"
role="button"
v-on:click="close"
/>
<slot/>
</div>
</div>
</transition>
`
})

40
resources/assets/scripts/components/core/Modal.vue
View File

@ -1,40 +0,0 @@
<template>
<transition name="modal">
<div class="modal-mask" v-show="show" v-on:click="close">
<div class="modal-container" @click.stop>
<x-icon class="absolute pin-r pin-t m-2 text-grey cursor-pointer" aria-label="Close modal" role="button"
v-on:click="close"
/>
<slot/>
</div>
</div>
</transition>
</template>
<script>
import { XIcon } from 'vue-feather-icons';
export default {
name: 'modal',
components: { XIcon },
props: {
modalName: { type: String, default: 'modal' },
show: { type: Boolean, default: false },
closeOnEsc: { type: Boolean, default: true },
},
mounted: function () {
if (this.$props.closeOnEsc) {
document.addEventListener('keydown', e => {
if (this.show && e.key === 'Escape') {
this.close();
}
})
}
},
methods: {
close: function () {
this.$emit('close', this.$props.modalName);
}
}
};
</script>

142
resources/assets/scripts/components/core/Navigation.ts Normal file
View File

@ -0,0 +1,142 @@
import Vue from 'vue';
import { debounce, isObject } from 'lodash';
import { mapState } from 'vuex';
import {AxiosError} from "axios";
export default Vue.component('navigation', {
data: function () {
return {
loadingResults: false,
searchActive: false,
};
},
computed: {
...mapState('dashboard', ['servers']),
searchTerm: {
get: function (): string {
return this.$store.getters['dashboard/getSearchTerm'];
},
set: function (value: string): void {
this.$store.dispatch('dashboard/setSearchTerm', value);
}
}
},
created: function () {
document.addEventListener('click', this.documentClick);
},
beforeDestroy: function () {
document.removeEventListener('click', this.documentClick);
},
methods: {
search: debounce(function (): void {
// @todo why is this not liked?
// if (this.searchTerm.length >= 3) {
// this.loadingResults = true;
// this.gatherSearchResults();
// }
}, 500),
gatherSearchResults: function (): void {
this.$store.dispatch('dashboard/loadServers')
.catch((err: AxiosError) => {
console.error(err);
const response = err.response;
if (response && isObject(response.data.errors)) {
response.data.errors.forEach((error: any) => {
this.$flash.error(error.detail);
});
}
})
.then(() => {
this.loadingResults = false;
});
},
doLogout: function () {
this.$store.commit('auth/logout');
window.location.assign(this.route('auth.logout'));
},
documentClick: function (e: Event) {
if (this.$refs.searchContainer) {
if (this.$refs.searchContainer !== e.target && !(this.$refs.searchContainer as HTMLElement).contains(e.target as HTMLElement)) {
this.searchActive = false;
}
}
},
},
template: `
<div class="nav flex">
<div class="logo flex-1">
<router-link :to="{ name: 'dashboard' }">
Pterodactyl
</router-link>
</div>
<div class="search-box flex-none" v-if="$route.name !== 'dashboard'" ref="searchContainer">
<input type="text" class="search-input" id="searchInput" placeholder="Search..."
:class="{ 'has-search-results': ((servers.length > 0 && searchTerm.length >= 3) || loadingResults) && searchActive }"
v-on:focus="searchActive = true"
v-on:input="search"
v-model="searchTerm"
/>
<div class="search-results select-none" :class="{ 'hidden': (servers.length === 0 && !loadingResults) || !searchActive || searchTerm.length < 3 }">
<div v-if="loadingResults">
<a href="#">
<div class="flex items-center">
<div class="flex-1">
<span class="text-sm text-grey-darker">Loading...</span>
</div>
<div class="flex-none">
<span class="spinner spinner-relative"></span>
</div>
</div>
</a>
</div>
<div v-else v-for="server in servers" :key="server.identifier">
<router-link :to="{ name: 'server', params: { id: server.identifier }}" v-on:click.native="searchActive = false">
<div class="flex items-center">
<div class="flex-1">
<span class="font-bold text-grey-darkest">{{ server.name }}</span><br />
<span class="font-light text-grey-dark text-sm" v-if="server.description.length > 0">{{ server.description }}</span>
</div>
<div class="flex-none">
<span class="pillbox bg-indigo">{{ server.node }}</span>
</div>
</div>
</router-link>
</div>
</div>
</div>
<div class="menu flex-none">
<ul>
<li>
<router-link :to="{ name: 'dashboard' }">
<icon name="server" aria-label="Server dashboard" class="h-4"/>
</router-link>
</li>
<li>
<router-link :to="{ name: 'account' }">
<icon name="user" aria-label="Profile management" class="h-4"/>
</router-link>
</li>
<li>
<a :href="this.route('admin.index')">
<icon name="settings" aria-label="Administrative controls" class="h-4"/>
</a>
</li>
<li>
<a :href="this.route('auth.logout')" v-on:click.prevent="doLogout">
<icon name="log-out" aria-label="Sign out" class="h-4"/>
</a>
</li>
</ul>
</div>
</div>
`
})

144
resources/assets/scripts/components/core/Navigation.vue
View File

@ -1,144 +0,0 @@
<template>
<div class="nav flex">
<div class="logo flex-1">
<router-link :to="{ name: 'dashboard' }">
Pterodactyl
</router-link>
</div>
<div class="search-box flex-none" v-if="$route.name !== 'dashboard'" ref="searchContainer">
<input type="text" class="search-input" id="searchInput" placeholder="Search..."
:class="{ 'has-search-results': ((servers.length > 0 && searchTerm.length >= 3) || loadingResults) && searchActive }"
v-on:focus="searchActive = true"
v-on:input="search"
v-model="searchTerm"
/>
<div class="search-results select-none" :class="{ 'hidden': (servers.length === 0 && !loadingResults) || !searchActive || searchTerm.length < 3 }">
<div v-if="loadingResults">
<a href="#">
<div class="flex items-center">
<div class="flex-1">
<span class="text-sm text-grey-darker">Loading...</span>
</div>
<div class="flex-none">
<span class="spinner spinner-relative"></span>
</div>
</div>
</a>
</div>
<div v-else v-for="server in servers" :key="server.identifier">
<router-link :to="{ name: 'server', params: { id: server.identifier }}" v-on:click.native="searchActive = false">
<div class="flex items-center">
<div class="flex-1">
<span class="font-bold text-grey-darkest">{{ server.name }}</span><br />
<span class="font-light text-grey-dark text-sm" v-if="server.description.length > 0">{{ server.description }}</span>
</div>
<div class="flex-none">
<span class="pillbox bg-indigo">{{ server.node }}</span>
</div>
</div>
</router-link>
</div>
</div>
</div>
<div class="menu flex-none">
<ul>
<li>
<router-link :to="{ name: 'dashboard' }">
<server-icon aria-label="Server dashboard" class="h-4"/>
</router-link>
</li>
<li>
<router-link :to="{ name: 'account' }">
<user-icon aria-label="Profile management" class="h-4"/>
</router-link>
</li>
<li>
<a :href="this.route('admin.index')">
<settings-icon aria-label="Administrative controls" class="h-4"/>
</a>
</li>
<li>
<a :href="this.route('auth.logout')" v-on:click.prevent="doLogout">
<log-out-icon aria-label="Sign out" class="h-4"/>
</a>
</li>
</ul>
</div>
</div>
</template>
<script>
import debounce from 'lodash/debounce';
import { mapState } from 'vuex';
import { LogOutIcon, ServerIcon, SettingsIcon, UserIcon } from 'vue-feather-icons'
export default {
name: 'navigation',
components: { LogOutIcon, ServerIcon, SettingsIcon, UserIcon },
data: function () {
return {
loadingResults: false,
searchActive: false,
};
},
computed: {
...mapState('dashboard', ['servers']),
searchTerm: {
get: function () {
return this.$store.getters['dashboard/getSearchTerm'];
},
set: function (value) {
this.$store.dispatch('dashboard/setSearchTerm', value);
}
}
},
created: function () {
document.addEventListener('click', this.documentClick);
},
beforeDestroy: function () {
document.removeEventListener('click', this.documentClick);
},
methods: {
search: debounce(function () {
if (this.searchTerm.length >= 3) {
this.loadingResults = true;
this.gatherSearchResults(this.searchTerm);
}
}, 500),
gatherSearchResults: function () {
this.$store.dispatch('dashboard/loadServers')
.catch(err => {
console.error(err);
const response = err.response;
if (response.data && isObject(response.data.errors)) {
response.data.errors.forEach(error => {
this.error(error.detail);
});
}
})
.then(() => {
this.loadingResults = false;
});
},
doLogout: function () {
this.$store.commit('auth/logout');
return window.location = this.route('auth.logout');
},
documentClick: function (e) {
if (this.$refs.searchContainer) {
if (this.$refs.searchContainer !== e.target && !this.$refs.searchContainer.contains(e.target)) {
this.searchActive = false;
}
}
},
}
};
</script>

19
yarn.lock
View File

@ -778,6 +778,10 @@
"@shellscape/koa-send" "^4.1.0" "@shellscape/koa-send" "^4.1.0"
debug "^2.6.8" debug "^2.6.8"
"@types/feather-icons@^4.7.0":
version "4.7.0"
resolved "https://registry.yarnpkg.com/@types/feather-icons/-/feather-icons-4.7.0.tgz#ec66bc046bcd1513835f87541ecef54b50c57ec9"
"@types/lodash@^4.14.119": "@types/lodash@^4.14.119":
version "4.14.119" version "4.14.119"
resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.119.tgz#be847e5f4bc3e35e46d041c394ead8b603ad8b39" resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.119.tgz#be847e5f4bc3e35e46d041c394ead8b603ad8b39"
@ -1867,6 +1871,10 @@ class-utils@^0.3.5:
isobject "^3.0.0" isobject "^3.0.0"
static-extend "^0.1.1" static-extend "^0.1.1"
classnames@^2.2.5:
version "2.2.6"
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
clean-css@4.1.x: clean-css@4.1.x:
version "4.1.11" version "4.1.11"
resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.1.11.tgz#2ecdf145aba38f54740f26cefd0ff3e03e125d6a" resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.1.11.tgz#2ecdf145aba38f54740f26cefd0ff3e03e125d6a"
@ -2156,6 +2164,10 @@ core-js@^2.4.0, core-js@^2.5.0:
version "2.5.7" version "2.5.7"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.7.tgz#f972608ff0cead68b841a16a932d0b183791814e" resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.7.tgz#f972608ff0cead68b841a16a932d0b183791814e"
core-js@^2.5.3:
version "2.6.1"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.1.tgz#87416ae817de957a3f249b3b5ca475d4aaed6042"
core-util-is@~1.0.0: core-util-is@~1.0.0:
version "1.0.2" version "1.0.2"
resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7" resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@ -3143,6 +3155,13 @@ fastparse@^1.1.1:
version "1.1.1" version "1.1.1"
resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.1.tgz#d1e2643b38a94d7583b479060e6c4affc94071f8" resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.1.tgz#d1e2643b38a94d7583b479060e6c4affc94071f8"
feather-icons@^4.10.0:
version "4.10.0"
resolved "https://registry.yarnpkg.com/feather-icons/-/feather-icons-4.10.0.tgz#5c2ba00ecf6f0529e99ab445d054fa6bd0b9c8d6"
dependencies:
classnames "^2.2.5"
core-js "^2.5.3"
figures@^2.0.0: figures@^2.0.0:
version "2.0.0" version "2.0.0"
resolved "https://registry.yarnpkg.com/figures/-/figures-2.0.0.tgz#3ab1a2d2a62c8bfb431a0c94cb797a2fce27c962" resolved "https://registry.yarnpkg.com/figures/-/figures-2.0.0.tgz#3ab1a2d2a62c8bfb431a0c94cb797a2fce27c962"