build:v1.3.3; workflow: added vue-composition-api; feat: moved app status to about page, this closes #6; chore: removed style scripts from package.json
This commit is contained in:
Roberto Tonino
parent
6c32367c80
commit
351cd2d626
15
package-lock.json
generated
15
package-lock.json
generated
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "deemix-webui",
|
||||
"version": "1.3.2",
|
||||
"version": "1.3.3",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
@ -423,6 +423,14 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"@vue/composition-api": {
|
||||
"version": "1.0.0-beta.19",
|
||||
"resolved": "https://registry.npmjs.org/@vue/composition-api/-/composition-api-1.0.0-beta.19.tgz",
|
||||
"integrity": "sha512-FYl3DofSJAKdLO2Ig18ITelcOAWc1CWwfgMrqh7op38aqR5RfcJ7RA3kiDu38iZB0r86dMxcaOHoszIGKpU98g==",
|
||||
"requires": {
|
||||
"tslib": "^2.0.1"
|
||||
}
|
||||
},
|
||||
"abbrev": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
|
||||
@ -7337,6 +7345,11 @@
|
||||
"glob": "^7.1.2"
|
||||
}
|
||||
},
|
||||
"tslib": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",
|
||||
"integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ=="
|
||||
},
|
||||
"tunnel-agent": {
|
||||
"version": "0.6.0",
|
||||
"resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
|
||||
|
||||
@ -1,10 +1,8 @@
|
||||
{
|
||||
"name": "deemix-webui",
|
||||
"version": "1.3.2",
|
||||
"version": "1.3.3",
|
||||
"scripts": {
|
||||
"clean": "rimraf public/css/style.css public/css/style.css.map public/js/bundle.js public/js/bundle.js.map",
|
||||
"watch:styles": "sass --watch --source-map --embed-sources src/styles/scss/style.scss public/css/style.css",
|
||||
"build:styles": "sass --no-source-map --style=compressed src/styles/scss/style.scss public/css/style.css",
|
||||
"build:js": "rollup -c",
|
||||
"watch:js": "rollup -c -w",
|
||||
"serve": "python ../server.py",
|
||||
@ -14,6 +12,7 @@
|
||||
"build": "npm-run-all --sequential clean build:js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@vue/composition-api": "^1.0.0-beta.19",
|
||||
"flag-icon-css": "^3.5.0",
|
||||
"lodash-es": "^4.17.15",
|
||||
"svg-country-flags": "^1.2.9",
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -48,18 +48,6 @@
|
||||
></div>
|
||||
</div>
|
||||
</span>
|
||||
<div id="network-status" :class="{ online: appOnline, offline: !appOnline }">
|
||||
<i v-if="appOnline" class="material-icons">wifi</i>
|
||||
<i v-else class="material-icons">
|
||||
<!-- wifi_off icon not working, maybe need to include it? -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<path d="M24 .01c0-.01 0-.01 0 0L0 0v24h24V.01zM0 0h24v24H0V0zm0 0h24v24H0V0z" fill="none" />
|
||||
<path
|
||||
d="M22.99 9C19.15 5.16 13.8 3.76 8.84 4.78l2.52 2.52c3.47-.17 6.99 1.05 9.63 3.7l2-2zm-4 4c-1.29-1.29-2.84-2.13-4.49-2.56l3.53 3.53.96-.97zM2 3.05L5.07 6.1C3.6 6.82 2.22 7.78 1 9l1.99 2c1.24-1.24 2.67-2.16 4.2-2.77l2.24 2.24C7.81 10.89 6.27 11.73 5 13v.01L6.99 15c1.36-1.36 3.14-2.04 4.92-2.06L18.98 20l1.27-1.26L3.29 1.79 2 3.05zM9 17l3 3 3-3c-1.65-1.66-4.34-1.66-6 0z"
|
||||
/>
|
||||
</svg>
|
||||
</i>
|
||||
</div>
|
||||
</aside>
|
||||
</template>
|
||||
|
||||
@ -78,25 +66,6 @@
|
||||
grid-gap: 8px;
|
||||
}
|
||||
|
||||
#network-status {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
margin-top: auto;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
#network-status.online i.material-icons {
|
||||
color: hsl(150, 76%, 34%);
|
||||
}
|
||||
|
||||
#network-status.offline i.material-icons svg {
|
||||
fill: red;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
#update-notification {
|
||||
position: absolute;
|
||||
left: 30px;
|
||||
@ -131,7 +100,6 @@ import { mapGetters } from 'vuex'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
appOnline: null,
|
||||
activeTheme: 'light',
|
||||
themes: ['purple', 'dark', 'light'],
|
||||
activeTablink: 'home',
|
||||
@ -202,17 +170,6 @@ export default {
|
||||
})
|
||||
},
|
||||
mounted() {
|
||||
/* === Online status handling === */
|
||||
this.appOnline = navigator.onLine
|
||||
|
||||
window.addEventListener('online', () => {
|
||||
this.appOnline = true
|
||||
})
|
||||
|
||||
window.addEventListener('offline', () => {
|
||||
this.appOnline = false
|
||||
})
|
||||
|
||||
/* === Current theme handling === */
|
||||
this.activeTheme = localStorage.getItem('selectedTheme') || 'dark'
|
||||
|
||||
@ -228,11 +185,6 @@ export default {
|
||||
socket.on('updateAvailable', () => {
|
||||
this.updateAvailable = true
|
||||
})
|
||||
|
||||
// Check if download tab has slim entries
|
||||
if ('true' === localStorage.getItem('slimSidebar')) {
|
||||
this.$refs.sidebar.classList.add('slim')
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeTheme(newTheme) {
|
||||
|
||||
@ -2,6 +2,12 @@
|
||||
<div id="about_tab">
|
||||
<h1 class="mb-8 text-5xl capitalize">{{ $t('sidebar.about') }}</h1>
|
||||
|
||||
<div class="inline-flex px-4 py-2 mb-8 rounded-full" :class="{ 'bg-green-500': isOnline, 'bg-red-500': !isOnline }">
|
||||
<span class="text-sm uppercase-first-letter">
|
||||
{{ $t(`about.appStatus.${isOnline ? 'online' : 'offline'}`) }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
{{ $t('about.updates.currentWebuiVersion') }}:
|
||||
@ -28,7 +34,7 @@
|
||||
<h2>{{ $t('about.titles.usefulLinks') }}</h2>
|
||||
<ul class="no-dots">
|
||||
<!-- <li>
|
||||
<a href="https://deemix.app" target="_blank">🌍 {{ $t('about.officialWebsite') }}</a>
|
||||
<a href="" target="_blank">🌍 {{ $t('about.officialWebsite') }}</a>
|
||||
</li> -->
|
||||
<!-- <li>
|
||||
<a href="" target="_blank">🚀 {{ $t('about.officialRepo') }}</a>
|
||||
@ -225,37 +231,44 @@ ul {
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { socket } from '@/utils/socket'
|
||||
import { defineComponent, ref, reactive, toRefs, onMounted, computed } from '@vue/composition-api'
|
||||
|
||||
import { useOnline } from '@/use/online'
|
||||
|
||||
import paypal from '@/assets/paypal.svg'
|
||||
import ethereum from '@/assets/ethereum.svg'
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
paypal,
|
||||
ethereum,
|
||||
export default defineComponent({
|
||||
setup(props, ctx) {
|
||||
const state = reactive({
|
||||
current: null,
|
||||
latest: null,
|
||||
updateAvailable: false,
|
||||
deemixVersion: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['getAppInfo'])
|
||||
},
|
||||
methods: {
|
||||
initUpdate(data) {
|
||||
const { currentCommit, latestCommit, updateAvailable, deemixVersion } = data
|
||||
})
|
||||
const { isOnline } = useOnline()
|
||||
|
||||
this.current = currentCommit
|
||||
this.latest = latestCommit
|
||||
this.updateAvailable = updateAvailable
|
||||
this.deemixVersion = deemixVersion
|
||||
function initUpdate(appInfo) {
|
||||
const { currentCommit, latestCommit, updateAvailable, deemixVersion } = appInfo
|
||||
|
||||
state.current = currentCommit
|
||||
state.latest = latestCommit
|
||||
state.updateAvailable = updateAvailable
|
||||
state.deemixVersion = deemixVersion
|
||||
}
|
||||
|
||||
const getAppInfo = computed(() => ctx.root.$store.getters.getAppInfo)
|
||||
|
||||
onMounted(() => {
|
||||
initUpdate(getAppInfo.value)
|
||||
})
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
paypal,
|
||||
ethereum,
|
||||
isOnline
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initUpdate(this.getAppInfo)
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -832,12 +832,14 @@ export default {
|
||||
this.defaultSettings = defaultSettingsData
|
||||
this.initSettings(settingsData, spotifyCredentials)
|
||||
|
||||
// TODO Move in store
|
||||
let storedAccountNum = localStorage.getItem('accountNum')
|
||||
|
||||
if (storedAccountNum) {
|
||||
this.accountNum = storedAccountNum
|
||||
}
|
||||
|
||||
// TODO Move in store
|
||||
let spotifyUser = localStorage.getItem('spotifyUser')
|
||||
|
||||
if (spotifyUser) {
|
||||
|
||||
@ -33,7 +33,7 @@ export function getInitialPreviewVolume() {
|
||||
let volume = parseInt(localStorage.getItem('previewVolume'))
|
||||
|
||||
if (isNaN(volume)) {
|
||||
volume = 80
|
||||
volume = 80 // Default
|
||||
localStorage.setItem('previewVolume', volume.toString())
|
||||
}
|
||||
|
||||
|
||||
@ -44,6 +44,10 @@ const en = {
|
||||
}
|
||||
},
|
||||
about: {
|
||||
appStatus: {
|
||||
online: 'app online',
|
||||
offline: 'app offline'
|
||||
},
|
||||
updates: {
|
||||
currentVersion: 'Current Version',
|
||||
currentWebuiVersion: 'Current WebUI Version',
|
||||
|
||||
@ -44,6 +44,10 @@ const it = {
|
||||
}
|
||||
},
|
||||
about: {
|
||||
appStatus: {
|
||||
online: 'app online',
|
||||
offline: 'app offline'
|
||||
},
|
||||
updates: {
|
||||
currentVersion: 'Versione attuale',
|
||||
currentWebuiVersion: 'Versione WebUI attuale',
|
||||
|
||||
4
src/plugins/composition-api.js
Normal file
4
src/plugins/composition-api.js
Normal file
@ -0,0 +1,4 @@
|
||||
import Vue from 'vue'
|
||||
import VueCompositionAPI from '@vue/composition-api'
|
||||
|
||||
Vue.use(VueCompositionAPI)
|
||||
@ -1,5 +1,3 @@
|
||||
import { getInitialPreviewVolume, checkInitialSlimDownloads, checkInitialSlimSidebar } from '@/data/settings'
|
||||
|
||||
/**
|
||||
* @typedef {object} AppInfo
|
||||
* @property {string} currentCommit
|
||||
@ -11,6 +9,8 @@ import { getInitialPreviewVolume, checkInitialSlimDownloads, checkInitialSlimSid
|
||||
* @property {boolean} hasSlimSidebar
|
||||
*/
|
||||
|
||||
import { getInitialPreviewVolume, checkInitialSlimDownloads, checkInitialSlimSidebar } from '@/data/settings'
|
||||
|
||||
/**
|
||||
* @returns {AppInfo}
|
||||
*/
|
||||
|
||||
@ -9,3 +9,13 @@
|
||||
.secondary-text {
|
||||
@apply mb-1 text-sm opacity-75;
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.uppercase-first-letter::first-letter {
|
||||
@apply uppercase;
|
||||
}
|
||||
|
||||
.lowercase-first-letter::first-letter {
|
||||
@apply lowercase;
|
||||
}
|
||||
}
|
||||
|
||||
13
src/use/online.js
Normal file
13
src/use/online.js
Normal file
@ -0,0 +1,13 @@
|
||||
import { ref } from '@vue/composition-api'
|
||||
|
||||
const isOnline = ref(navigator.onLine)
|
||||
|
||||
window.addEventListener('online', () => {
|
||||
isOnline.value = true
|
||||
})
|
||||
|
||||
window.addEventListener('offline', () => {
|
||||
isOnline.value = false
|
||||
})
|
||||
|
||||
export const useOnline = () => ({ isOnline })
|
||||
Loading…
Reference in New Issue
Block a user