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

2020-11-10 22:56:22 +01:00
parent 6c32367c80
commit 351cd2d626
13 changed files with 98 additions and 84 deletions
--- a/src/components/TheSidebar.vue
+++ b/src/components/TheSidebar.vue
@@ -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) {
--- a/src/components/pages/About.vue
+++ b/src/components/pages/About.vue
@@ -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>
--- a/src/components/pages/Settings.vue
+++ b/src/components/pages/Settings.vue
@@ -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) {