Skip to content

Commit 8a4dbb9

Browse files
lulunac27alulunac27a
committed
Initialize app
0 parents  commit 8a4dbb9

20 files changed

+454
-0
lines changed

‎.browserslistrc

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
> 1%
2+
last 2 versions
3+
not dead
4+
not ie 11

‎.eslintrc.js

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
module.exports = {
2+
root: true,
3+
env: {
4+
node: true
5+
},
6+
'extends': [
7+
'plugin:vue/vue3-essential',
8+
'eslint:recommended',
9+
'@vue/typescript/recommended'
10+
],
11+
parserOptions: {
12+
ecmaVersion: 2020
13+
},
14+
rules: {
15+
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
16+
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
17+
}
18+
}

‎.gitignore

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
.DS_Store
2+
node_modules
3+
/dist
4+
package-lock.json
5+
6+
# local env files
7+
.env.local
8+
.env.*.local
9+
10+
# Log files
11+
npm-debug.log*
12+
yarn-debug.log*
13+
yarn-error.log*
14+
pnpm-debug.log*
15+
16+
# Editor directories and files
17+
.idea
18+
.vscode
19+
*.suo
20+
*.ntvs*
21+
*.njsproj
22+
*.sln
23+
*.sw?

‎README.md

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# typescript-app
2+
3+
## Project setup
4+
```
5+
npm install
6+
```
7+
8+
### Compiles and hot-reloads for development
9+
```
10+
npm run serve
11+
```
12+
13+
### Compiles and minifies for production
14+
```
15+
npm run build
16+
```
17+
18+
### Lints and fixes files
19+
```
20+
npm run lint
21+
```
22+
23+
### Customize configuration
24+
See [Configuration Reference](https://cli.vuejs.org/config/).

‎babel.config.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
presets: [
3+
'@vue/cli-plugin-babel/preset'
4+
]
5+
}

‎lint-staged.config.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
module.exports = {
2+
'*.{js,jsx,vue,ts,tsx}': 'vue-cli-service lint'
3+
}

‎package.json

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
{
2+
"name": "typescript-app",
3+
"version": "0.1.0",
4+
"private": true,
5+
"scripts": {
6+
"serve": "vue-cli-service serve",
7+
"build": "vue-cli-service build",
8+
"lint": "vue-cli-service lint"
9+
},
10+
"dependencies": {
11+
"core-js": "^3.8.3",
12+
"vue": "^3.2.13",
13+
"vuex": "^4.0.0"
14+
},
15+
"devDependencies": {
16+
"@typescript-eslint/eslint-plugin": "^5.4.0",
17+
"@typescript-eslint/parser": "^5.4.0",
18+
"@vue/cli-plugin-babel": "~5.0.0",
19+
"@vue/cli-plugin-eslint": "~5.0.0",
20+
"@vue/cli-plugin-typescript": "~5.0.0",
21+
"@vue/cli-plugin-vuex": "~5.0.0",
22+
"@vue/cli-service": "~5.0.0",
23+
"@vue/eslint-config-typescript": "^9.1.0",
24+
"eslint": "^7.32.0",
25+
"eslint-plugin-vue": "^8.0.3",
26+
"lint-staged": "^11.1.2",
27+
"sass": "^1.32.7",
28+
"sass-loader": "^12.0.0",
29+
"typescript": "~4.5.5"
30+
},
31+
"gitHooks": {
32+
"pre-commit": "lint-staged"
33+
}
34+
}

‎public/favicon.ico

4.19 KB
Binary file not shown.

‎public/index.html

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang="">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width,initial-scale=1.0">
7+
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
8+
<title><%= htmlWebpackPlugin.options.title %></title>
9+
</head>
10+
<body>
11+
<noscript>
12+
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13+
</noscript>
14+
<div id="app"></div>
15+
<!-- built files will be auto injected -->
16+
</body>
17+
</html>

‎src/App.scss

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
#app {
2+
font-family: Avenir, Helvetica, Arial, sans-serif;
3+
-webkit-font-smoothing: antialiased;
4+
-moz-osx-font-smoothing: grayscale;
5+
text-align: center;
6+
color: #2c3e50;
7+
margin-top: 60px;
8+
}

‎src/App.vue

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<template>
2+
<img alt="Vue logo" src="./assets/logo.png">
3+
<div>
4+
<NewTodo/>
5+
<TodoList/>
6+
</div>
7+
</template>
8+
9+
<script lang="ts">
10+
import { defineComponent } from 'vue';
11+
import NewTodo from './components/NewTodo.vue';
12+
import TodoList from './components/TodoList.vue';
13+
14+
export default defineComponent({
15+
name: 'App',
16+
components: {
17+
NewTodo,
18+
TodoList
19+
}
20+
});
21+
</script>
22+
23+
<link lang="scss" src="./App.scss"/>

‎src/assets/logo.png

6.69 KB
Loading

‎src/components/NewTodo.vue

+75
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<template>
2+
<form @submit.prevent="addTodo">
3+
Name:<br/>
4+
<input class="todo-input" id="name" type="text" placeholder="Enter task name" v-model="task" required/><br/>
5+
Due date:<br/>
6+
<input class="todo-input" id="dueDate" type="date" placeholder="Enter due date" v-model="dueDate" required/><br/>
7+
Priority:<br/>
8+
<select class="todo-input" id="priority" v-model="priority" required>
9+
<option value="1">Low</option><option value="2">Medium</option><option value="3">High</option></select><br/>
10+
Difficulty:<br/>
11+
<select class="todo-input" id="difficulty" v-model="difficulty" required>
12+
<option value="1">Easy</option><option value="2">Medium</option><option value="3">Hard</option></select><br/>
13+
Repeat often:<br/>
14+
<input class="todo-input" id="repeat-often" type="number" placeholder="Enter number of days/weeks/months/years to repeat" v-model="repeatOften" required min="1"/><br/>
15+
Repeat frequency:<br/>
16+
<select class="todo-input" id="repeat-frequency" v-model="repeatFrequency" required>
17+
<option value="1">Daily</option><option value="2">Weekly</option><option value="3">Monthly</option><option value="4">Yearly</option><option value="5">Once</option></select><br/>
18+
<button type="submit">Add Todo</button>
19+
</form>
20+
</template>
21+
22+
<script lang="ts">
23+
import store from '@/store';
24+
import { difficulty, priority, repeatFrequency } from './TodoList.vue';
25+
import { defineComponent } from 'vue';
26+
27+
export interface todoTask {
28+
task: string;
29+
dueDate: Date;
30+
priority: number;
31+
difficulty: number;
32+
repeatOften: number;
33+
repeatFrequency: number;
34+
newId: number;
35+
completed: boolean;
36+
}
37+
const currentUtcDate: Date = new Date();
38+
const currentLocalDate: Date = new Date(currentUtcDate.setMinutes(currentUtcDate.getMinutes() - currentUtcDate.getTimezoneOffset()));
39+
40+
export default defineComponent ({
41+
data() {
42+
return {
43+
task: "",
44+
dueDate: currentLocalDate.toISOString().split('T')[0],
45+
priority: priority.Low,
46+
difficulty: difficulty.Easy,
47+
repeatOften: 1,
48+
repeatFrequency: repeatFrequency.Once,
49+
newId: 0,
50+
completed: false
51+
};
52+
},
53+
mounted() {
54+
const dueDateInput = document.getElementById('dueDate') as HTMLInputElement;
55+
dueDateInput.min = currentLocalDate.toISOString().split('T')[0];
56+
},
57+
methods: {
58+
addTodo: function(): void | todoTask[] {
59+
store.dispatch("createTodo", this);
60+
this.newId++;
61+
this.task = "";
62+
this.dueDate = currentLocalDate.toISOString().split('T')[0];
63+
this.priority = priority.Low;
64+
this.difficulty = difficulty.Easy;
65+
this.repeatOften = 1;
66+
this.repeatFrequency = repeatFrequency.Once;
67+
this.completed = false;
68+
}
69+
}
70+
});
71+
</script>
72+
73+
<style lang="scss">
74+
75+
</style>

‎src/components/TodoList.scss

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
h3 {
2+
margin: 40px 0 0;
3+
}
4+
5+
ul {
6+
list-style-type: none;
7+
padding: 0;
8+
}
9+
10+
li {
11+
margin: 0 10px;
12+
}
13+
14+
a {
15+
color: #42b983;
16+
}

‎src/components/TodoList.vue

+75
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<template>
2+
<div class="todo-app">
3+
<h1>Todo List</h1>
4+
<p>Level: {{ levels }}</p><br/>
5+
<p>XP: {{ xps }}</p><br/>
6+
<ul class="todos">
7+
<li v-for="todo in todos" :key="todo.id" class="todo">
8+
{{ todo.task }}
9+
<button @click="completeTodo(todo.id)">Complete</button>
10+
<button @click="deleteTodo(todo.id)">Delete</button><br/>
11+
</li>
12+
</ul>
13+
</div>
14+
</template>
15+
16+
<script lang="ts">
17+
import store from '@/store';
18+
import { defineComponent } from 'vue';
19+
20+
export enum repeatFrequency {
21+
Daily = 1,
22+
Weekly = 2,
23+
Monthly = 3,
24+
Yearly = 4,
25+
Once = 5
26+
}
27+
export enum difficulty {
28+
Easy = 1,
29+
Medium = 2,
30+
Hard = 3
31+
}
32+
export enum priority {
33+
Low = 1,
34+
Medium = 2,
35+
High = 3
36+
}
37+
export default defineComponent({
38+
name: 'TodoList',
39+
props: {
40+
newId: Number,
41+
tasks: Array,
42+
title: String,
43+
dueDate: Date,
44+
priority: Number,
45+
difficulty: Number,
46+
repeatFrequency: String,
47+
repeatOften: Number,
48+
level: Number,
49+
xp: Number,
50+
completed: Boolean
51+
},
52+
computed: {
53+
todos() {
54+
return store.getters.getTodos;
55+
},
56+
levels() {
57+
return store.getters.getLevel;
58+
},
59+
xps() {
60+
return store.getters.getXp;
61+
}
62+
},
63+
methods: {
64+
completeTodo: function (id: number) {
65+
store.dispatch("completeTodo", id);
66+
},
67+
deleteTodo: function (id: number) {
68+
store.dispatch("deleteTodo", id);
69+
}
70+
}
71+
});
72+
</script>
73+
74+
<!-- Add "scoped" attribute to limit CSS to this component only -->
75+
<link scoped lang="scss" src="./TodoList.scss"/>

‎src/main.ts

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { createApp, h } from 'vue';
2+
import App from './App.vue';
3+
import store from './store';
4+
5+
createApp({render: () => h(App)}).use(store).mount('#app');
6+
store.dispatch("loadUser");

‎src/shims-vue.d.ts

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
/* eslint-disable */
2+
declare module '*.vue' {
3+
import type { DefineComponent } from 'vue'
4+
const component: DefineComponent<{}, {}, any>
5+
export default component
6+
}

0 commit comments

Comments
 (0)