Added base project.

Chriztiaan · Dec 22, 2020 · 23b4bba · 23b4bba
1 parent 80f7efb
commit 23b4bba
Show file tree

Hide file tree

Showing 15 changed files with 2,279 additions and 543 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,23 @@
+module.exports = {
+	root: true,
+	env: {
+		node: true
+	},
+	extends: [
+		'eslint:recommended',
+		'plugin:@typescript-eslint/eslint-recommended',
+		'plugin:@typescript-eslint/recommended',
+		'plugin:vue/recommended',
+		'@vue/prettier',
+		'@vue/typescript'
+	],
+	rules: {
+		'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+		'@typescript-eslint/no-use-before-define': ['error', { functions: false }],
+		'@typescript-eslint/no-explicit-any': 'off',
+		'vue/no-unused-components': 'off'
+	},
+	parserOptions: {
+		parser: '@typescript-eslint/parser'
+	}
+};
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,7 @@
+{
+	"singleQuote": true,
+	"tabWidth": 4,
+	"printWidth": 175,
+	"useTabs": true,
+	"endOfLine": "lf",
+}
diff --git a/babel.config.js b/babel.config.js
@@ -1,5 +1,3 @@
 module.exports = {
-  presets: [
-    '@vue/cli-plugin-babel/preset'
-  ]
-}
+	presets: ['@vue/app']
+};
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,16 +8,32 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "core-js": "^3.6.5",
-    "vue": "^2.6.11"
+    "@mdi/font": "^3.9.97",
+    "axios": "^0.21.0",
+    "core-js": "^2.6.5",
+    "eslint-plugin-prettier": "^3.1.0",
+    "simplewebrtc": "^3.0.2",
+    "vue": "^2.6.11",
+    "vuetify": "^2.2.11"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@typescript-eslint/eslint-plugin": "^2.0.0",
+    "@typescript-eslint/parser": "^2.0.0",
+    "@vue/cli-plugin-babel": "^3.10.0",
+    "@vue/cli-plugin-eslint": "^3.10.0",
+    "@vue/cli-plugin-typescript": "^3.10.0",
+    "@vue/eslint-config-prettier": "^5.0.0",
+    "@vue/eslint-config-typescript": "^4.0.0",
     "@vue/cli-service": "~4.5.0",
+    "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
+    "sass": "^1.19.0",
+    "sass-loader": "^8.0.0",
+    "ts-loader": "^6.0.2",
+    "typescript": "^3.4.5",
+    "vue-cli-plugin-vuetify": "~2.0.8",
     "vue-template-compiler": "^2.6.11"
   },
   "eslintConfig": {

diff --git a/public/index.html b/public/index.html
@@ -6,6 +6,8 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
   </head>
   <body>
     <noscript>

diff --git a/src/App.vue b/src/App.vue
@@ -1,28 +1,51 @@
 <template>
-  <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
-  </div>
+	<!-- <v-app class="red">
+		<v-icon>mdi-home</v-icon>
+		{{ test }}
+	</v-app> -->
+	<question-container />
 </template>
 
-<script>
-import HelloWorld from './components/HelloWorld.vue'
+<script lang="ts">
+import Vue from 'vue';
+import QuestionContainer from './components/QuestionContainer.vue';
 
-export default {
-  name: 'App',
-  components: {
-    HelloWorld
-  }
-}
+import axios from 'axios';
+
+export default Vue.extend({
+	components: {
+		QuestionContainer
+	},
+	data() {
+		return {
+			test: 'AWe'
+		};
+	},
+	mounted() {
+		axios
+			.get('http://127.0.0.1:5000/questionnaire/question1')
+			.then(response => {
+				// handle success
+				this.test = response.data;
+			})
+			.catch(function(error) {
+				// handle error
+				console.log(error);
+			})
+			.then(function() {
+				// always executed
+			});
+	}
+});
 </script>
 
-<style>
+<style lang="scss">
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
+	font-family: Avenir, Helvetica, Arial, sans-serif;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	text-align: center;
+	color: #2c3e50;
+	margin-top: 60px;
 }
 </style>
diff --git a/src/assets/logo.svg b/src/assets/logo.svg
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
diff --git a/src/components/QuestionContainer.vue b/src/components/QuestionContainer.vue
@@ -0,0 +1,66 @@
+<template>
+	<div class="hello">
+		<div id="app">
+			<v-app id="inspire">
+				<v-stepper v-model="e6" vertical non-linear>
+					<question-section step="1">
+						<template v-slot:title>Supervisor Evalution</template>
+						<template v-slot:description>
+							Please answer a few questions regarding your supervisor.
+						</template>
+					</question-section>
+
+					<question-section step="2">
+						<template v-slot:title>Team Evaluation</template>
+						<template v-slot:description>
+							Please answer a few questions regarding your supervisor.
+						</template>
+
+						<v-card color="grey lighten-1" class="mb-12" height="200px"></v-card>
+					</question-section>
+
+					<question-section step="3">
+						<template v-slot:title>Development Environment</template>
+						<template v-slot:description>
+							Please answer a few questions regarding your development environment.
+						</template>
+
+						<v-card color="grey lighten-1" class="mb-12" height="200px"></v-card>
+					</question-section>
+
+					<question-section step="4">
+						<template v-slot:title>Company Culture</template>
+						<template v-slot:description>
+							Please answer a few questions on how you have experienced company culture this year.
+						</template>
+
+						<v-card color="grey lighten-1" class="mb-12" height="200px"></v-card>
+					</question-section>
+				</v-stepper>
+			</v-app>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import QuestionSection from './QuestionSection.vue';
+
+export default Vue.extend({
+	components: {
+		QuestionSection
+	},
+	props: {
+		msg: {
+			type: String,
+			default: 'Testing'
+		}
+	},
+	data() {
+		return {
+			e6: 1
+		};
+	},
+	methods: {}
+});
+</script>
diff --git a/src/components/QuestionSection.vue b/src/components/QuestionSection.vue
@@ -0,0 +1,47 @@
+<template>
+	<!-- Do buttons, back and forth. Consider existing forms. Get all types for fields. Load via rest. -->
+	<div>
+		<v-stepper-step non-linear editable :step="step">
+			<slot name="title"> </slot>
+			<slot v-if="!hideSubtitle" name="subtitle">
+				<!-- Only show this if section has been touched? -->
+				<small>0 out of 5 questions answered</small>
+			</slot>
+		</v-stepper-step>
+
+		<v-stepper-content :step="step">
+			<slot name="description"></slot>
+
+			<slot>
+				<div class="ma-8">No questions</div>
+			</slot>
+			<div class="pa-4 float-right">
+				<v-btn text class="ma-2">
+					Back
+				</v-btn>
+				<v-btn class="ma-2" color="primary" @click="e6 = 2">
+					Continue
+				</v-btn>
+			</div>
+		</v-stepper-content>
+	</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	props: {
+		step: {
+			type: String,
+			default: '-1'
+		},
+		hideSubtitle: {
+			type: Boolean,
+			default: false
+		}
+	}
+});
+</script>
+
+<style scoped></style>
diff --git a/src/main.js b/src/main.js
diff --git a/src/main.ts b/src/main.ts
@@ -0,0 +1,17 @@
+import Vue from 'vue';
+import App from './App.vue';
+import '@mdi/font/css/materialdesignicons.css';
+
+import Vuetify from 'vuetify';
+import 'vuetify/dist/vuetify.min.css';
+Vue.config.productionTip = false;
+Vue.use(Vuetify);
+
+new Vue({
+	vuetify: new Vuetify({
+		icons: {
+			iconfont: 'mdi' // default - only for display purposes
+		}
+	}),
+	render: (h): any => h(App)
+}).$mount('#app');