-
Billibox
-
Die kleine Welt alter Fotoapparate
-
-
-
+
+
+
+
+
+
+
+
Bitte wählen sie eine Kamera aus der Liste
-
+
-
-
+
diff --git a/src/router/index.ts b/src/router/index.ts
index f4a8657..e30d586 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -21,9 +21,26 @@ const router = createRouter( {
});
-router.beforeEach((to, from, next) => {
- if(to.meta.requiresAuth && !store.getters.isAuthenticated) {
- next("/")
+function sleep(ms) {
+ return new Promise(resolve => setTimeout(resolve, ms))
+}
+
+router.beforeEach(async(to, from, next) => {
+ if(to.meta.requiresAuth) {
+ // @ts-ignore
+ const kc = store.getters.keycloak;
+ console.log(kc);
+
+ while(typeof kc == "undefined" || kc.createLoginUrl === null) {
+ await sleep(100);
+ }
+ if(kc.authenticated) {
+ next()
+ }
+ else {
+ const loginUrl = kc.createLoginUrl()
+ window.location.replace(loginUrl)
+ }
} else {
next();
}
diff --git a/src/routes/app-routes.ts b/src/routes/app-routes.ts
index c342971..2af2dcc 100644
--- a/src/routes/app-routes.ts
+++ b/src/routes/app-routes.ts
@@ -1,6 +1,7 @@
import store from "@/store";
import ReadCameraPage from "@/pages/ReadCameraPage.vue";
import ReadListPage from "@/pages/ReadListPage.vue";
+import AuthRedirect from '@/components/auth/AuthRedirect.vue'
const appRoutes = [
@@ -9,13 +10,13 @@ const appRoutes = [
alias: "/home",
name: "home",
component: () => import('@/pages/HomePage.vue'),
- beforeEnter: (to:any, from:any, next:any) => {
- if (store.getters.isAuthenticated) {
- next("/shop");
- } else {
- next();
- }
- }
+ // beforeEnter: (to:any, from:any, next:any) => {
+ // if (store.getters.isAuthenticated) {
+ // next("/list");
+ // } else {
+ // next();
+ // }
+ // }
},
{
path: "/read/cameara/:id",
@@ -37,7 +38,24 @@ const appRoutes = [
requiresAuth: false,
// enterTransition: "rubberBand"
}
-
+ },
+ {
+ path: "/auth",
+ component: AuthRedirect,
+ props: true,
+ meta: {
+ requiresAuth: true,
+ // enterTransition: "rubberBand"
+ }
+ },
+ {
+ path: "/profile",
+ component: AuthRedirect,
+ props: true,
+ meta: {
+ requiresAuth: true,
+ // enterTransition: "rubberBand"
+ }
},
]
diff --git a/src/seed.js b/src/seed.js
index 4f4cea8..15b5b94 100644
--- a/src/seed.js
+++ b/src/seed.js
@@ -1,3 +1,4 @@
+
export const shape = [
{ schluessel: "neu", name: "neu", beschreibung: '' },
{ schluessel: "neuwertig", name: "neuwertig", beschreibung: '' },
@@ -209,6 +210,36 @@ export const cameras = [
description: "Langer Text",
year_of_production: 2000,
year_of_purchase: 2022,
+ },
+ {
+ id: "agfa_01",
+ brand_key: "agfa",
+ shape_key: "neuwertig",
+ name: "Agfa Click",
+ buildtype: "slr",
+ description: "Langer Text",
+ year_of_production: 2000,
+ year_of_purchase: 2000,
+ },
+ {
+ id: "agfa_02",
+ brand_key: "agfa",
+ shape_key: "neuwertig",
+ name: "Agfa Box",
+ buildtype: "slr",
+ description: "Langer Text",
+ year_of_production: 2000,
+ year_of_purchase: 1980,
+ },
+ {
+ id: "cancon_02",
+ brand_key: "canon",
+ shape_key: "neuwertig",
+ name: "Canon EOS",
+ buildtype: "slr",
+ description: "Langer Text",
+ year_of_production: 2000,
+ year_of_purchase: 1980,
}
];
//# sourceMappingURL=seed.js.map
\ No newline at end of file
diff --git a/src/seed.ts b/src/seed.ts
index 1ac849e..9987547 100644
--- a/src/seed.ts
+++ b/src/seed.ts
@@ -1,6 +1,7 @@
+export const SEED_VERSION = 1;
-export const shape = [
+export const conditions = [
{schluessel: "neu", name: "neu", beschreibung: ''},
{schluessel: "neuwertig", name: "neuwertig", beschreibung: ''},
{schluessel: "lg", name: "leichte Gebrauchsspuren", beschreibung: ''},
@@ -215,6 +216,66 @@ export const cameras = [
description: "Langer Text",
year_of_production: 2000,
year_of_purchase: 2022,
+ },
+ {
+ id: "agfa_01",
+ brand_key: "agfa",
+ shape_key: "neuwertig",
+ name: "Agfa Click",
+ buildtype: "slr",
+ description: "Langer Text",
+ year_of_production: 2000,
+ year_of_purchase: 2000,
+ },
+ {
+ id: "agfa_02",
+ brand_key: "agfa",
+ shape_key: "neuwertig",
+ name: "Agfa Box",
+ buildtype: "slr",
+ description: "Langer Text",
+ year_of_production: 2000,
+ year_of_purchase: 1980,
+ },
+ {
+ id: "cancon_02",
+ brand_key: "canon",
+ shape_key: "neuwertig",
+ name: "Canon EOS",
+ buildtype: "slr",
+ description: "Langer Text",
+ year_of_production: 2000,
+ year_of_purchase: 1980,
+ },
+ {
+ id: "agfa_03",
+ brand_key: "agfa",
+ shape_key: "neuwertig",
+ name: "Agfa Click",
+ buildtype: "slr",
+ description: "Langer Text",
+ year_of_production: 2000,
+ year_of_purchase: 2000,
+ },
+ {
+ id: "agfa_05",
+ brand_key: "agfa",
+ shape_key: "neuwertig",
+ name: "Agfa Box",
+ buildtype: "slr",
+ description: "Langer Text",
+ year_of_production: 2000,
+ year_of_purchase: 1980,
+ },
+ {
+ id: "cancon_07",
+ brand_key: "canon",
+ shape_key: "neuwertig",
+ name: "Canon EOS",
+ buildtype: "slr",
+ description: "Langer Text",
+ year_of_production: 2000,
+ year_of_purchase: 1980,
}
]
diff --git a/src/store/modules/auth/index.ts b/src/store/modules/auth/index.ts
index a2db293..74036f2 100644
--- a/src/store/modules/auth/index.ts
+++ b/src/store/modules/auth/index.ts
@@ -1,28 +1,64 @@
import {ActionContext} from "vuex";
+import Keycloak from "keycloak-js";
+const keyInitOptions = {
+ url: 'https://auth.toking.de/',
+ realm: 'toking',
+ clientId: 'billibox',
+ redirectUri: 'http://127.0.0.1:8080/',
+ onLoad: 'login-required',
+ enableLogging: true,
+ scope: 'open-id'
+
+}
const state = {
- userId: null,
- token: null
+ keycloak: null,
+ userProfile: null,
};
const getters = {
isAuthenticated(state:any ) {
- return state.token
+ return state.keycloak.authenticated
},
- token: (state:any) => state.token
+ token: (state:any) => state.token,
+ keycloak: (state:any) => state.keycloak,
+ userProfile: (state:any) => state.userProfile
};
const mutations = {
- setUser(context:ActionContext
, payload:any) {
- console.log("mutations.setUser", payload);
- state.userId = payload.userId;
- state.token = payload.token;
+
+ storeKeycloak(context:ActionContext, payload:any) {
+ console.log("mutations.storeKeycloak");
+ state.keycloak = payload;
},
+ storeUserProfile(context:ActionContext, payload:any) {
+ state.userProfile = payload
+ }
};
-const actions = {};
+const actions = {
+
+ storeKeycloak(context:ActionContext, payload:any) {
+ console.log("action.storeKeycloak");
+ context.commit("storeKeycloak", payload);
+ },
+ getToken(context:any, payload:any) {
+ console.log("actions.getToken")
+ console.log("Authenticated", context.state.keycloak)
+
+ context.state.keycloak.updateToken(70).then((refreshed) => {
+ console.log("Refresehd Token", refreshed);
+ }).catch((err)=> {
+ console.log("Error", err);
+ })
+ },
+ storeUserProfile(context:ActionContext, payload:any) {
+ context.commit("storeUserProfile", payload)
+ }
+
+ };
const modules = {};
const authModule = {
diff --git a/src/store/modules/camera/index.ts b/src/store/modules/camera/index.ts
index 1a824e5..de79fd2 100644
--- a/src/store/modules/camera/index.ts
+++ b/src/store/modules/camera/index.ts
@@ -1,24 +1,34 @@
import {ActionContext} from "vuex";
import * as seed from "@/seed";
+import BilliDB from "@/indexdDB";
+import { v4 as uuidv4 } from 'uuid';
+import {SEED_VERSION} from "@/seed";
+
+
+const db = new BilliDB("billibox", 3);
+
const state = {
isInitialized: false,
cameras: [],
brands: [],
- shapes: [],
+ conditions: [],
buildtypes: []
};
+
const getters = {
- cameras: (state: any) => state.cameras,
+ cameras: (state: any) => {
+ return state.cameras.sort();
+ },
camera: (state: any) => (id: any) => state.cameras.find((camera: any) => camera.id === id),
activeCamera: (state: any) => state.cameras.find((camera:any) => camera.active ),
brands: (state: any) => state.brands,
brand: (state: any) => (id: any) => state.brands.find((brand: any) => brand.schluessel === id),
- shapes: (state: any) => state.shapes,
- shape: (state: any) => (id: any) => state.shapes.find((shape: any) => shape.schluessel === id),
+ conditions: (state: any) => state.conditions,
+ condition: (state: any) => (id: any) => state.conditions.find((condition: any) => condition.schluessel === id),
buildtypes: (state: any) => state.buildtypes,
buildtype: (state: any) => (id: any) => state.buildtypes.find((buildtype: any) => buildtype.schluessel === id),
@@ -39,25 +49,47 @@ const mutations = {
})
console.log("STORE", state.cameras);
},
+ storeCamera(sate:any, payload:any) {
+ // console.log("mutation.storeCamera", payload)
+ const objCamera = state.cameras.find((camera:any) => camera.id === payload.id);
+ if(objCamera) {
+ // console.log("found existing Camera", objCamera.id);
+ payload.edit =false;
+ objCamera.name = payload.name;
+ } else {
+ // console.log("creating new Camera");
+
+ payload.edit = false;
+ state.cameras.push(payload);
+
+ }
+ return payload.id;
+ },
setCameraActiveState(state:any, payload:any) {
+ // console.log("setCameraActiveState", payload);
state.cameras.map((camera:any) => camera.active= false);
const objCamera = state.cameras.find((camera:any) => camera.id === payload.id);
objCamera.active = payload.active;
},
- setBrands(state:any, payload:any) {
- console.log("mutation.setBrands");
- state.brands = payload;
- console.log("STORE", state.brands);
+ setCameraEditState(state:any, payload:any) {
+ state.cameras.map((camera:any) => camera.edit= false);
+ const objCamera = state.cameras.find((camera:any) => camera.id === payload.id);
+ objCamera.edit = payload.edit;
},
- setShapes(state:any, payload:any) {
- console.log("mutation.setShapes");
- state.shapes = payload;
- console.log("STORE", state.shapes);
+ setBrands(state:any, payload:any) {
+ // console.log("mutation.setBrands");
+ state.brands = payload;
+ // console.log("STORE", state.brands);
+ },
+ setConditions(state:any, payload:any) {
+ //console.log("mutation.setConditions");
+ state.conditions = payload;
+ //console.log("STORE", state.conditions);
},
setBuildtypes(state:any, payload:any) {
- console.log("mutation.setBuildtypes");
+ //console.log("mutation.setBuildtypes");
state.buildtypes = payload;
- console.log("STORE", state.buildtypes);
+ //console.log("STORE", state.buildtypes);
},
setInitialized(state:any, payload:boolean) {
state.isInitialized = payload;
@@ -65,7 +97,12 @@ const mutations = {
};
const actions = {
fetchCameras(context:ActionContext) {
- context.commit("setCameras", seed.cameras);
+ console.log("action.fetchCameras")
+ db.getItems("cameras").then((cameras) => {
+ console.log("From DB", cameras);
+ context.commit("setCameras", cameras);
+
+ })
},
fetchBrands(context:ActionContext) {
context.commit("setBrands", seed.brands);
@@ -73,8 +110,8 @@ const actions = {
fetchBuildTypes(context:ActionContext) {
context.commit("setBuildtypes", seed.buildtype);
},
- fetchShape(context:ActionContext) {
- context.commit("setShapes", seed.shape);
+ fetchCondition(context:ActionContext) {
+ context.commit("setConditions", seed.conditions);
},
setCameraActiveState(context:ActionContext, payload:any) {
console.log("action.setCameraActiveState", payload)
@@ -82,12 +119,58 @@ const actions = {
context.commit("setCameraActiveState", {id: payload.cameraId, active:payload.active});
},
- initialize(context:ActionContext) {
+
+ setCameraEditState(context:ActionContext, payload:any) {
+ console.log("action.setCameraEditState", payload)
+ const cameraObj = state.cameras.find( (camera:any) => camera.id === payload.cameraId);
+ context.commit("setCameraEditState", {id: payload.cameraId, edit:payload.edit});
+
+ },
+
+ storeCamera(context:ActionContext, payload:any) {
+ // console.log("action.storeCamera", payload)
+
+ if(!payload.id) payload.id = uuidv4();
+ //console.log(" ... with id ", payload.id);
+
+ //console.log("Try to save to indexDB");
+ db.saveItem(payload , "cameras").then( (res) => {
+ console.log("DB-Save resolved", res )}
+ )
+
+
+ context.commit("storeCamera", payload);
+ context.commit("setCameraActiveState", {cameraId:payload.id, active:true})
+
+ },
+ initialize(context:ActionContext, payload) {
+
+ db.getDb();
+ const promises = [];
+ const seedVersion = localStorage.getItem("SEED_VERSION") || 0;
+ if(payload.seed && seedVersion < SEED_VERSION ) {
+
+ console.log("SEEDING database");
+
+ promises.push(db.saveItems(seed.brands, "brands"));
+ promises.push(db.saveItems(seed.conditions, "conditions"));
+ promises.push(db.saveItems(seed.buildtype, "buildtypes"));
+ promises.push(db.saveItems(seed.cameras, "cameras"));
+
+ localStorage.setItem("SEED_VERSION", seed.SEED_VERSION.toString())
+ } else {
+ console.log("SEEDING skipped");
+ }
+ Promise.all(promises).then( (e) => {
+ console.log("All written to store")
+ }
+ )
+
context.dispatch("fetchCameras");
- context.dispatch("fetchBrands");
- context.dispatch("fetchBuildTypes");
- context.dispatch("fetchShape");
- context.commit("setInitialized", true);
+ // context.dispatch("fetchBrands");
+ // context.dispatch("fetchBuildTypes");
+ // context.dispatch("fetchCondition");
+ // context.commit("setInitialized", true);
}
};
diff --git a/tsconfig.json b/tsconfig.json
index 1da2106..bef3346 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,7 +2,7 @@
"compilerOptions": {
"target": "esnext",
"module": "esnext",
- "strict": true,
+ "strict": false,
"jsx": "preserve",
"moduleResolution": "node",
"experimentalDecorators": true,
@@ -34,7 +34,8 @@
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
- "tests/**/*.tsx"
+ "tests/**/*.tsx",
+ "main.js"
],
"exclude": [
"node_modules"
+ 
+