This commit is contained in:
2021-05-20 10:01:58 +02:00
parent d21a33ab42
commit 783373da22
7 changed files with 172 additions and 132 deletions

View File

@@ -11,15 +11,15 @@ const webpackConfig = function(isDev) {
resolve: {
extensions: [".js", ".vue"],
alias: {
vue$: "vue/dist/vue.min.js",
"@": helpers.root("frontend")
}
"vue$": "vue/dist/vue.min.js",
"@": helpers.root("frontend"),
},
},
entry: {
vinlottis: helpers.root("frontend", "vinlottis-init")
vinlottis: helpers.root("frontend", "vinlottis-init"),
},
externals: {
moment: 'moment' // comes with chart.js
moment: "moment", // comes with chart.js
},
module: {
rules: [
@@ -31,45 +31,45 @@ const webpackConfig = function(isDev) {
options: {
loaders: {
scss: "vue-style-loader!css-loader!sass-loader",
sass: "vue-style-loader!css-loader!sass-loader?indentedSyntax"
}
}
}
]
sass: "vue-style-loader!css-loader!sass-loader?indentedSyntax",
},
},
},
],
},
{
test: /\.js$/,
use: [ "babel-loader" ],
include: [helpers.root("frontend")]
use: ["babel-loader"],
include: [helpers.root("frontend")],
},
{
test: /\.css$/,
use: [
MiniCSSExtractPlugin.loader,
{ loader: "css-loader", options: { sourceMap: isDev } }
]
{ loader: "css-loader", options: { sourceMap: isDev } },
],
},
{
test: /\.scss$/,
use: [
MiniCSSExtractPlugin.loader,
{ loader: "css-loader", options: { sourceMap: isDev } },
{ loader: "sass-loader", options: { sourceMap: isDev } }
]
{ loader: "sass-loader", options: { sourceMap: isDev } },
],
},
{
test: /\.woff(2)?(\?[a-z0-9]+)?$/,
loader: "url-loader",
options: {
limit: 10000,
mimetype: "application/font-woff"
}
mimetype: "application/font-woff",
},
},
{
test: /\.(ttf|eot|svg)(\?[a-z0-9]+)?$/,
loader: "file-loader"
}
]
loader: "file-loader",
},
],
},
plugins: [
new VueLoaderPlugin(),

View File

@@ -15,20 +15,20 @@ let webpackConfig = merge(commonConfig(true), {
output: {
path: helpers.root("dist"),
publicPath: "/",
filename: "js/[name].bundle.js"
filename: "js/[name].bundle.js",
},
optimization: {
concatenateModules: true,
splitChunks: {
chunks: "initial"
}
chunks: "initial",
},
},
plugins: [
new webpack.EnvironmentPlugin(environment),
new FriendlyErrorsPlugin(),
new MiniCSSExtractPlugin({
filename: "css/[name].css"
})
filename: "css/[name].css",
}),
],
devServer: {
compress: true,
@@ -37,29 +37,29 @@ let webpackConfig = merge(commonConfig(true), {
hot: true,
overlay: true,
stats: {
normal: true
normal: true,
},
proxy: {
"/api": {
target: "http://localhost:30030",
changeOrigin: true
changeOrigin: true,
},
"/socket.io": {
target: "ws://localhost:30030",
changeOrigin: false,
ws: true
}
ws: true,
},
},
writeToDisk: false
}
writeToDisk: false,
},
});
webpackConfig = merge(webpackConfig, {
plugins: [
new HtmlWebpackPlugin({
template: "frontend/templates/Index.html"
})
]
template: "frontend/templates/Index.html",
}),
],
});
module.exports = webpackConfig;

View File

@@ -1,6 +1,6 @@
<template>
<div class="app-container">
<banner :routes="routes"/>
<banner :routes="routes" />
<router-view />
<Footer />
<UpdateToast
@@ -30,33 +30,33 @@ export default {
routes: [
{
name: "Virtuelt lotteri",
route: "/lottery"
route: "/lottery",
},
{
name: "Dagens viner",
route: "/dagens/"
route: "/dagens/",
},
{
name: "Highscore",
route: "/highscore"
route: "/highscore",
},
{
name: "Historie",
route: "/history/"
route: "/history/",
},
{
name: "Foreslå vin",
route: "/request"
route: "/request",
},
{
name: "Foreslåtte viner",
route: "/requested-wines"
route: "/requested-wines",
},
{
name: "Login",
route: "/login"
}
]
route: "/login",
},
],
};
},
mounted() {
@@ -78,7 +78,7 @@ export default {
closeToast: function() {
this.showToast = false;
},
}
},
};
</script>
@@ -99,7 +99,7 @@ body {
display: grid;
grid-template-rows: 80px auto 100px;
.main-container{
.main-container {
height: 100%;
width: 100%;
}

View File

@@ -1,142 +1,172 @@
const VinlottisPage = () => import(
/* webpackChunkName: "landing-page" */
"@/components/VinlottisPage");
const VirtualLotteryPage = () => import(
/* webpackChunkName: "landing-page" */
"@/components/VirtualLotteryPage");
const GeneratePage = () => import(
/* webpackChunkName: "landing-page" */
"@/components/GeneratePage");
const VinlottisPage = () =>
import(
/* webpackChunkName: "landing-page" */
"@/components/VinlottisPage"
);
const VirtualLotteryPage = () =>
import(
/* webpackChunkName: "landing-page" */
"@/components/VirtualLotteryPage"
);
const GeneratePage = () =>
import(
/* webpackChunkName: "landing-page" */
"@/components/GeneratePage"
);
const TodaysPage = () => import(
/* webpackChunkName: "sub-pages" */
"@/components/TodaysPage");
const AllWinesPage = () => import(
/* webpackChunkName: "sub-pages" */
"@/components/AllWinesPage");
const HistoryPage = () => import(
/* webpackChunkName: "sub-pages" */
"@/components/HistoryPage");
const WinnerPage = () => import(
/* webpackChunkName: "sub-pages" */
"@/components/WinnerPage");
const SalgsbetingelserPage = () => import(
/* webpackChunkName: "sub-pages" */
"@/components/SalgsbetingelserPage");
const TodaysPage = () =>
import(
/* webpackChunkName: "sub-pages" */
"@/components/TodaysPage"
);
const AllWinesPage = () =>
import(
/* webpackChunkName: "sub-pages" */
"@/components/AllWinesPage"
);
const HistoryPage = () =>
import(
/* webpackChunkName: "sub-pages" */
"@/components/HistoryPage"
);
const WinnerPage = () =>
import(
/* webpackChunkName: "sub-pages" */
"@/components/WinnerPage"
);
const SalgsbetingelserPage = () =>
import(
/* webpackChunkName: "sub-pages" */
"@/components/SalgsbetingelserPage"
);
const LoginPage = () => import(
/* webpackChunkName: "user" */
"@/components/LoginPage");
const CreatePage = () => import(
/* webpackChunkName: "user" */
"@/components/CreatePage");
const AdminPage = () => import(
/* webpackChunkName: "admin" */
"@/components/AdminPage");
const LoginPage = () =>
import(
/* webpackChunkName: "user" */
"@/components/LoginPage"
);
const CreatePage = () =>
import(
/* webpackChunkName: "user" */
"@/components/CreatePage"
);
const AdminPage = () =>
import(
/* webpackChunkName: "admin" */
"@/components/AdminPage"
);
const PersonalHighscorePage = () => import(
/* webpackChunkName: "highscore" */
"@/components/PersonalHighscorePage");
const HighscorePage = () => import(
/* webpackChunkName: "highscore" */
"@/components/HighscorePage");
const PersonalHighscorePage = () =>
import(
/* webpackChunkName: "highscore" */
"@/components/PersonalHighscorePage"
);
const HighscorePage = () =>
import(
/* webpackChunkName: "highscore" */
"@/components/HighscorePage"
);
const RequestWine = () => import(
/* webpackChunkName: "request" */
"@/components/RequestWine");
const AllRequestedWines = () => import(
/* webpackChunkName: "request" */
"@/components/AllRequestedWines");
const RequestWine = () =>
import(
/* webpackChunkName: "request" */
"@/components/RequestWine"
);
const AllRequestedWines = () =>
import(
/* webpackChunkName: "request" */
"@/components/AllRequestedWines"
);
const routes = [
{
path: "*",
name: "Hjem",
component: VinlottisPage
component: VinlottisPage,
},
{
path: "/lottery",
name: "Lotteri",
component: VirtualLotteryPage
component: VirtualLotteryPage,
},
{
path: "/dagens",
name: "Dagens vin",
component: TodaysPage
component: TodaysPage,
},
{
path: "/viner",
name: "All viner",
component: AllWinesPage
component: AllWinesPage,
},
{
path: "/login",
name: "Login",
component: LoginPage
component: LoginPage,
},
{
path: "/create",
name: "Registrer",
component: CreatePage
component: CreatePage,
},
{
path: "/admin",
name: "Admin side",
component: AdminPage
component: AdminPage,
},
{
path: "/generate/",
component: GeneratePage
component: GeneratePage,
},
{
path: "/winner/:id",
component: WinnerPage
component: WinnerPage,
},
{
{
path: "/history/:date",
name: "Historie for dato",
component: HistoryPage
component: HistoryPage,
},
{
path: "/history",
name: "Historie",
component: HistoryPage
component: HistoryPage,
},
{
path: "/highscore/:name",
name: "Personlig topplisten",
component: PersonalHighscorePage
component: PersonalHighscorePage,
},
{
path: "/highscore",
name: "Topplisten",
component: HighscorePage
component: HighscorePage,
},
{
path: "/anbefal",
name: "Anbefal ny vin",
component: RequestWine
component: RequestWine,
},
{
path: "/request",
name: "Etterspør vin",
component: RequestWine
component: RequestWine,
},
{
path: "/anbefalte",
name: "Anbefalte viner",
component: AllRequestedWines
component: AllRequestedWines,
},
{
path: "/requested-wines",
name: "Etterspurte vin",
component: AllRequestedWines
component: AllRequestedWines,
},
{
path: "/salgsbetingelser",
name: "Salgsbetingelser",
component: SalgsbetingelserPage
}
component: SalgsbetingelserPage,
},
];
export { routes };

View File

@@ -5,15 +5,27 @@
<img src="/public/assets/images/knowit.svg" alt="knowit logo" />
</router-link>
<a class="menu-toggle-container" aria-label="show-menu" @click="toggleMenu" :class="isOpen ? 'open' : 'collapsed'">
<a
class="menu-toggle-container"
aria-label="show-menu"
@click="toggleMenu"
:class="isOpen ? 'open' : 'collapsed'"
>
<span class="menu-toggle"></span>
<span class="menu-toggle"></span>
<span class="menu-toggle"></span>
</a>
<nav class="menu" :class="isOpen ? 'open' : 'collapsed'">
<router-link v-for="(route, index) in routes" :key="index" :to="route.route" class="menu-item-link">
<a @click="toggleMenu" class="single-route" :class="isOpen ? 'open' : 'collapsed'">{{ route.name }}</a>
<router-link
v-for="(route, index) in routes"
:key="index"
:to="route.route"
class="menu-item-link"
>
<a @click="toggleMenu" class="single-route" :class="isOpen ? 'open' : 'collapsed'">{{
route.name
}}</a>
<i class="icon icon--arrow-right"></i>
</router-link>
</nav>
@@ -42,14 +54,14 @@ export default {
minutes: 0,
seconds: 0,
distance: 0,
interval: null
interval: null,
};
},
props: {
routes: {
required: true,
type: Array
}
type: Array,
},
},
mounted() {
this.initialize(), this.countdown();
@@ -66,7 +78,7 @@ export default {
return true;
}
return false;
}
},
},
methods: {
toggleMenu() {
@@ -118,8 +130,8 @@ export default {
this.initialize();
}
this.interval = setTimeout(this.countdown, 500);
}
}
},
},
};
</script>

View File

@@ -4,7 +4,7 @@
<li>
<a href="https://github.com/KevinMidboe/vinlottis" class="github">
<span>Utforsk koden github</span>
<img src="/public/assets/images/logo-github.png" alt="github logo">
<img src="/public/assets/images/logo-github.png" alt="github logo" />
</a>
</li>
@@ -16,15 +16,15 @@
</ul>
<router-link to="/" class="company-logo">
<img src="/public/assets/images/knowit.svg" alt="knowit logo">
<img src="/public/assets/images/knowit.svg" alt="knowit logo" />
</router-link>
</footer>
</template>
<script>
export default {
name: 'WineFooter'
}
name: "WineFooter",
};
</script>
<style lang="scss" scoped>
@@ -57,7 +57,6 @@ footer {
display: flex;
align-items: center;
img {
margin-left: 0.5rem;
height: 30px;
@@ -74,7 +73,7 @@ footer {
}
}
.company-logo{
.company-logo {
margin-right: 5em;
img {
@@ -93,5 +92,4 @@ footer {
}
}
}
</style>
</style>

View File

@@ -21,7 +21,7 @@ if (ENV !== "development") {
beforeSend: event => {
console.error(event);
return event;
}
},
});
}
@@ -38,7 +38,7 @@ ga.l = 1 * new Date();
ga("create", __GA_TRACKINGID__, {
allowAnchor: false,
cookieExpires: __GA_COOKIELIFETIME__, // Time in seconds
cookieFlags: "SameSite=Strict; Secure"
cookieFlags: "SameSite=Strict; Secure",
});
ga("set", "anonymizeIp", true); // Enable IP Anonymization/IP masking
ga("send", "pageview");
@@ -47,7 +47,7 @@ if (ENV == "development") window[`ga-disable-${__GA_TRACKINGID__}`] = true;
const router = new VueRouter({
routes: routes,
mode: 'history'
mode: "history",
});
new Vue({