KevinMidboe/vinlottis
1
0
Fork 0
Code Issues 8 Pull Requests 14 Packages Projects Releases Wiki Activity

Linting

Browse Source
This commit is contained in:
Kevin
2021-05-20 10:01:58 +02:00
parent d21a33ab42
commit 783373da22
7 changed files with 172 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
config/webpack.config.common.js
View File

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

28
config/webpack.config.dev.js
View File

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

24
frontend/Vinlottis.vue
View File

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

160
frontend/router.js
View File

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

30
frontend/ui/Banner.vue
View File

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

14
frontend/ui/Footer.vue
View File

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

6
frontend/vinlottis-init.js
View File

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