Update

parent 6d213c3c
<?xml version="1.0" encoding="UTF-8"?>
<module type="JAVA_MODULE" version="4">
<component name="NewModuleRootManager" inherit-compiler-output="true">
<exclude-output />
<content url="file://$MODULE_DIR$" />
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="JavaScriptSettings">
<option name="languageLevel" value="ES6" />
</component>
</project>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/aquakoek.iml" filepath="$PROJECT_DIR$/.idea/aquakoek.iml" />
</modules>
</component>
</project>
\ No newline at end of file
<component name="ProjectRunConfigurationManager">
<configuration default="false" name="build" type="js.build_tools.npm" factoryName="npm" nameIsGenerated="true">
<package-json value="$PROJECT_DIR$/package.json" />
<command value="run" />
<scripts>
<script value="build" />
</scripts>
<node-interpreter value="project" />
<envs />
<method />
</configuration>
</component>
\ No newline at end of file
<component name="ProjectRunConfigurationManager">
<configuration default="false" name="serve" type="js.build_tools.npm" factoryName="npm" nameIsGenerated="true">
<package-json value="$PROJECT_DIR$/package.json" />
<command value="run" />
<scripts>
<script value="serve" />
</scripts>
<node-interpreter value="project" />
<envs />
<method />
</configuration>
</component>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="" vcs="Git" />
</component>
</project>
\ No newline at end of file
This diff is collapsed.
{
"name": "aqua-koek",
"name": "aquakoek",
"version": "1.0.0",
"description": "Aquakoek",
"scripts": {
......@@ -19,18 +19,16 @@
"webpack-cli": "^2.1.5",
"webpack-dev-server": "^3.1.4",
"webpack-merge": "^4.1.3",
"webpack-pwa-manifest": "^3.6.2",
"workbox-webpack-plugin": "^3.3.0"
"webpack-pwa-manifest": "^3.6.2"
},
"dependencies": {
"@firebase/app": "^0.3.3",
"@firebase/firestore": "^0.5.4",
"bootstrap": "^4.1.1",
"firebase": "^5.1.0",
"jquery": "^3.3.1",
"popper.js": "^1.14.3",
"vue": "^2.5.16",
"vue-firestore": "^0.2.9",
"vue-router": "^3.0.1",
"vuefire": "^2.0.0-alpha.11",
"vuex": "^3.0.1"
}
}
......@@ -2,6 +2,13 @@
<div id="app">
<!--<nav-header></nav-header>-->
<div class="container-fluid">
<div v-if="!signedIn" class="row">
<div class="col">
<div @click="openLoginPage" class="alert alert-danger" role="alert">
Niet ingelogd. Tik hier om in te loggen.
</div>
</div>
</div>
<router-view></router-view>
</div>
</div>
......@@ -9,12 +16,19 @@
<script>
import NavHeader from "./components/NavHeader.vue";
import {mapState} from 'vuex';
export default {
components: {
NavHeader
},
name: "app",
computed: mapState(['signedIn']),
methods: {
openLoginPage() {
this.$router.push({name: 'login'});
}
}
}
</script>
......@@ -23,6 +37,16 @@
background: linear-gradient(to left top, #216572, #359b8b) no-repeat;
height: 100vh;
margin: 0;
overflow: hidden;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none;
/* Non-prefixed version, currently
supported by Chrome and Opera */
}
.container-fluid {
......
import Firebase from '@firebase/app';
import '@firebase/firestore';
import Vue from 'vue';
import VueFire from 'vuefire';
import Firebase from 'firebase';
import 'firebase/firestore';
import {firebaseConfig} from './config.js';
const app = Firebase.initializeApp(firebaseConfig);
Vue.use(VueFire);
const app = Firebase.initializeApp(firebaseConfig);
export const db = app.firestore();
db.settings({
timestampsInSnapshots: true
});
export function getTimestamp() {
return Firebase.firestore.FieldValue.serverTimestamp();
}
......@@ -3,7 +3,6 @@ import 'bootstrap';
import Vue from 'vue';
import App from './App.vue';
import VueFirestore from 'vue-firestore';
import router from './router';
import store from './store';
......@@ -17,8 +16,6 @@ import store from './store';
// });
// }
Vue.use(VueFirestore);
new Vue({
el: "#app",
template: '<app></app>',
......
This diff is collapsed.
<template>
<div class="row align-items-center justify-content-center login-row">
<div class="col-auto">
<div class="card">
<div class="card-body">
<h5 class="card-title">Inloggen</h5>
<form @submit.prevent="login">
<div class="form-group">
<label for="email-input">Email adres</label>
<input v-model="email" type="email" class="form-control" id="email-input"
placeholder="Email">
</div>
<div class="form-group">
<label for="password-input">Wachtwoord</label>
<input v-model="password" type="password" class="form-control" id="password-input"
placeholder="Password">
</div>
<button type="submit" class="btn btn-primary">Inloggen</button>
<button @click="goBack" type="button" class="btn btn-secondary">Terug</button>
</form>
<div v-if="error" class="alert alert-danger mt-3" role="alert">
Error
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Firebase from 'firebase';
export default {
name: "LoginPage",
data() {
return {
email: "",
password: "",
error: false,
}
},
methods: {
login() {
Firebase.auth().signInWithEmailAndPassword(this.email, this.password)
.then(user => {
this.error = false;
console.log(`Signed in as ${user.user.email}`);
this.$router.go(-1);
})
.catch(error => {
this.error = true;
});
},
goBack() {
this.$router.go(-1);
}
}
}
</script>
<style scoped>
.login-row {
height: 70vh;
}
</style>
......@@ -3,7 +3,7 @@
<div class="col-md-2">
<button @click="goBack()" type="button" class="btn btn-secondary btn-lg btn-block mb-3">Back</button>
<div class="card mb-2">
<img class="card-img-top" :src="user.thumbnail">
<img class="card-img-top img-fluid user-image" :src="user.image">
<div class="card-body">
<h5 class="card-title">{{user.name}}</h5>
</div>
......@@ -55,5 +55,8 @@
</script>
<style scoped>
.user-image {
max-width: 100%;
height: auto;
}
</style>
......@@ -2,6 +2,7 @@ import Vue from 'vue';
import Router from 'vue-router';
import HomePage from '../pages/HomePage.vue';
import UserPage from '../pages/UserPage.vue';
import LoginPage from '../pages/LoginPage.vue';
import ErrorPage from '../pages/ErrorPage.vue';
Vue.use(Router);
......@@ -18,6 +19,11 @@ export default new Router({
name: 'user',
component: UserPage
},
{
path: '/login',
name: 'login',
component: LoginPage
},
{
path: '/404',
component: ErrorPage
......
import Vue from 'vue';
import Vuex from 'vuex';
import Firebase from 'firebase';
import {db} from '../firebase';
Vue.use(Vuex);
export default new Vuex.Store({
const store = new Vuex.Store({
strict: process.env.NODE_ENV !== 'production',
state: {},
mutations: {},
state: {
signedIn: false,
totalConsumptions: 0,
totalCalories: 0,
userConsumptions: [],
userCalories: [],
},
mutations: {
signOut(state) {
state.signedIn = false;
},
signIn(state) {
state.signedIn = true;
},
updateStats(state, payload) {
console.log(`Stats: total: ${payload.total}, calories: ${payload.calories}`);
state.totalConsumptions = payload.total;
state.totalCalories = payload.calories;
state.userConsumptions = payload.users;
state.userCalories = payload.userCalories;
},
},
getters: {},
actions: {}
})
});
export default store;
Firebase.auth().onAuthStateChanged(user => {
if (user === null) {
store.commit('signOut');
} else {
store.commit('signIn');
}
});
const consumptionsRef = db.collection('consumptions').where('paid', '==', true).orderBy('date', 'desc')
.onSnapshot(snapshot => {
const userConsumptions = {};
const userCalories = {};
let total = 0;
let calories = 0;
snapshot.forEach(doc => {
const data = doc.data();
total++;
calories += data.calories;
const userName = data.userName;
if (typeof(userConsumptions[userName]) === 'undefined') userConsumptions[userName] = 0;
userConsumptions[userName]++;
if (typeof(userCalories[userName]) === 'undefined') userCalories[userName] = 0;
userCalories[userName]++;
});
// userConsumptions.sort(function(a,b) {
// if (a < b) return -1;
// if (a > b) return 1;
// return 0;
// });
// userCalories.sort(function(a,b) {
// if (a < b) return -1;
// if (a > b) return 1;
// return 0;
// });
store.commit('updateStats', {
total: total, calories: calories, userConsumptions: userConsumptions, userCalories: userCalories
})
});
......@@ -2,7 +2,6 @@ const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {VueLoaderPlugin} = require('vue-loader');
const WorkboxPlugin = require('workbox-webpack-plugin');
const WebpackPwaManifest = require('webpack-pwa-manifest');
......@@ -37,10 +36,6 @@ module.exports = {
inject: true
}),
new VueLoaderPlugin(),
new WorkboxPlugin.GenerateSW({
clientsClaim: true,
skipWaiting: true
}),
new WebpackPwaManifest({
short_name: "AquaKoek",
name: "Aqua Koek",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment