Speicher und Lademöglichkeit

package.json

@@ -1,6 +1,6 @@
 {
-	"name": "itsbingotime",
+	"name": "esamuchrechner",
-	"version": "0.0.1",
+	"version": "0.0.2",
 	"description": "DER ABSOLUTE MUCH RECHNER FÜR DIE VOLKSFRONT VOR SEINEM HERRN",
 	"productName": "ESA Much Rechner",
 	"author": "Lordmau5 <mail@lordmau5.com>",
@@ -13,6 +13,8 @@
 	},
 	"dependencies": {
 		"@quasar/extras": "^1.16.4",
+		"@vueuse/core": "^10.2.1",
+		"file-saver": "^2.0.5",
 		"pinia": "^2.1.3",
 		"quasar": "^2.12.0",
 		"vue": "^3.3.4",

pnpm-lock.yaml

@@ -4,6 +4,12 @@ dependencies:
   '@quasar/extras':
     specifier: ^1.16.4
     version: 1.16.4
+  '@vueuse/core':
+    specifier: ^10.2.1
+    version: 10.2.1(vue@3.3.4)
+  file-saver:
+    specifier: ^2.0.5
+    version: 2.0.5
   pinia:
     specifier: ^2.1.3
     version: 2.1.3(vue@3.3.4)
@@ -354,6 +360,10 @@ packages:
       '@types/node': 20.2.5
     dev: true
 
+  /@types/web-bluetooth@0.0.17:
+    resolution: {integrity: sha512-4p9vcSmxAayx72yn70joFoL44c9MO/0+iVEBIQXe3v2h2SiAsEIo/G5v6ObFWvNKRFjbrVadNf9LqEEZeQPzdA==}
+    dev: false
+
   /@vitejs/plugin-vue@2.3.4(vite@2.9.16)(vue@3.3.4):
     resolution: {integrity: sha512-IfFNbtkbIm36O9KB8QodlwwYvTEsJb4Lll4c2IwB3VHc2gie2mSPtSzL0eYay7X2jd/2WX02FjSGTWR6OPr/zg==}
     engines: {node: '>=12.0.0'}
@@ -441,6 +451,31 @@ packages:
   /@vue/shared@3.3.4:
     resolution: {integrity: sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==}
 
+  /@vueuse/core@10.2.1(vue@3.3.4):
+    resolution: {integrity: sha512-c441bfMbkAwTNwVRHQ0zdYZNETK//P84rC01aP2Uy/aRFCiie9NE/k9KdIXbno0eDYP5NPUuWv0aA/I4Unr/7w==}
+    dependencies:
+      '@types/web-bluetooth': 0.0.17
+      '@vueuse/metadata': 10.2.1
+      '@vueuse/shared': 10.2.1(vue@3.3.4)
+      vue-demi: 0.14.5(vue@3.3.4)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: false
+
+  /@vueuse/metadata@10.2.1:
+    resolution: {integrity: sha512-3Gt68mY/i6bQvFqx7cuGBzrCCQu17OBaGWS5JdwISpMsHnMKKjC2FeB5OAfMcCQ0oINfADP3i9A4PPRo0peHdQ==}
+    dev: false
+
+  /@vueuse/shared@10.2.1(vue@3.3.4):
+    resolution: {integrity: sha512-QWHq2bSuGptkcxx4f4M/fBYC3Y8d3M2UYyLsyzoPgEoVzJURQ0oJeWXu79OiLlBb8gTKkqe4mO85T/sf39mmiw==}
+    dependencies:
+      vue-demi: 0.14.5(vue@3.3.4)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: false
+
   /accepts@1.3.8:
     resolution: {integrity: sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==}
     engines: {node: '>= 0.6'}
@@ -1629,6 +1664,10 @@ packages:
       flat-cache: 3.0.4
     dev: true
 
+  /file-saver@2.0.5:
+    resolution: {integrity: sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==}
+    dev: false
+
   /fill-range@7.0.1:
     resolution: {integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==}
     engines: {node: '>=8'}

src/layouts/MainLayout.vue

@@ -6,7 +6,26 @@
 					Der ESA Much Rechner
 				</q-toolbar-title>
 
-				<div>Die Volksfront von Rechnäa</div>
+				<div>
+					<q-btn-group>
+						<q-btn
+							icon="upload"
+							@click="openFileDialog({ multiple: false, accept: '.json' })"
+						>
+							Import
+						</q-btn>
+						<q-btn
+							icon="download"
+							@click="nachDateiExportieren"
+						>
+							Export
+						</q-btn>
+					</q-btn-group>
+
+					<span class="q-pl-sm">
+						Die Volksfront von Rechnäa
+					</span>
+				</div>
 			</q-toolbar>
 		</q-header>
 
@@ -15,3 +34,34 @@
 		</q-page-container>
 	</q-layout>
 </template>
+
+<script setup>
+import { useFileDialog } from '@vueuse/core';
+import { saveAs } from 'file-saver';
+import { usePersonenStore } from 'stores/personen-store.js';
+
+const personenStore = usePersonenStore();
+const { personen } = personenStore;
+
+const nachDateiExportieren = () => {
+	saveAs(new Blob([JSON.stringify(personen.value)]), 'personen.json', {
+		type: 'application/json',
+	});
+};
+
+const { open: openFileDialog, reset, onChange } = useFileDialog();
+
+onChange(async files => {
+	const file = files[0];
+
+	try {
+		personen.value = JSON.parse(await file.text());
+		personenStore.save();
+
+		reset();
+	}
+	catch (_) {
+		// Do nothing
+	}
+});
+</script>

src/pages/RechnerSeite.vue

@@ -257,11 +257,13 @@
 </template>
 
 <script setup>
-// TODO: Multiselect wenn Geld blechen um nur bestimmte Personen mit einzubeziehen
+import { usePersonenStore } from 'stores/personen-store.js';
+import { computed, ref, watch } from 'vue';
 
-import { computed, onMounted, ref, watch } from 'vue';
+const personenStore = usePersonenStore();
+personenStore.load();
 
-const personen = ref({});
+const { personen } = personenStore;
 
 const personenNamensEingabeFeld = ref('');
 const personenAuswähler = ref(null);
@@ -316,16 +318,6 @@ const blechGesprächZeilen = computed(() => {
 	return person.geblecht;
 });
 
-onMounted(() => {
-	try {
-		if (localStorage.personen)
-			personen.value = JSON.parse(localStorage.getItem('personen'));
-	}
-	catch(_) {
-		// Nothing
-	}
-});
-
 const wirdDieShiftTasteGehalten = ref(false);
 document.onkeydown = event => {
 	wirdDieShiftTasteGehalten.value = event.shiftKey;
@@ -335,7 +327,7 @@ document.onkeyup = event => {
 };
 
 function speicherLeute () {
-	localStorage.setItem('personen', JSON.stringify(personen.value));
+	personenStore.save();
 }
 
 function personHinzufügen () {
@@ -375,8 +367,6 @@ function geldBlechen () {
 function blechSumme (blechListe, nameDerPerson = false) {
 	let gesamtBlechGeld = 0;
 
-	// / Object.keys(personen.value).length;
-
 	for (const blech of blechListe) {
 		if (!nameDerPerson) {
 			gesamtBlechGeld += blech.geld;

src/stores/example-store.js

@@ -1,15 +0,0 @@
-import { defineStore } from 'pinia';
-
-export const useCounterStore = defineStore('counter', {
-	state: () => ({
-		counter: 0,
-	}),
-	getters: {
-		doubleCount: (state) => state.counter * 2,
-	},
-	actions: {
-		increment () {
-			this.counter++;
-		},
-	},
-});

src/stores/personen-store.js

@@ -0,0 +1,25 @@
+import { defineStore } from 'pinia';
+
+export const usePersonenStore = defineStore('personen', {
+	state: () => ({
+		personen: {},
+	}),
+	actions: {
+		load () {
+			this.personen.value = {};
+
+			try {
+				if (localStorage.personen)
+					this.personen.value = JSON.parse(localStorage.getItem('personen'));
+
+				console.log(this.personen.value);
+			}
+			catch(_) {
+				// Nothing
+			}
+		},
+		save () {
+			localStorage.setItem('personen', JSON.stringify(this.personen.value));
+		},
+	},
+});