chore: refactor stats generator to use an enum for types

fix: saved data not being converted to JSON automatically when using SQLite (and possibly MSSQL)
feat: display when a stat was generated in the section's header
fix: not being able to click through the footer (sorry IE11 users, you still won't be able to click through it)
fix: add is-mobile to columns so they don't stack on top of each other
feat: add text next to the NSFW toggle and make it look like the elements around it (begone round iOS edges)

10 files changed, 39 insertions, 11 deletions

diff --git a/src/site/components/album/AlbumDetails.vue b/src/site/components/album/AlbumDetails.vue
index 81819b2..da472b0 100644
--- a/src/site/components/album/AlbumDetails.vue
+++ b/src/site/components/album/AlbumDetails.vue
@@ -101,7 +101,13 @@
 						<div class="level-item">
 							<b-switch
 								:value="nsfw"
-								@input="toggleNsfw()" />
+								:rounded="false"
+								type="is-warning"
+								class="has-text-light"
+								left-label
+								@input="toggleNsfw()">
+								NSFW
+							</b-switch>
 						</div>
 						<div class="level-item">
 							<button
diff --git a/src/site/components/footer/Footer.vue b/src/site/components/footer/Footer.vue
index 96774e7..0c77603 100644
--- a/src/site/components/footer/Footer.vue
+++ b/src/site/components/footer/Footer.vue
@@ -72,6 +72,9 @@ export default {
 <style lang="scss" scoped>
 	@import '~/assets/styles/_colors.scss';
 	footer {
+		pointer-events: none;
+		touch-action: none;
+
 		@media screen and (min-width: 1025px) {
 			position: fixed;
 			bottom: 0;
@@ -84,6 +87,9 @@ export default {
 
 		.container {
 			.column {
+				pointer-events: auto;
+				touch-action: auto;
+
 				text-align: center;
 				@media screen and (min-width: 1025px) {
 					margin-right: 2rem;
diff --git a/src/site/components/sidebar/Sidebar.vue b/src/site/components/sidebar/Sidebar.vue
index 98c3c81..a021226 100644
--- a/src/site/components/sidebar/Sidebar.vue
+++ b/src/site/components/sidebar/Sidebar.vue
@@ -29,7 +29,7 @@
 				</template>
 				<b-menu-item icon="account" label="Users" tag="nuxt-link" to="/dashboard/admin/users" exact />
 				<b-menu-item icon="cog-outline" label="Settings" tag="nuxt-link" to="/dashboard/admin/settings" exact />
-				<!--<b-menu-item icon="chart-line" label="Statistics" tag="nuxt-link" to="/dashboard/admin/statistics" exact />-->
+				<b-menu-item icon="chart-line" label="Statistics" tag="nuxt-link" to="/dashboard/admin/statistics" exact />
 			</b-menu-item>
 			<b-menu-item
 				class="item"
diff --git a/src/site/components/statistics/byte.vue b/src/site/components/statistics/byte.vue
index 05852cd..16f4427 100644
--- a/src/site/components/statistics/byte.vue
+++ b/src/site/components/statistics/byte.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<div class="columns">
+		<div class="columns is-mobile">
 			<div class="column is-2">
 				{{ title }}
 			</div>
diff --git a/src/site/components/statistics/byteUsage.vue b/src/site/components/statistics/byteUsage.vue
index 740feff..9062e5e 100644
--- a/src/site/components/statistics/byteUsage.vue
+++ b/src/site/components/statistics/byteUsage.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<div class="columns">
+		<div class="columns is-mobile">
 			<div class="column is-2">
 				{{ title }}
 			</div>
diff --git a/src/site/components/statistics/detailed.vue b/src/site/components/statistics/detailed.vue
index 8a0722e..0d93e9a 100644
--- a/src/site/components/statistics/detailed.vue
+++ b/src/site/components/statistics/detailed.vue
@@ -1,11 +1,11 @@
 <template>
 	<div>
-		<div class="columns">
+		<div class="columns is-mobile">
 			<div class="column is-2">
 				{{ title }}
 			</div>
 			<div class="column">
-				<b-table :data="data || []" :mobile-cards="true">
+				<b-table v-if="data.length" :data="data || []" :mobile-cards="true" narrowed class="details">
 					<b-table-column v-slot="props" field="type" label="Type">
 						{{ props.row.key }}
 					</b-table-column>
@@ -13,6 +13,9 @@
 						{{ props.row.value }}
 					</b-table-column>
 				</b-table>
+				<template v-else>
+					-
+				</template>
 			</div>
 		</div>
 	</div>
@@ -31,3 +34,13 @@ export default {
 	}
 };
 </script>
+<style lang="scss" scoped>
+	.details ::v-deep .table-wrapper {
+		box-shadow: none;
+
+		.table {
+			border-radius: unset;
+			background: #2A2E3C;
+		}
+	}
+</style>
diff --git a/src/site/components/statistics/generic.vue b/src/site/components/statistics/generic.vue
index 704be7a..aa0f7e9 100644
--- a/src/site/components/statistics/generic.vue
+++ b/src/site/components/statistics/generic.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<div class="columns">
+		<div class="columns is-mobile">
 			<div class="column is-2">
 				{{ title }}
 			</div>
diff --git a/src/site/components/statistics/time.vue b/src/site/components/statistics/time.vue
index ff1bb8d..54174da 100644
--- a/src/site/components/statistics/time.vue
+++ b/src/site/components/statistics/time.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<div class="columns">
+		<div class="columns is-mobile">
 			<div class="column is-2">
 				{{ title }}
 			</div>
diff --git a/src/site/pages/dashboard/admin/statistics.vue b/src/site/pages/dashboard/admin/statistics.vue
index 4d601cf..ecee102 100644
--- a/src/site/pages/dashboard/admin/statistics.vue
+++ b/src/site/pages/dashboard/admin/statistics.vue
@@ -14,8 +14,11 @@
 						<div :key="category"
 							class="stats-container">
 							<h2 class="title">
-								{{ category }}
+								{{ category }} <span v-if="stats[category].meta" class="is-size-7 is-pulled-right is-family-monospace has-text-grey-light">
+									generated on {{ stats[category].meta.generatedOn }}
+								</span>
 							</h2>
+
 							<template v-for="item in Object.keys(stats[category])">
 								<!-- If it's plain text or a number, just print it -->
 								<template v-if="typeof stats[category][item] === 'string' || typeof stats[category][item] === 'number'">
@@ -25,7 +28,7 @@
 								</template>
 
 								<!-- If it's an object then we need to do some magic -->
-								<template v-else-if="typeof stats[category][item] === 'object'">
+								<template v-else-if="typeof stats[category][item] === 'object' && stats[category][item].type !== 'hidden'">
 									<byteUsage v-if="stats[category][item].type === 'byteUsage'"
 										:key="item"
 										:title="item"
diff --git a/src/site/pages/dashboard/albums/index.vue b/src/site/pages/dashboard/albums/index.vue
index e3ccc08..2ebfb3f 100644
--- a/src/site/pages/dashboard/albums/index.vue
+++ b/src/site/pages/dashboard/albums/index.vue
@@ -105,7 +105,7 @@ export default {
 
 	div.search-container {
 		padding: 1rem 2rem;
-		background-color: $base-2;
+		// background-color: $base-2;
 	}
 
 	div.column > h2.subtitle { padding-top: 1px; }