Working now

2020-01-20 16:07:40 +01:00
parent 53e54726ca
commit 51c2ee2a0e
29 changed files with 11278 additions and 63 deletions
--- a/.DS_Store
+++ b/.DS_Store
--- a/api/login.js
+++ b/api/login.js
@@ -4,16 +4,11 @@ const User = require(path.join(__dirname + "/../schemas/User"));
 const router = require("express").Router();

 router.get("/", function(req, res) {
-  console.log("here", req.isAuthenticated());
-  if (!req.isAuthenticated()) {
-    res.sendFile(path.join(__dirname + "/../public/login.html"));
-    return;
-  }
  res.sendFile(path.join(__dirname + "/../public/index.html"));
 });

 router.get("/register", function(req, res) {
-  res.sendFile(path.join(__dirname + "/../public/register.html"));
+  res.sendFile(path.join(__dirname + "/../public/index.html"));
 });

 router.post("/register", function(req, res, next) {
@@ -41,10 +36,10 @@ router.get("/login", function(req, res) {
 router.post(
  "/login",
  passport.authenticate("local", {
-    failureRedirect: "/login"
+    failureRedirect: "#/login"
  }),
  function(req, res) {
-    res.redirect("/");
+    res.redirect("/#/update");
  }
 );

--- a/api/update.js
+++ b/api/update.js
@@ -16,6 +16,7 @@ router.use((req, res, next) => {

 router.route("/log").post(async (req, res) => {
  if (!req.isAuthenticated()) {
+    res.send(false);
    return;
  }
  const purchaseBody = req.body.purchase;
--- a/config/env/dev.env.js
+++ b/config/env/dev.env.js
@@ -0,0 +1,3 @@
+module.exports = {
+  NODE_ENV: 'development'
+};
--- a/config/env/prod.env.js
+++ b/config/env/prod.env.js
@@ -0,0 +1,3 @@
+module.exports = {
+  NODE_ENV: "production"
+};
--- a/config/env/staging.env.js
+++ b/config/env/staging.env.js
@@ -0,0 +1,3 @@
+module.exports = {
+  NODE_ENV: "staging"
+};
--- a/config/helpers.js
+++ b/config/helpers.js
@@ -0,0 +1,15 @@
+'use strict';
+
+const path = require('path');
+
+const _root = path.resolve(__dirname, '..');
+
+exports.root = function(args) {
+  args = Array.prototype.slice.call(arguments, 0);
+
+  return path.join.apply(path, [_root].concat(args));
+};
+
+exports.assetsPath = function(_path) {
+  return path.posix.join('static', _path);
+};
--- a/config/vinlottis.config.js
+++ b/config/vinlottis.config.js
@@ -0,0 +1,28 @@
+"use strict";
+
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const helpers = require("./helpers");
+
+const VinlottisConfig = {
+  entry: {
+    vinlottis: ["@babel/polyfill", helpers.root("src", "vinlottis-init")]
+  },
+  optimization: {
+    minimizer: [
+      new HtmlWebpackPlugin({
+        chunks: ["vinlottis"],
+        filename: "../index.html",
+        template: "./src/templates/Create.html",
+        inject: true,
+        minify: {
+          removeComments: true,
+          collapseWhitespace: false,
+          preserveLineBreaks: true,
+          removeAttributeQuotes: true
+        }
+      })
+    ]
+  }
+};
+
+module.exports = VinlottisConfig;
--- a/config/webpack.config.common.js
+++ b/config/webpack.config.common.js
@@ -0,0 +1,75 @@
+"use strict";
+
+const VueLoaderPlugin = require("vue-loader/lib/plugin");
+const MiniCSSExtractPlugin = require("mini-css-extract-plugin");
+const HtmlPlugin = require("html-webpack-plugin");
+const helpers = require("./helpers");
+
+const webpackConfig = function(isDev) {
+  return {
+    resolve: {
+      extensions: [".js", ".vue"],
+      alias: {
+        vue$: isDev ? "vue/dist/vue.min.js" : "vue/dist/vue.min.js",
+        "@": helpers.root("src")
+      }
+    },
+    module: {
+      rules: [
+        {
+          test: /\.vue$/,
+          use: [
+            {
+              loader: "vue-loader",
+              options: {
+                loaders: {
+                  scss: "vue-style-loader!css-loader!sass-loader",
+                  sass: "vue-style-loader!css-loader!sass-loader?indentedSyntax"
+                }
+              }
+            }
+          ]
+        },
+        {
+          test: /\.js$/,
+          loader: "babel-loader",
+          include: [helpers.root("src")]
+        },
+        {
+          test: /\.css$/,
+          use: [
+            isDev ? "vue-style-loader" : MiniCSSExtractPlugin.loader,
+            { loader: "css-loader", options: { sourceMap: isDev } }
+          ]
+        },
+        {
+          test: /\.scss$/,
+          use: [
+            isDev ? "vue-style-loader" : MiniCSSExtractPlugin.loader,
+            { loader: "css-loader", options: { sourceMap: isDev } },
+            { loader: "sass-loader", options: { sourceMap: isDev } }
+          ]
+        },
+        {
+          test: /\.sass$/,
+          use: [
+            isDev ? "vue-style-loader" : MiniCSSExtractPlugin.loader,
+            { loader: "css-loader", options: { sourceMap: isDev } },
+            { loader: "sass-loader", options: { sourceMap: isDev } }
+          ]
+        },
+        {
+          test: /\.woff(2)?(\?[a-z0-9]+)?$/,
+          loader: "url-loader?limit=10000&mimetype=application/font-woff"
+        },
+        {
+          test: /\.(ttf|eot|svg)(\?[a-z0-9]+)?$/,
+          loader: "file-loader"
+        }
+      ]
+    },
+    plugins: [new VueLoaderPlugin()]
+  };
+};
+
+module.exports = webpackConfig;
--- a/config/webpack.config.dev.js
+++ b/config/webpack.config.dev.js
@@ -0,0 +1,54 @@
+"use strict";
+
+const webpack = require("webpack");
+const merge = require("webpack-merge");
+const FriendlyErrorsPlugin = require("friendly-errors-webpack-plugin");
+const HtmlPlugin = require("html-webpack-plugin");
+const helpers = require("./helpers");
+const commonConfig = require("./webpack.config.common");
+const environment = require("./env/dev.env");
+
+let webpackConfig = merge(commonConfig(true), {
+  mode: "development",
+  devtool: "cheap-module-eval-source-map",
+  output: {
+    path: helpers.root("dist"),
+    publicPath: "/",
+    filename: "js/[name].bundle.js",
+    chunkFilename: "js/[id].chunk.js"
+  },
+  optimization: {
+    runtimeChunk: "single",
+    splitChunks: {
+      chunks: "all"
+    }
+  },
+  plugins: [
+    new webpack.EnvironmentPlugin(environment),
+    new webpack.HotModuleReplacementPlugin(),
+    new FriendlyErrorsPlugin()
+  ],
+  devServer: {
+    compress: true,
+    historyApiFallback: true,
+    hot: true,
+    overlay: true,
+    stats: {
+      normal: true
+    }
+  }
+});
+
+webpackConfig = merge(webpackConfig, {
+  entry: {
+    main: ["@babel/polyfill", helpers.root("src", "vinlottis-init")]
+  },
+  plugins: [
+    new HtmlPlugin({
+      template: "src/templates/Index.html",
+      chunksSortMode: "dependency"
+    })
+  ]
+});
+
+module.exports = webpackConfig;
--- a/config/webpack.config.prod.js
+++ b/config/webpack.config.prod.js
@@ -0,0 +1,67 @@
+"use strict";
+
+const { CleanWebpackPlugin } = require("clean-webpack-plugin");
+const webpack = require("webpack");
+const merge = require("webpack-merge");
+const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
+const MiniCSSExtractPlugin = require("mini-css-extract-plugin");
+const UglifyJSPlugin = require("uglifyjs-webpack-plugin");
+const helpers = require("./helpers");
+const commonConfig = require("./webpack.config.common");
+const isProd = process.env.NODE_ENV === "production";
+const environment = isProd
+  ? require("./env/prod.env")
+  : require("./env/staging.env");
+
+const webpackConfig = merge(commonConfig(false), {
+  mode: "production",
+  output: {
+    path: helpers.root("public/dist"),
+    publicPath: "/dist/",
+    filename: "js/[name].bundle.[hash:7].js"
+    //filename: 'js/[name].bundle.js'
+  },
+  optimization: {
+    splitChunks: {
+      cacheGroups: {
+        styles: {
+          name: "styles",
+          test: /\.css$/,
+          chunks: "all",
+          enforce: true
+        }
+      }
+    },
+    minimizer: [
+      new OptimizeCSSAssetsPlugin({
+        cssProcessorPluginOptions: {
+          preset: ["default", { discardComments: { removeAll: true } }]
+        }
+      }),
+      new UglifyJSPlugin({
+        cache: true,
+        parallel: false,
+        sourceMap: !isProd
+      })
+    ]
+  },
+  plugins: [
+    new CleanWebpackPlugin(),
+    new webpack.EnvironmentPlugin(environment),
+    new MiniCSSExtractPlugin({
+      filename: "css/[name].[hash:7].css"
+    })
+  ]
+});
+
+if (!isProd) {
+  webpackConfig.devtool = "source-map";
+
+  if (process.env.npm_config_report) {
+    const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
+      .BundleAnalyzerPlugin;
+    webpackConfig.plugins.push(new BundleAnalyzerPlugin());
+  }
+}
+
+module.exports = webpackConfig;
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -5,18 +5,62 @@
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "node server.js"
+    "start": "node server.js",
+    "dev": "cross-env NODE_ENV=development webpack-dev-server --progress",
+    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
+    "@babel/polyfill": "~7.2",
    "body-parser": "^1.19.0",
+    "chart.js": "^2.9.3",
+    "clean-webpack-plugin": "^3.0.0",
    "connect-mongo": "^3.2.0",
+    "cors": "^2.8.5",
    "express": "^4.17.1",
    "express-session": "^1.17.0",
+    "extract-text-webpack-plugin": "^3.0.2",
+    "moment": "^2.24.0",
    "mongoose": "^5.8.7",
+    "node-fetch": "^2.6.0",
+    "node-sass": "^4.13.0",
    "passport": "^0.4.1",
    "passport-local": "^1.0.0",
-    "passport-local-mongoose": "^6.0.1"
+    "passport-local-mongoose": "^6.0.1",
+    "vue": "~2.6",
+    "vue-router": "~3.0",
+    "vuex": "^3.1.1"
+  },
+  "devDependencies": {
+    "@babel/core": "~7.2",
+    "@babel/plugin-proposal-class-properties": "~7.3",
+    "@babel/plugin-proposal-decorators": "~7.3",
+    "@babel/plugin-proposal-json-strings": "~7.2",
+    "@babel/plugin-syntax-dynamic-import": "~7.2",
+    "@babel/plugin-syntax-import-meta": "~7.2",
+    "@babel/preset-env": "~7.3",
+    "babel-loader": "~8.0",
+    "compression-webpack-plugin": "~2.0",
+    "cross-env": "^6.0.3",
+    "css-loader": "^3.2.0",
+    "file-loader": "^4.2.0",
+    "friendly-errors-webpack-plugin": "~1.7",
+    "google-maps-api-loader": "^1.1.1",
+    "html-webpack-plugin": "~3.2",
+    "mini-css-extract-plugin": "~0.5",
+    "optimize-css-assets-webpack-plugin": "~3.2",
+    "sass-loader": "~7.1",
+    "uglifyjs-webpack-plugin": "~1.2",
+    "url-loader": "^2.2.0",
+    "vue-loader": "~15.6",
+    "vue-style-loader": "~4.1",
+    "vue-template-compiler": "~2.6",
+    "webpack": "~4.29",
+    "webpack-bundle-analyzer": "^3.6.0",
+    "webpack-cli": "~3.2",
+    "webpack-dev-server": "~3.1",
+    "webpack-hot-middleware": "~2.24",
+    "webpack-merge": "~4.2"
  }
 }
--- a/public/index.html
+++ b/public/index.html
@@ -1,59 +1,13 @@
+<!DOCTYPE html>
 <html>
  <head>
    <title>Vinlottis</title>
-    <link
-      href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
-      rel="stylesheet"
-    />
-  </head>
+  <link href=/dist/css/vinlottis.f85cf34.css rel=stylesheet></head>
  <body>
-    <h1>Official vin lottis homepage</h1>
-    <code id="purchase"></code>
-    <code id="wines"></code>
-    <code id="colors"></code>
-    <code id="highscores"></code>
+    <div id=app></div>

-    <script>
-      (async function() {
-        var _purchase = await fetch("/api/purchase/statistics");
-        var purchase = await _purchase.json();
    
-        var _wines = await fetch("/api/wines/statistics");
-        var wines = await _wines.json();
+    <script src=/dist/js/vinlottis.bundle.f85cf34.js></script>
    
-        var _colors = await fetch("/api/purchase/statistics/color");
-        var color = await _colors.json();
-
-        var _highscores = await fetch("/api/highscore/statistics");
-        var highscore = await _highscores.json();
-
-        document.getElementById("purchase").innerHTML = JSON.stringify(
-          purchase,
-          null,
-          2
-        );
-        document.getElementById("wines").innerHTML = JSON.stringify(
-          wines,
-          null,
-          2
-        );
-        document.getElementById("colors").innerHTML = JSON.stringify(
-          color,
-          null,
-          2
-        );
-        document.getElementById("highscores").innerHTML = JSON.stringify(
-          highscore,
-          null,
-          2
-        );
-      })();
-    </script>
-  </body>
-
-  <style>
-    body {
-      font-family: "Roboto", sans-serif;
-    }
-  </style>
+  <script type=text/javascript src=/dist/js/vinlottis.bundle.f85cf34.js></script></body>
 </html>
--- a/server.js
+++ b/server.js
@@ -11,6 +11,9 @@ const bodyParser = require("body-parser");

 const mongoose = require("mongoose");
 const MongoStore = require("connect-mongo")(session);
+const cors = require("cors");
+
+app.use(cors());
 mongoose.promise = global.Promise;
 mongoose.connect("mongodb://localhost/vinlottis");
 mongoose.set("debug", true);
@@ -21,6 +24,7 @@ app.use(
  })
 );
 app.use(bodyParser.json());
+
 app.use(
  session({
    secret: "passport-tutorial",
@@ -45,6 +49,7 @@ passport.use(new LocalStrategy(User.authenticate()));
 passport.serializeUser(User.serializeUser());
 passport.deserializeUser(User.deserializeUser());

+app.use("/dist", express.static(path.join(__dirname, "public/dist")));
 app.use("/", loginApi);
 app.use("/api/", updateApi);
 app.use("/api/", retrieveApi);
--- a/src/Vinlottis.vue
+++ b/src/Vinlottis.vue
@@ -0,0 +1,24 @@
+<template>
+  <div class="container">
+    <router-view />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "vinlottis",
+  components: {},
+  props: {},
+  data() {
+    return {};
+  },
+  mounted() {
+    console.log("moutned");
+  },
+  computed: {},
+
+  methods: {}
+};
+</script>
+
+<style lang="scss" scoped></style>
--- a/src/components/CreatePage.vue
+++ b/src/components/CreatePage.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="outer">
+    <div>
+      <h2>Vinlottis</h2>
+      <form method="post" action="/register">
+        <input type="text" name="username" placeholder="Brukernavn" />
+        <input type="password" name="password" placeholder="Passord" />
+        <input type="submit" value="registrer bruker" />
+      </form>
+    </div>
+  </div>
+</template>
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+div {
+  font-family: sans-serif;
+}
+.outer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  width: 100vw;
+}
+h2 {
+  width: 100vw;
+  text-align: center;
+  font-size: 3rem;
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100vw;
+}
+
+input {
+  margin: 20px;
+  width: 30vw;
+  font-size: 3rem;
+  border: none;
+  border-bottom: 1px solid black;
+}
+
+input[type="submit"] {
+  border: 1px solid black;
+}
+</style>
--- a/src/components/LoginPage.vue
+++ b/src/components/LoginPage.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="outer">
+    <div>
+      <h2>Vinlottis</h2>
+      <form method="post" action="/login">
+        <input type="text" name="username" placeholder="Brukernavn" />
+        <input type="password" name="password" placeholder="Passord" />
+        <input type="submit" value="login" />
+      </form>
+    </div>
+  </div>
+</template>
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+div {
+  font-family: sans-serif;
+}
+.outer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  width: 100vw;
+}
+h2 {
+  width: 100vw;
+  text-align: center;
+  font-size: 3rem;
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100vw;
+}
+
+input {
+  margin: 20px;
+  width: 30vw;
+  font-size: 3rem;
+  border: none;
+  border-bottom: 1px solid black;
+}
+
+input[type="submit"] {
+  border: 1px solid black;
+}
+</style>
--- a/src/components/RegisterPage.vue
+++ b/src/components/RegisterPage.vue
@@ -0,0 +1,198 @@
+<template>
+  <div>
+    <h1>Registrering</h1>
+    <div class="color-container">
+      <div class="label-div">
+        <label for="blue">Blå</label>
+        <input id="blue" type="number" :value="blue" />
+      </div>
+      <div class="label-div">
+        <label for="red">Rød</label>
+        <input id="red" type="number" :value.sync="red" />
+      </div>
+      <div class="label-div">
+        <label for="green">Grønn</label>
+        <input id="green" type="number" :value="green" />
+      </div>
+      <div class="label-div">
+        <label for="yellow">Gul</label>
+        <input id="yellow" type="number" :value="yellow" />
+      </div>
+    </div>
+    <div class="button-container">
+      <button @click="addWinner">Legg til en vinner</button>
+      <button @click="sendInfo">Send inn</button>
+    </div>
+    <div class="winner-container" v-if="winners.length > 0">
+      Vinnere
+      <div v-for="winner in winners" class="winner-element">
+        <hr />
+        <div class="label-div">
+          <input type="text" v-model="winner.name" placeholder="Navn" />
+        </div>
+        <div class="label-div">
+          <select v-model="winner.color">
+            <option value="blue">Blå</option>
+            <option value="red">Rød</option>
+            <option value="green">Grønn</option>
+            <option value="yellow">Gul</option>
+          </select>
+        </div>
+        <div class="label-div">
+          <input type="text" :value="winner.wine.name" placeholder="Vin-navn" />
+        </div>
+        <div class="label-div">
+          <input
+            type="text"
+            :value="winner.wine.vivinoLink"
+            placeholder="Vivino-link"
+          />
+        </div>
+        <div class="label-div">
+          <input type="text" :value="winner.wine.rating" placeholder="Rating" />
+        </div>
+        <hr />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      red: 0,
+      blue: 0,
+      green: 0,
+      yellow: 0,
+      winners: []
+    };
+  },
+  methods: {
+    addWinner: function(event) {
+      console.log("clicked");
+
+      this.winners.push({
+        name: "",
+        color: "",
+        wine: {
+          name: "",
+          vivinoLink: "",
+          rating: ""
+        }
+      });
+    },
+    sendInfo: async function(event) {
+      let sendObject = {
+        purchase: {
+          date: new Date(),
+          blue: this.blue,
+          red: this.red,
+          yellow: this.yellow,
+          green: this.green
+        },
+        winners: this.winners
+      };
+
+      if (sendObject.purchase.red == undefined) {
+        alert("Rød må defineres");
+        return;
+      }
+      if (sendObject.purchase.green == undefined) {
+        alert("Grønn må defineres");
+        return;
+      }
+      if (sendObject.purchase.yellow == undefined) {
+        alert("Gul må defineres");
+        return;
+      }
+      if (sendObject.purchase.blue == undefined) {
+        alert("Blå må defineres");
+        return;
+      }
+
+      if (sendObject.winners.length == 0) {
+        alert("Det må være med vinnere");
+        return;
+      }
+      for (let i = 0; i < sendObject.winners.length; i++) {
+        let currentWinner = sendObject.winners[i];
+
+        if (currentWinner.name == undefined || currentWinner.name == "") {
+          alert("Navn må defineres");
+          return;
+        }
+        if (currentWinner.color == undefined || currentWinner.color == "") {
+          alert("Farge må defineres");
+          return;
+        }
+      }
+
+      let _response = await fetch("http://localhost:30030/api/log/", {
+        headers: {
+          "Content-Type": "application/json"
+          // 'Content-Type': 'application/x-www-form-urlencoded',
+        },
+        method: "POST",
+        body: JSON.stringify(sendObject)
+      });
+      let response = await _response.json();
+      console.log(response);
+      if (response == true) {
+        alert("Sendt!");
+        window.location.reload();
+      } else {
+        alert("Noe gikk galt under innsending");
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+h1 {
+  width: 100vw;
+  text-align: center;
+}
+div {
+  font-size: 2rem;
+}
+input {
+  font-size: 1.5rem;
+  width: 100%;
+}
+.label-div {
+  display: flex;
+  flex-direction: column;
+  width: 50%;
+  padding-bottom: 20px;
+}
+hr {
+  width: 50vw;
+}
+
+.winner-container {
+  width: 50vw;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin: auto;
+}
+
+.winner-element,
+.color-container,
+.button-container {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+}
+
+button {
+  font-size: 1.5rem;
+  width: 40%;
+  margin: 10px;
+}
+</style>
--- a/src/components/VinlottisPage.vue
+++ b/src/components/VinlottisPage.vue
@@ -0,0 +1,55 @@
+<template>
+  <div class="outer">
+    <div class="container">
+      <h2>Knowit Vinlottis</h2>
+      <div class="chart-container">
+        <PurchaseGraph class="purchase" />
+        <WinGraph class="win" />
+      </div>
+      <TotalBought />
+      <Highscore />
+    </div>
+  </div>
+</template>
+
+<script>
+import PurchaseGraph from "@/ui/PurchaseGraph";
+import TotalBought from "@/ui/TotalBought";
+import Highscore from "@/ui/Highscore";
+import WinGraph from "@/ui/WinGraph";
+
+export default {
+  components: {
+    PurchaseGraph,
+    TotalBought,
+    Highscore,
+    WinGraph
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.outer {
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+h2 {
+  width: 100vw;
+  text-align: center;
+  font-family: sans-serif;
+}
+
+.purchase {
+  width: 50vw;
+  display: inline-block;
+}
+
+.win {
+  width: 45vw;
+  display: inline-block;
+}
+</style>
--- a/src/routes/vinlottisRouter.js
+++ b/src/routes/vinlottisRouter.js
@@ -0,0 +1,22 @@
+import VinlottisPage from "@/components/VinlottisPage";
+
+const routes = [
+  {
+    path: "*",
+    component: VinlottisPage
+  },
+  {
+    path: "/login",
+    component: resolve => require(["@/components/LoginPage"], resolve)
+  },
+  {
+    path: "/update",
+    component: resolve => require(["@/components/RegisterPage"], resolve)
+  },
+  {
+    path: "/create",
+    component: resolve => require(["@/components/CreatePage"], resolve)
+  }
+];
+
+export { routes };
--- a/src/templates/Create.html
+++ b/src/templates/Create.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Vinlottis</title>
+  </head>
+  <body>
+    <div id="app"></div>
+
+    <% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
+    <script src="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>"></script>
+    <% } %>
+  </body>
+</html>
--- a/src/templates/Index.html
+++ b/src/templates/Index.html
@@ -0,0 +1 @@
+<div id="app"></div>
--- a/src/ui/Highscore.vue
+++ b/src/ui/Highscore.vue
@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <h3>Highscore</h3>
+    <ol>
+      <li v-for="person in highscore">
+        {{ person.name }} - {{ person.wins.length }}
+      </li>
+    </ol>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return { highscore: [] };
+  },
+  async mounted() {
+    let _response = await fetch(
+      "http://localhost:30030/api/highscore/statistics"
+    );
+    let response = await _response.json();
+    this.highscore = response;
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+div {
+  font-family: sans-serif;
+  width: 70vw;
+  margin: auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+</style>
--- a/src/ui/PurchaseGraph.vue
+++ b/src/ui/PurchaseGraph.vue
@@ -0,0 +1,104 @@
+<template>
+  <div>
+    <canvas ref="purchase-chart" width="100" height="50"></canvas>
+  </div>
+</template>
+
+<script>
+import Chartjs from "chart.js";
+
+export default {
+  async mounted() {
+    let canvas = this.$refs["purchase-chart"].getContext("2d");
+
+    console.log(canvas);
+    let _response = await fetch(
+      "http://localhost:30030/api/purchase/statistics"
+    );
+    let response = await _response.json();
+    let labels = [];
+    let blue = {
+      label: "Blå",
+      borderColor: "#4bcffa",
+      backgroundColor: "#4bcffa42",
+      data: []
+    };
+    let yellow = {
+      label: "Gul",
+      borderColor: "#ffdd59",
+      backgroundColor: "#ffdd5942",
+      data: []
+    };
+    let red = {
+      label: "Rød",
+      borderColor: "#ef5777",
+      backgroundColor: "#ef577742",
+      data: []
+    };
+    let green = {
+      label: "Grønn",
+      borderColor: "#0be881",
+      backgroundColor: "#0be88142",
+      data: []
+    };
+
+    let highestNumber = 0;
+
+    for (let i = 0; i < response.length; i++) {
+      let thisDate = response[i];
+      let dateObject = new Date(thisDate.date);
+      labels.push(this.getPrettierDateString(dateObject));
+
+      blue.data.push(thisDate.blue);
+      yellow.data.push(thisDate.yellow);
+      red.data.push(thisDate.red);
+      green.data.push(thisDate.green);
+
+      if (thisDate.blue > highestNumber) {
+        highestNumber = thisDate.blue;
+      }
+      if (thisDate.yellow > highestNumber) {
+        highestNumber = thisDate.yellow;
+      }
+      if (thisDate.green > highestNumber) {
+        highestNumber = thisDate.green;
+      }
+      if (thisDate.red > highestNumber) {
+        highestNumber = thisDate.red;
+      }
+    }
+    let datasets = [blue, yellow, green, red];
+    let chartdata = {
+      labels: labels,
+      datasets: datasets
+    };
+    let chart = new Chart(canvas, {
+      type: "line",
+      data: chartdata,
+      options: {
+        title: {
+          display: true,
+          text: "Antall kjøp"
+        },
+        scales: {
+          yAxes: [
+            {
+              ticks: {
+                beginAtZero: true,
+                suggestedMax: highestNumber + 5
+              }
+            }
+          ]
+        }
+      }
+    });
+  },
+  methods: {
+    getPrettierDateString(date) {
+      return `${date.getDate()}.${date.getMonth() + 1}.${date.getFullYear()}`;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>
--- a/src/ui/TotalBought.vue
+++ b/src/ui/TotalBought.vue
@@ -0,0 +1,108 @@
+<template>
+  <div class="bought-container">
+    <div class="red-container">
+      <div>
+        <span class="red">{{ red.total }}</span> kjøpt
+      </div>
+      <div>{{ red.win }} vinn</div>
+      <div>{{ redPercentage }}% vinn</div>
+    </div>
+    <div class="blue-container">
+      <div>
+        <span class="blue">{{ blue.total }}</span> kjøpt
+      </div>
+      <div>{{ blue.win }} vinn</div>
+      <div>{{ bluePercentage }}% vinn</div>
+    </div>
+    <div class="yellow-container">
+      <div>
+        <span class="yellow">{{ yellow.total }}</span> kjøpt
+      </div>
+      <div>{{ yellow.win }} vinn</div>
+      <div>{{ yellowPercentage }}% vinn</div>
+    </div>
+    <div class="green-container">
+      <div>
+        <span class="green">{{ green.total }}</span> kjøpt
+      </div>
+      <div>{{ green.win }} vinn</div>
+      <div>{{ greenPercentage }}% vinn</div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      red: 0,
+      blue: 0,
+      yellow: 0,
+      green: 0,
+      total: 0,
+      totalWin: 0,
+      wins: 0,
+      redPercentage: 0,
+      yellowPercentage: 0,
+      greenPercentage: 0,
+      bluePercentage: 0
+    };
+  },
+  async mounted() {
+    let _response = await fetch(
+      "http://localhost:30030/api/purchase/statistics/color"
+    );
+    let response = await _response.json();
+    this.red = response.red;
+    this.blue = response.blue;
+    this.green = response.green;
+    this.yellow = response.yellow;
+    this.total = response.total;
+    this.totalWin =
+      this.red.win + this.yellow.win + this.blue.win + this.green.win;
+
+    this.redPercentage =
+      this.red.win == 0 ? 0 : (this.totalWin / this.red.win) * 100;
+    this.greenPercentage =
+      this.green.win == 0 ? 0 : (this.totalWin / this.green.win) * 100;
+    this.bluePercentage =
+      this.blue.win == 0 ? 0 : (this.totalWin / this.blue.win) * 100;
+    this.yellowPercentage =
+      this.yellow.win == 0 ? 0 : (this.totalWin / this.yellow.win) * 100;
+    console.log(response);
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.bought-container {
+  display: flex;
+  flex-direction: row;
+  width: 100vw;
+  justify-content: space-around;
+  font-family: sans-serif;
+}
+
+.green,
+.blue,
+.yellow,
+.red {
+  font-size: 2rem;
+  font-weight: bold;
+}
+
+.green {
+  color: #0be881;
+}
+
+.red {
+  color: #ef5777;
+}
+
+.yellow {
+  color: #ffdd59;
+}
+
+.blue {
+  color: #4bcffa;
+}
+</style>
--- a/src/ui/WinGraph.vue
+++ b/src/ui/WinGraph.vue
@@ -0,0 +1,88 @@
+<template>
+  <div>
+    <canvas ref="win-chart" width="100" height="50"></canvas>
+  </div>
+</template>
+
+<script>
+export default {
+  async mounted() {
+    let canvas = this.$refs["win-chart"].getContext("2d");
+
+    console.log(canvas);
+    let _response = await fetch(
+      "http://localhost:30030/api/purchase/statistics/color"
+    );
+    let response = await _response.json();
+    let labels = ["Vunnet"];
+    let blue = {
+      label: "Blå",
+      borderColor: "#4bcffa",
+      backgroundColor: "#4bcffa42",
+      data: []
+    };
+    let yellow = {
+      label: "Gul",
+      borderColor: "#ffdd59",
+      backgroundColor: "#ffdd5942",
+      data: []
+    };
+    let red = {
+      label: "Rød",
+      borderColor: "#ef5777",
+      backgroundColor: "#ef577742",
+      data: []
+    };
+    let green = {
+      label: "Grønn",
+      borderColor: "#0be881",
+      backgroundColor: "#0be88142",
+      data: []
+    };
+
+    blue.data.push(response.blue.win);
+    yellow.data.push(response.yellow.win);
+    red.data.push(response.red.win);
+    green.data.push(response.green.win);
+    let highestNumber = 0;
+    if (response.blue.win > highestNumber) {
+      highestNumber = response.blue.win;
+    }
+    if (response.red.win > highestNumber) {
+      highestNumber = response.red.win;
+    }
+    if (response.green.win > highestNumber) {
+      highestNumber = response.green.win;
+    }
+    if (response.yellow.win > highestNumber) {
+      highestNumber = response.yellow.win;
+    }
+
+    let datasets = [blue, yellow, green, red];
+    let chartdata = {
+      labels: labels,
+      datasets: datasets
+    };
+    let chart = new Chart(canvas, {
+      type: "bar",
+      data: chartdata,
+      options: {
+        title: {
+          display: true,
+          text: "Antall vinn"
+        },
+        scales: {
+          yAxes: [
+            {
+              ticks: {
+                beginAtZero: true,
+                suggestedMax: highestNumber + 5
+              }
+            }
+          ]
+        }
+      }
+    });
+  }
+};
+</script>
--- a/src/vinlottis-init.js
+++ b/src/vinlottis-init.js
@@ -0,0 +1,18 @@
+import Vue from "vue";
+import VueRouter from "vue-router";
+import { routes } from "@/routes/vinlottisRouter";
+import Vinlottis from "@/Vinlottis";
+
+Vue.use(VueRouter);
+
+const router = new VueRouter({
+  routes: routes
+});
+
+new Vue({
+  el: "#app",
+  router,
+  components: { Vinlottis },
+  template: "<Vinlottis/>",
+  render: h => h(Vinlottis)
+});
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -0,0 +1,14 @@
+"use strict";
+
+const environment = (process.env.NODE_ENV || "development").trim();
+const merge = require("webpack-merge");
+
+if (environment === "development") {
+  module.exports = require("./config/webpack.config.dev");
+} else {
+  let prodConfig = require("./config/webpack.config.prod");
+
+  prodConfig = merge(prodConfig, require("./config/vinlottis.config.js"));
+
+  module.exports = prodConfig;
+}