Commit d652c5a6 authored by Wendelin Gerein's avatar Wendelin Gerein
Browse files

Initial commit

parents
Pipeline #6 failed with stages
in 0 seconds
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
# aufgabe
## Project setup
```
yarn install
```
### Compiles and hot-reloads for development
```
yarn serve
```
### Compiles and minifies for production
```
yarn build
```
### Lints and fixes files
```
yarn lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}
{
"name": "aufgabe",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^3.0.0",
"vue-router": "^4.0.10",
"vuex": "^4.0.2"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
<template>
<the-navbar></the-navbar>
<div class="container with-nav">
<router-view />
</div>
</template>
<script>
import TheNavbar from './components/TheNavbar'
import { useStore } from 'vuex'
export default {
components: {
TheNavbar
},
setup(){
const store = useStore()
store.commit('SET_ITEMS');
}
}
</script>
<style>
</style>
<template>
<span :class="['badge', status.class]">{{status.name}}</span>
</template>
<script>
import {reactive, watch} from "vue"
export default {
props: ["type"],
setup(props) {
const status = reactive({
class: '',
name: ''
})
watch([props],()=>{
statusView()
})
function statusView() {
if (props.type === "active") {
status.class = 'primary';
status.name = 'Активен';
} else if (props.type === "done") {
status.class = 'warning';
status.name = 'Выполняется';
} else if (props.type === "cancelled") {
status.class = 'danger';
status.name = 'Отменено';
} else {
status.class = 'primary';
status.name = 'Завершон';
}
}
statusView()
return {
statusView,
status
};
},
};
</script>
\ No newline at end of file
<template>
<nav class="navbar">
<h3>
Freelance
</h3>
<ul class="navbar-menu">
<li>
<router-link to="/">Все задачи</router-link>
</li>
<li>
<router-link to="/new">Создать</router-link>
</li>
</ul>
</nav>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
\ No newline at end of file
import { createApp } from 'vue'
import App from './App.vue'
import "./theme.css"
import { store } from "./store"
import { router } from "./router"
const app = createApp(App)
app.use(router)
app.use(store)
app.mount('#app')
\ No newline at end of file
import { createRouter, createWebHistory } from "vue-router"
import New from "./views/New"
import Tasks from "./views/Tasks"
import Task from "./views/Task"
export const router = createRouter({
history: createWebHistory(),
routes: [
{ path: '/', component: Tasks },
{ path: '/new', component: New },
{ path: '/:id', component: Task },
],
linkActiveClass: 'active',
linkExactActiveClass: 'active'
})
\ No newline at end of file
import { createStore } from "vuex"
export const store = createStore({
state() {
return {
items: []
}
},
mutations: {
SET_ITEMS(state) {
state.items = JSON.parse(localStorage.getItem("items") || '[]')
}
},
actions: {
async EDITE_ITEMS({ state, commit }, data) {
const items = state.items
for (let i = 0; i < items.length; i++) {
if (data.id == items[i].id) {
items[i].status = data.status;
}
}
localStorage.setItem("items", JSON.stringify(items));
commit('SET_ITEMS')
}
},
getters: {
GET_ITEMS(state) {
return state.items
},
GET_ACTIVE(state) {
return state.items.filter(i => i.status === 'active')
}
}
})
\ No newline at end of file
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
* {
box-sizing: border-box;
}
body {
font-family: Inter, Roboto, Oxygen, Fira Sans, Helvetica Neue, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 16px;
color: #2c3e50;
background: #2c3e50;
}
hr {
margin: 1rem 0;
}
strong,
.bold {
font-weight: 500;
}
ol,
p,
ul {
line-height: 1.7;
}
a {
color: #3eaf7c;
font-weight: 500;
text-decoration: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 500;
line-height: 1.45;
}
h1 {
font-size: 2.2rem;
font-weight: 600;
}
h2 {
font-size: 1.65rem;
padding-bottom: 0.3rem;
border-bottom: 1px solid #eaecef;
}
h3 {
font-size: 1.35rem;
}
/*.primary {*/
/* color: #42b983;*/
/*}*/
/*.danger {*/
/* color: #e53935;*/
/*}*/
.btn {
color: #42b983;
position: relative;
place-content: center;
place-items: center;
width: fit-content;
border-radius: 99px;
letter-spacing: 0.05em;
border: 1px solid #42b983;
text-decoration: none;
text-transform: uppercase;
margin-right: 10px;
padding: 0.5rem 1.5rem;
white-space: nowrap;
font-weight: 700;
outline: none;
background: #fff;
transition: all 0.22s;
}
.btn:hover {
cursor: pointer;
opacity: 0.8;
}
.btn:disabled {
cursor: not-allowed;
opacity: 1!important;
background: #eee!important;
border-color: #ddd!important;
color: #999!important;
}
.btn:active {
box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.3);
}
.btn.primary {
background: #42b983;
color: #fff;
}
.btn.danger {
background: #e53935;
color: #fff;
border-color: #e53935;
}
.btn.warning {
background: #c25205;
color: #fff;
border-color: #c25205;
}
.container {
margin: 0 auto;
max-width: 1000px;
}
.container.with-nav {
margin-top: 70px;
}
.pt-2 {
padding-top: 2rem;
}
.pt-1 {
padding-top: 1rem;
}
.pt-5 {
padding-top: 5rem;
}
.form-control {
position: relative;
margin-bottom: 0.5rem;
}
.form-control input,
.form-control select,
.form-control textarea{
font-family: Inter, Roboto, Oxygen, Fira Sans, Helvetica Neue, sans-serif;
margin: 0;
outline: none;
border: 2px solid #ccc;
display: block;
width: 100%;
color: #2c3e50;
padding: 0.5rem 1.5rem;
border-radius: 3px;
font-size: 1rem;
resize: none;
}
.form-control small {
color: #e53935;
}
.form-control.invalid input {
border-color: #e53935;
}
.form-checkbox {
margin-bottom: 1rem;
}
.form-checkbox .label {
display: block;
margin: 0 0 0.3rem 0.3rem;
font-weight: 500;
}
.form-checkbox .checkbox input {
margin-right: 1rem;
}
.form-control label {
display: block;
margin: 0 0 0.3rem 0.3rem;
font-weight: 500;
}
.form-control input:active,
.form-control input:focus {
transition: border 0.22s;
border: 2px solid #42b983;
}
.card {
overflow: hidden;
padding: 1rem;
margin-bottom: 1rem;
border-radius: 10px;
box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.2);
background: #fff;
}
.card.marked {
border: 4px solid #42b983;
}
.card.center {
display: flex;
flex-direction: column;
align-items: center;
}
.list {
margin: 0;
padding: 0;
list-style: none;
}
.list-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5rem 0;
transition: .22s all;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.list-item:hover {
background: #eee;
}
.alert {
padding: 1rem 1.5rem;
border-left-width: .5rem;
border-left-style: solid;
margin: 1rem 0;
position: relative;
border-bottom-right-radius: 2px;
border-top-right-radius: 2px;
}
.alert.primary {
border-color: #42b983;
background-color: #f8f8f8;
}
.alert.danger {
border-color: #e53935;
background-color: #f8f8f8;
}
.alert.warning {
border-color: #c25205;
background-color: #f8f8f8;
}
.alert p {
color: #222;
line-height: 1.7;
}
.alert-title {
text-transform: uppercase;
font-weight: 600;
margin-bottom: -.4rem;
color: #222;
}
.modal {
position: fixed;
top: 60px;
width: 600px;
padding: 1rem;
background: #fff;
z-index: 1000;
left: 50%;
border-radius: 10px;
transform: translateX(-50%);
box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.2);
}
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(0, 0, 0, .35);
}
.loader {
font-size: 10px;
margin: 50px auto;
text-indent: -9999em;
width: 11em;
height: 11em;
border-radius: 50%;
background: #ffffff;
background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
position: relative;
-webkit-animation: load3 1.4s infinite linear;
animation: load3 1.4s infinite linear;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
.loader:before {
width: 50%;
height: 50%;
background: #ffffff;
border-radius: 100% 0 0 0;
position: absolute;
top: 0;
left: 0;
content: '';
}
.loader:after {
background: #2c3e50;
width: 75%;
height: 75%;
border-radius: 50%;
content: '';
margin: auto;
position: absolute;
top: 0;