add eslint working conf

This commit is contained in:
2020-04-29 21:05:38 +02:00
parent ffe8c167cb
commit ebb1c58f90
33 changed files with 866 additions and 846 deletions

View File

@@ -6,26 +6,22 @@
}, },
"extends": [ "extends": [
"eslint:recommended", "eslint:recommended",
"plugin:vue/essential", "plugin:vue/essential"
"plugin:vue/base",
"plugin:vue/strongly-recommended",
"plugin:vue/recommended"
], ],
"globals": { "globals": {
"Atomics": "readonly", "Atomics": "readonly",
"SharedArrayBuffer": "readonly" "SharedArrayBuffer": "readonly"
}, },
"parserOptions": { "parserOptions": {
"ecmaVersion": 2018, "ecmaVersion": 2018
"sourceType": "module"
}, },
"plugins": [ "plugins": [
"vue" "vue"
], ],
"rules": { "rules": {
"indent": [ "indent": [
"off", "error",
2 4
], ],
"linebreak-style": [ "linebreak-style": [
"error", "error",
@@ -36,10 +32,8 @@
"single" "single"
], ],
"semi": [ "semi": [
"off", "error",
"always" "never"
], ]
"no-console": "off",
"strict": "off"
} }
} }

View File

@@ -8,14 +8,20 @@
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js", "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production", "prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"eslint": "./node_modules/.bin/eslint resources/assets/js/ test/ --ext .js,.vue" "eslint": "./node_modules/.bin/eslint resources/js/ --ext .js,.vue",
"lint": "eslint --ext .js,.vue resources/js/"
}, },
"devDependencies": { "devDependencies": {
"axios": "^0.19", "axios": "^0.19",
"babel-eslint": "^10.1.0", "babel-eslint": "^10.1.0",
"cross-env": "^7.0", "cross-env": "^7.0",
"eslint": "^6.8.0", "eslint": "^6.8.0",
"eslint-config-standard": "^14.1.1",
"eslint-loader": "^3.0.3", "eslint-loader": "^3.0.3",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.1",
"eslint-plugin-vue": "^6.2.2", "eslint-plugin-vue": "^6.2.2",
"laravel-mix": "^5.0.1", "laravel-mix": "^5.0.1",
"laravel-mix-eslint": "^0.1.3", "laravel-mix-eslint": "^0.1.3",

9
resources/js/app.js vendored
View File

@@ -2,12 +2,13 @@ import Vue from 'vue'
import router from './router' import router from './router'
import App from './components/App' import App from './components/App'
import store from './store' import store from './store'
import SvgVue from 'svg-vue'; import SvgVue from 'svg-vue'
Vue.use(SvgVue); Vue.use(SvgVue)
require('./bootstrap'); require('./bootstrap')
// eslint-disable-next-line no-unused-vars
const app = new Vue({ const app = new Vue({
el: '#app', el: '#app',
@@ -15,4 +16,4 @@ const app = new Vue({
App App
}, },
router, store, router, store,
}); })

View File

@@ -1,7 +1,5 @@
window._ = require('lodash'); window._ = require('lodash')
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
window.axios = require('axios')
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'

View File

@@ -8,19 +8,19 @@
</template> </template>
<script> <script>
export default { export default {
name: "AlertBox", name: 'AlertBox',
props: { props: {
type: { type: {
type: String, type: String,
required: true, required: true,
default: 'success', default: 'success',
}, },
message: { message: {
type: String, type: String,
required: true, required: true,
default: 'message', default: 'message',
}, },
}
} }
}
</script> </script>

View File

@@ -11,30 +11,31 @@
</template> </template>
<script> <script>
import Nav from "./Nav"; import Nav from './Nav'
import TopBar from "./TopBar"; import TopBar from './TopBar'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
export default { export default {
name: "App", name: 'App',
components : { components : {
Nav, TopBar Nav, TopBar
}, },
mounted() { mounted() {
this.$store.dispatch('fetchAuthUser') this.$store.dispatch('fetchAuthUser')
}, },
created() { created() {
this.$store.dispatch('setPageTitle', this.$route.meta.title) this.$store.dispatch('setPageTitle', this.$route.meta.title)
}, },
computed: { computed: {
...mapGetters({ ...mapGetters({
authUser: 'authUser', authUser: 'authUser',
}) })
}, },
watch: { watch: {
$route(to, from) { // eslint-disable-next-line no-unused-vars
this.$store.dispatch('setPageTitle', to.meta.title) $route(to, from) {
} this.$store.dispatch('setPageTitle', to.meta.title)
} }
} }
}
</script> </script>

View File

@@ -7,8 +7,8 @@
</template> </template>
<script> <script>
export default { export default {
name: "Avatar", name: 'Avatar',
props: ['avatar', 'alt', 'size'] props: ['avatar', 'alt', 'size']
} }
</script> </script>

View File

@@ -8,62 +8,62 @@
<script> <script>
export default { export default {
name: "InputField", name: 'InputField',
props: { props: {
name: { name: {
type: String, type: String,
required: true required: true
},
type: {
type: String,
default: 'text'
},
label: String,
placeholder: String,
required: {
type: Boolean,
default: false
},
errors: Object,
data: String,
classes: String,
}, },
data: function () { type: {
type: String,
default: 'text'
},
label: String,
placeholder: String,
required: {
type: Boolean,
default: false
},
errors: Object,
data: String,
classes: String,
},
data: function () {
return {
value: ''
}
},
computed: {
hasError: function () {
return this.required && this.errors && this.errors[this.name] && this.errors[this.name].length > 0
}
},
methods: {
updateField: function () {
this.clearErrors(this.name)
this.$emit('update:field', this.value)
},
errorMessage: function () {
if (this.hasError) {
return this.errors[this.name][0]
}
},
clearErrors: function () {
if (this.hasError) {
this.errors[this.name] = null
}
},
errorClassObject: function () {
return { return {
value: '' 'error-field': this.hasError
}
},
computed: {
hasError: function () {
return this.required && this.errors && this.errors[this.name] && this.errors[this.name].length > 0
}
},
methods: {
updateField: function () {
this.clearErrors(this.name);
this.$emit('update:field', this.value)
},
errorMessage: function () {
if (this.hasError) {
return this.errors[this.name][0]
}
},
clearErrors: function () {
if (this.hasError) {
this.errors[this.name] = null
}
},
errorClassObject: function () {
return {
'error-field': this.hasError
}
}
},
watch: {
data: function (val) {
this.value = val
} }
} }
},
watch: {
data: function (val) {
this.value = val
}
} }
}
</script> </script>

View File

@@ -5,15 +5,15 @@
</template> </template>
<script> <script>
export default { export default {
name: "Loader", name: 'Loader',
data: function () { data: function () {
return { return {
loading: false, loading: false,
}
},
mounted() {
setTimeout(() => this.loading = true, 250)
} }
},
mounted() {
setTimeout(() => this.loading = true, 250)
} }
}
</script> </script>

View File

@@ -25,22 +25,22 @@
</template> </template>
<script> <script>
export default { export default {
name: "Nav", name: 'Nav',
data: function () { data: function () {
return { return {
toggleNav: true, toggleNav: true,
} }
}, },
mounted() { mounted() {
let isTrueSet = (localStorage.getItem('navbar') === 'true'); let isTrueSet = (localStorage.getItem('navbar') === 'true');
(isTrueSet) ? this.toggleNav = true : this.toggleNav = false (isTrueSet) ? this.toggleNav = true : this.toggleNav = false
}, },
methods: { methods: {
toggleNavBar() { toggleNavBar(){
this.toggleNav = !this.toggleNav this.toggleNav = !this.toggleNav
localStorage.setItem('navbar', JSON.stringify(this.toggleNav)); localStorage.setItem('navbar', JSON.stringify(this.toggleNav))
}
} }
} }
}
</script> </script>

View File

@@ -1,67 +1,74 @@
<template> <template>
<div class="relative mb-2"> <div class="relative mb-2">
<label v-if="label" :for="name" class="pb-1">{{ label }}</label> <label v-if="label" :for="name" class="pb-1">{{ label }}</label>
<textarea :id="name" type="text" v-model="value" :placeholder="placeholder" @input="updateField()" :class="errorClassObject()" class="w-full h-64 rounded p-2">{{ data }}</textarea> <textarea :id="name"
type="text"
v-model="value"
:placeholder="placeholder"
@input="updateField()"
:class="errorClassObject()"
class="w-full h-64 rounded p-2">
</textarea>
<p class="text-red-600 m-0" v-text="errorMessage()">Error Here</p> <p class="text-red-600 m-0" v-text="errorMessage()">Error Here</p>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: "TextAreaField", name: 'TextAreaField',
props: { props: {
name: { name: {
type: String, type: String,
required: true required: true
},
type: {
type: String,
default: 'text'
},
label: String,
placeholder: String,
required: {
type: Boolean,
default: false
},
errors: Object,
data: String,
}, },
data: function () { type: {
type: String,
default: 'text'
},
label: String,
placeholder: String,
required: {
type: Boolean,
default: false
},
errors: Object,
data: String,
},
data: function () {
return {
value: ''
}
},
computed: {
hasError: function () {
return this.required && this.errors && this.errors[this.name] && this.errors[this.name].length > 0
}
},
methods: {
updateField: function () {
this.clearErrors(this.name)
this.$emit('update:field', this.value)
},
errorMessage: function () {
if (this.hasError) {
return this.errors[this.name][0]
}
},
clearErrors: function () {
if (this.hasError) {
this.errors[this.name] = null
}
},
errorClassObject: function () {
return { return {
value: '' 'error-field': this.hasError
}
},
computed: {
hasError: function () {
return this.required && this.errors && this.errors[this.name] && this.errors[this.name].length > 0
}
},
methods: {
updateField: function () {
this.clearErrors(this.name);
this.$emit('update:field', this.value)
},
errorMessage: function () {
if (this.hasError) {
return this.errors[this.name][0]
}
},
clearErrors: function () {
if (this.hasError) {
this.errors[this.name] = null
}
},
errorClassObject: function () {
return {
'error-field': this.hasError
}
}
},
watch: {
data: function (val) {
this.value = val
} }
} }
},
watch: {
data: function (val) {
this.value = val
}
} }
}
</script> </script>

View File

@@ -20,23 +20,23 @@
</template> </template>
<script> <script>
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import Avatar from "./Avatar"; import Avatar from './Avatar'
export default { export default {
name: "TopBar", name: 'TopBar',
components: { components: {
Avatar Avatar
}, },
data: function () { data: function () {
return { return {
search: false, search: false,
}
},
computed: {
...mapGetters({
authUser: 'authUser',
})
} }
},
computed: {
...mapGetters({
authUser: 'authUser',
})
} }
}
</script> </script>

View File

@@ -8,80 +8,80 @@
</template> </template>
<script> <script>
import Dropzone from 'dropzone' import Dropzone from 'dropzone'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
export default { export default {
name: "UploadableImage", name: 'UploadableImage',
props: { props: {
imageWidth: { imageWidth: {
type: Number, type: Number,
required: true, required: true,
},
imageHeight: {
type: Number,
required: true,
},
location: {
type: String,
required: true
},
image: {
type: Object,
default: null,
},
author: {
type: Object,
required: true
},
id: {
type: Number,
required: true
},
model: {
type: String,
required: true
},
classes: String,
alt: String
}, },
data: () => { imageHeight: {
type: Number,
required: true,
},
location: {
type: String,
required: true
},
image: {
type: Object,
default: null,
},
author: {
type: Object,
required: true
},
id: {
type: Number,
required: true
},
model: {
type: String,
required: true
},
classes: String,
alt: String
},
data: () => {
return {
dropzone: null,
dropImage: null,
}
},
mounted() {
if(this.authUser.data.user_id === this.author.data.user_id) {
this.dropzone = new Dropzone(this.$refs.image, this.settings)
}
},
computed: {
...mapGetters({
authUser: 'authUser'
}),
settings() {
let url = '/api/images/' + this.model + '/' + this.id
return { return {
dropzone: null, paramName: 'image',
dropImage: null, url: url,
} acceptedFiles: 'image/*',
}, params: {
mounted() { 'width': this.imageWidth,
if(this.authUser.data.user_id === this.author.data.user_id) { 'height': this.imageHeight,
this.dropzone = new Dropzone(this.$refs.image, this.settings) 'location': this.location,
} },
}, headers: {
computed: { 'X-CSRF-TOKEN': document.head.querySelector('meta[name=csrf-token]').content
...mapGetters({ },
authUser: 'authUser' success: (e, res) => {
}), this.dropImage = res
settings() {
let url = '/api/images/' + this.model + '/' + this.id
return {
paramName: 'image',
url: url,
acceptedFiles: 'image/*',
params: {
'width': this.imageWidth,
'height': this.imageHeight,
'location': this.location,
},
headers: {
'X-CSRF-TOKEN': document.head.querySelector('meta[name=csrf-token]').content
},
success: (e, res) => {
this.dropImage = res
}
} }
},
imageObject() {
return this.dropImage || this.image
} }
},
imageObject() {
return this.dropImage || this.image
} }
} }
}
</script> </script>

View File

@@ -1,18 +1,18 @@
import Vue from 'vue' import Vue from 'vue'
import VueRouter from 'vue-router' import VueRouter from 'vue-router'
import Home from "./views/Home" import Home from './views/Home'
import Profile from "./views/User/ProfileUser"; import Profile from './views/User/ProfileUser'
import ShowUser from "./views/User/ShowUser"; import ShowUser from './views/User/ShowUser'
import DashBoard from "./views/DashBoard"; import DashBoard from './views/DashBoard'
import CssTesteur from "./views/CssTesteur"; import CssTesteur from './views/CssTesteur'
import MemoIndex from "./views/Memo/MemoIndex"; import MemoIndex from './views/Memo/MemoIndex'
import MemoCreate from "./views/Memo/MemoCreate"; import MemoCreate from './views/Memo/MemoCreate'
import MemoShow from "./views/Memo/MemoShow"; import MemoShow from './views/Memo/MemoShow'
import MemoEdit from "./views/Memo/MemoEdit"; import MemoEdit from './views/Memo/MemoEdit'
import ToDoListIndex from "./views/ToDoLists/ToDoListIndex"; import ToDoListIndex from './views/ToDoLists/ToDoListIndex'
import ToDoListShow from "./views/ToDoLists/ToDoListShow"; import ToDoListShow from './views/ToDoLists/ToDoListShow'
import GameIndex from "./views/Games/GameIndex"; import GameIndex from './views/Games/GameIndex'
import Hangman from "./views/Games/HangMan/Hangman"; import Hangman from './views/Games/HangMan/Hangman'
Vue.use(VueRouter) Vue.use(VueRouter)

View File

@@ -10,13 +10,15 @@ const getters = {
} }
const actions = { const actions = {
// eslint-disable-next-line no-unused-vars
fetchAuthUser({commit, state}) { fetchAuthUser({commit, state}) {
// eslint-disable-next-line no-undef
axios.get('/api/auth-user') axios.get('/api/auth-user')
.then(res => { .then(res => {
commit('setAuthUser', res.data) commit('setAuthUser', res.data)
}) })
.catch(error => { .catch(error => {
console.log('Unable to fetch auth user') console.log('Unable to fetch auth user' + error)
}) })
} }
} }

View File

@@ -37,7 +37,7 @@
</template> </template>
<script> <script>
export default { export default {
name: "CssTesteur" name: 'CssTesteur'
} }
</script> </script>

View File

@@ -11,24 +11,26 @@
</template> </template>
<script> <script>
import UserAdmin from "./User/UserAdmin"; import UserAdmin from './User/UserAdmin'
export default { export default {
name: "DashBoard", name: 'DashBoard',
components: { components: {
UserAdmin UserAdmin
}, },
methods: { methods: {
logout: function () { logout: function () {
axios.post('logout') // eslint-disable-next-line no-undef
.then(res => { axios.post('logout')
if(res.status ===302 || 401) { .then(res => {
window.location.href = '/login' // eslint-disable-next-line no-constant-condition
} if(res.status === 302 || 401) {
}).catch(error => { window.location.href = '/login'
}
}).catch(() => {
}) })
}
} }
} }
}
</script> </script>

View File

@@ -8,12 +8,12 @@
</template> </template>
<script> <script>
import HangmanIndex from "./HangMan/HangmanIndex"; import HangmanIndex from './HangMan/HangmanIndex'
export default { export default {
name: "GameIndex", name: 'GameIndex',
components: { components: {
HangmanIndex HangmanIndex
}
} }
}
</script> </script>

View File

@@ -3,7 +3,7 @@
<h1 class="text-3xl text-center text-orange-900 font-bold">Pendu</h1> <h1 class="text-3xl text-center text-orange-900 font-bold">Pendu</h1>
<p class="text-center mb-4">Trouve le mot du pendu - Saisi les lettres</p> <p class="text-center mb-4">Trouve le mot du pendu - Saisi les lettres</p>
<div class="flex justify-center dic-select"> <div class="flex justify-center dic-select">
<div v-for="(dic, key) in dictionary"> <div v-for="(dic, key) in dictionary" :key="key">
<a v-if="!selectedWord" class="btn-primary mr-1" @click="selectWord">{{ key }}</a> <a v-if="!selectedWord" class="btn-primary mr-1" @click="selectWord">{{ key }}</a>
</div> </div>
</div> </div>
@@ -46,116 +46,116 @@
</template> </template>
<script> <script>
import json from './dict.json' import json from './dict.json'
export default { export default {
name: "Hangman", name: 'Hangman',
data: function () { data: function () {
return { return {
dictionary: json, dictionary: json,
letterBox: '', letterBox: '',
figureParts: [], figureParts: [],
correctLetters: [], correctLetters: [],
wrongLetters: [], wrongLetters: [],
wrongLettersEl: '', wrongLettersEl: '',
selectedWord: '', selectedWord: '',
wordEl: '', wordEl: '',
finalMessage: '', finalMessage: '',
popup: false, popup: false,
notification: false, notification: false,
} }
},
mounted() {
this.figureParts = this.$el.querySelectorAll('.figure-part')
window.addEventListener('keyup', this.keyMessage)
},
methods: {
selectWord(e) {
this.selectedWord = this.dictionary[e.target.textContent][Math.floor(Math.random() * this.dictionary[e.target.textContent].length)].toLowerCase()
this.displayWord()
this.popup = false
}, },
mounted() { keyMessage(e) {
this.figureParts = this.$el.querySelectorAll('.figure-part') if(e.keyCode >= 65 && e.keyCode <= 90) {
window.addEventListener('keyup', this.keyMessage) const letter = e.key
},
methods: {
selectWord(e) {
this.selectedWord = this.dictionary[e.target.textContent][Math.floor(Math.random() * this.dictionary[e.target.textContent].length)].toLowerCase()
this.displayWord()
this.popup = false
},
keyMessage(e) {
if(e.keyCode >= 65 && e.keyCode <= 90) {
const letter = e.key
if(this.selectedWord.includes(letter)) { if(this.selectedWord.includes(letter)) {
if(!this.correctLetters.includes(letter)) { if(!this.correctLetters.includes(letter)) {
this.correctLetters.push(letter) this.correctLetters.push(letter)
this.displayWord() this.displayWord()
} else {
this.showNotification()
}
} else { } else {
if(!this.wrongLetters.includes(letter)) { this.showNotification()
this.wrongLetters.push(letter); }
} else {
if(!this.wrongLetters.includes(letter)) {
this.wrongLetters.push(letter)
this.updateWrongLettersEl() this.updateWrongLettersEl()
} else { } else {
this.showNotification() this.showNotification()
}
} }
} }
}, }
displayWord() { },
this.wordEl = displayWord() {
this.selectedWord this.wordEl =
this.selectedWord
.split('') .split('')
.map( .map(
letter => { letter => {
let toggleLetter = this.correctLetters.includes(letter) ? letter : ''; let toggleLetter = this.correctLetters.includes(letter) ? letter : ''
return '<span class="letter">' + toggleLetter +"</span>" return '<span class="letter">' + toggleLetter + '</span>'
} }
).join(''); ).join('')
const innerWord = this.wordEl.replace(/<span class="letter">|<\/span>/g, ''); const innerWord = this.wordEl.replace(/<span class="letter">|<\/span>/g, '')
if(innerWord === this.selectedWord) { if(innerWord === this.selectedWord) {
this.finalMessage = 'Gagné! 😃'; this.finalMessage = 'Gagné! 😃'
this.popup = true
this.newGame()
}
},
updateWrongLettersEl() {
this.wrongLettersEl =
!this.wrongLetters ? '<p>Wrong</p>' : ''
+
this.wrongLetters.map(letter => `<span>${letter}</span>`);
// Display parts
this.figureParts.forEach((part, index) => {
const errors = this.wrongLetters.length;
if(index < errors) {
part.style.display = 'block'
} else {
part.style.display = 'none'
}
});
// Check if lost
if(this.wrongLetters.length === this.figureParts.length) {
this.finalMessage = 'Perdu. 😕';
this.popup = true
this.newGame()
}
},
newGame: function () {
this.popup = true this.popup = true
this.correctLetters.splice(0); this.newGame()
this.wrongLetters.splice(0);
this.letterBox = ''
this.selectedWord = ''
this.wrongLettersEl = ''
},
showNotification(){
this.notification = true
setTimeout(() => {
this.notification = false
}, 2000)
} }
},
updateWrongLettersEl() {
this.wrongLettersEl =
!this.wrongLetters ? '<p>Wrong</p>' : ''
+
this.wrongLetters.map(letter => `<span>${letter}</span>`)
// Display parts
this.figureParts.forEach((part, index) => {
const errors = this.wrongLetters.length
if(index < errors) {
part.style.display = 'block'
} else {
part.style.display = 'none'
}
})
// Check if lost
if(this.wrongLetters.length === this.figureParts.length) {
this.finalMessage = 'Perdu. 😕'
this.popup = true
this.newGame()
}
},
newGame: function () {
this.popup = true
this.correctLetters.splice(0)
this.wrongLetters.splice(0)
this.letterBox = ''
this.selectedWord = ''
this.wrongLettersEl = ''
},
showNotification(){
this.notification = true
setTimeout(() => {
this.notification = false
}, 2000)
} }
} }
}
</script> </script>

View File

@@ -6,13 +6,13 @@
</template> </template>
<script> <script>
export default { export default {
name: "HangmanIndex", name: 'HangmanIndex',
props: { props: {
link: { link: {
type: String, type: String,
required: true required: true
}, },
}
} }
}
</script> </script>

View File

@@ -6,12 +6,12 @@
</template> </template>
<script> <script>
import OpenWeatherCard from "./Meteo/OpenWeatherCard"; import OpenWeatherCard from './Meteo/OpenWeatherCard'
export default { export default {
name: "Home", name: 'Home',
components: { components: {
OpenWeatherCard OpenWeatherCard
}
} }
}
</script> </script>

View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="p-4"> <div class="p-4">
<div class="flex justify-between flex-center mb-4"> <div class="flex justify-between flex-center mb-4">
<router-link to="/memos/" class="btn">< Back</router-link> <router-link to="/memos/" class="btn">Back</router-link>
<button @click="$router.back()" class="btn-alert">Cancel</button> <button @click="$router.back()" class="btn-alert">Cancel</button>
</div> </div>
<form @submit.prevent="submitForm"> <form @submit.prevent="submitForm">
@@ -16,33 +16,34 @@
</template> </template>
<script> <script>
import InputField from "../../components/InputField"; import InputField from '../../components/InputField'
import TextAreaField from "../../components/TextAreaField"; import TextAreaField from '../../components/TextAreaField'
export default { export default {
name: "MemoCreate", name: 'MemoCreate',
components: { components: {
InputField, TextAreaField InputField, TextAreaField
}, },
data: function () { data: function () {
return { return {
form: { form: {
'name': '', 'name': '',
'memo': '', 'memo': '',
}, },
errors: null, errors: null,
} }
}, },
methods: { methods: {
submitForm: function () { submitForm: function () {
axios.post('/api/memos', this.form) // eslint-disable-next-line no-undef
.then(response => { axios.post('/api/memos', this.form)
this.$router.push(response.data.links.self) .then(response => {
}) this.$router.push(response.data.links.self)
.catch(errors => { })
this.errors = errors.response.data.errors .catch(errors => {
}) this.errors = errors.response.data.errors
} })
} }
} }
}
</script> </script>

View File

@@ -15,7 +15,7 @@
</div> </div>
<div class="p-4"> <div class="p-4">
<div class="flex justify-between mb-4"> <div class="flex justify-between mb-4">
<router-link :to="'/memos/' + this.$route.params.id" class="btn">< Back</router-link> <router-link :to="'/memos/' + this.$route.params.id" class="btn">Back</router-link>
</div> </div>
<form @submit.prevent="submitForm"> <form @submit.prevent="submitForm">
<InputField name="name" :data="form.name" label="Title" placeholder="Your Title" required @update:field="form.name = $event" :errors="errors" /> <InputField name="name" :data="form.name" label="Title" placeholder="Your Title" required @update:field="form.name = $event" :errors="errors" />
@@ -31,49 +31,51 @@
</template> </template>
<script> <script>
import InputField from "../../components/InputField"; import InputField from '../../components/InputField'
import TextAreaField from "../../components/TextAreaField"; import TextAreaField from '../../components/TextAreaField'
import UploadableImage from "../../components/UploadableImage"; import UploadableImage from '../../components/UploadableImage'
export default { export default {
name: "MemoEdit", name: 'MemoEdit',
components: { components: {
InputField, TextAreaField, UploadableImage InputField, TextAreaField, UploadableImage
}, },
data: function () { data: function () {
return { return {
form: { form: {
'name': '', 'name': '',
'memo': '', 'memo': '',
'attributes': {} 'attributes': {}
}, },
errors: null, errors: null,
loading: true, loading: true,
} }
}, },
methods: { methods: {
submitForm: function () { submitForm: function () {
axios.patch('/api/memos/' + this.$route.params.id, this.form) // eslint-disable-next-line no-undef
.then(response => { axios.patch('/api/memos/' + this.$route.params.id, this.form)
this.$router.push(response.data.links.self)
})
.catch(errors => {
this.errors = errors.response.data.errors
})
}
},
mounted() {
axios.get('/api/memos/' + this.$route.params.id)
.then(response => { .then(response => {
this.form = response.data.data this.$router.push(response.data.links.self)
this.loading = false
}) })
.catch(error => { .catch(errors => {
this.loading = false this.errors = errors.response.data.errors
if (error.response.status === 404) {
this.$router.back()
}
}) })
} }
},
mounted() {
// eslint-disable-next-line no-undef
axios.get('/api/memos/' + this.$route.params.id)
.then(response => {
this.form = response.data.data
this.loading = false
})
.catch(error => {
this.loading = false
if (error.response.status === 404) {
this.$router.back()
}
})
} }
}
</script> </script>

View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="p-4"> <div class="p-4">
<div class="flex justify-between flex-center mb-4"> <div class="flex justify-between flex-center mb-4">
<a href="#" class="btn" @click="$router.back()">< Back</a> <a href="#" class="btn" @click="$router.back()">Back</a>
<router-link :to="'/memos/create'" class="btn-primary">Add New Memo</router-link> <router-link :to="'/memos/create'" class="btn-primary">Add New Memo</router-link>
</div> </div>
<Loader v-if="loading" /> <Loader v-if="loading" />
@@ -25,29 +25,30 @@
</template> </template>
<script> <script>
import Loader from "../../components/Loader"; import Loader from '../../components/Loader'
export default { export default {
name: "MemoIndex", name: 'MemoIndex',
components: { components: {
Loader Loader
}, },
data: function () { data: function () {
return { return {
loading: true, loading: true,
memos: null, memos: null,
}
},
mounted() {
axios.get('/api/memos')
.then(response => {
this.memos = response.data.data
this.loading = false
})
.catch(error => {
this.loading = false
console.log('Unable to fetch memos.')
})
} }
},
mounted() {
// eslint-disable-next-line no-undef
axios.get('/api/memos')
.then(response => {
this.memos = response.data.data
this.loading = false
})
.catch(() => {
this.loading = false
console.log('Unable to fetch memos.')
})
} }
}
</script> </script>

View File

@@ -18,7 +18,7 @@
/> />
<div class="absolute flex flex-col justify-between w-full top-0 bottom-0"> <div class="absolute flex flex-col justify-between w-full top-0 bottom-0">
<div class="flex items-center justify-between p-4"> <div class="flex items-center justify-between p-4">
<router-link to="/memos/" class="btn-secondary">< Back</router-link> <router-link to="/memos/" class="btn-secondary">Back</router-link>
<div class="flex-middle"> <div class="flex-middle">
<router-link :to="'/memos/' + memo.memo_id + '/edit'" class="btn-secondary mr-1" >Edit</router-link> <router-link :to="'/memos/' + memo.memo_id + '/edit'" class="btn-secondary mr-1" >Edit</router-link>
<a href="#" class="btn-alert" @click="modal = ! modal">Delete</a> <a href="#" class="btn-alert" @click="modal = ! modal">Delete</a>
@@ -38,53 +38,55 @@
</template> </template>
<script> <script>
// import TagBox from "../Tag/TagBox"; // import TagBox from "../Tag/TagBox";
import Loader from "../../components/Loader"; import Loader from '../../components/Loader'
let MarkdownIt = require('markdown-it'), let MarkdownIt = require('markdown-it'),
md = new MarkdownIt() md = new MarkdownIt()
.use(require('markdown-it-checkbox')); .use(require('markdown-it-checkbox'))
export default { export default {
name: 'MemoShow', name: 'MemoShow',
components: { components: {
Loader Loader
// TagBox // TagBox
}, },
data: function () { data: function () {
return { return {
loading: true, loading: true,
modal: false, modal: false,
memo: null, memo: null,
} }
}, },
computed: { computed: {
memoMarkdown: function () { memoMarkdown: function () {
return md.render(this.memo.memo) return md.render(this.memo.memo)
} }
}, },
mounted() { mounted() {
axios.get('/api/memos/' + this.$route.params.id) // eslint-disable-next-line no-undef
.then(response => { axios.get('/api/memos/' + this.$route.params.id)
this.memo = response.data.data .then(response => {
this.loading = false this.memo = response.data.data
this.loading = false
})
.catch(errorRes => {
this.loading = false
if (errorRes.response.status === 404) {
this.$router.push('/memos')
}
})
},
methods: {
destroy: function () {
// eslint-disable-next-line no-undef
axios.delete('/api/memos/' + this.$route.params.id)
.then(() => {
this.$router.push('/memos')
}) })
.catch(errorRes => { .catch(errorRes => {
this.loading = false console.log('Internal Error, Unable to delete contact.' + errorRes)
if (errorRes.response.status === 404) {
this.$router.push('/memos')
}
}) })
},
methods: {
destroy: function () {
axios.delete('/api/memos/' + this.$route.params.id)
.then(response => {
this.$router.push('/memos')
})
.catch(errorRes => {
console.log('Internal Error, Unable to delete contact.' + errorRes)
})
}
} }
} }
}
</script> </script>

View File

@@ -22,50 +22,50 @@
</template> </template>
<script> <script>
export default { export default {
name: "OpenWeatherCard", name: 'OpenWeatherCard',
data: function () { data: function () {
return { return {
loading: true, loading: true,
meteo: null, meteo: null,
} }
}, },
methods : { methods : {
dateFormat(date) { dateFormat(date) {
const d = new Date(date) const d = new Date(date)
const dtf = new Intl.DateTimeFormat('fr', { year: '2-digit', month: 'short', day: '2-digit', hour: 'numeric' }) const dtf = new Intl.DateTimeFormat('fr', { year: '2-digit', month: 'short', day: '2-digit', hour: 'numeric' })
const [{ value: mo },,{ value: da },,{ value: ye },,{value: ho }] = dtf.formatToParts(d) const [{ value: mo },,{ value: da },,{value: ho }] = dtf.formatToParts(d)
return `${mo}/${da} - ${ho}h` return `${mo}/${da} - ${ho}h`
} }
}, },
mounted() { mounted() {
let refreshMeteo = false let refreshMeteo = false
if(localStorage.getItem('meteo')) { if(localStorage.getItem('meteo')) {
this.meteo = JSON.parse(localStorage.getItem('meteo')) this.meteo = JSON.parse(localStorage.getItem('meteo'))
let deltaTime = new Date() - new Date(this.meteo.list[0].dt_txt) let deltaTime = new Date() - new Date(this.meteo.list[0].dt_txt)
if (deltaTime/1000/3600 > 3) { if (deltaTime/1000/3600 > 3) {
refreshMeteo = true
}
this.loading = false
console.log('in storage', this.meteo.list[0], this.meteo.list[0].dt_txt)
} else {
refreshMeteo = true refreshMeteo = true
} }
this.loading = false
console.log('in storage', this.meteo.list[0], this.meteo.list[0].dt_txt)
} else {
refreshMeteo = true
}
if (refreshMeteo) { if (refreshMeteo) {
console.log("refreshing meteo data") // eslint-disable-next-line no-undef
axios.get('/api/meteo') axios.get('/api/meteo')
.then(response => { .then(response => {
this.meteo = response.data this.meteo = response.data
this.loading = false this.loading = false
localStorage.setItem('meteo', JSON.stringify(response.data)); localStorage.setItem('meteo', JSON.stringify(response.data))
}) })
.catch(error => { .catch(() => {
console.log('Unable to fetch meteo.') console.log('Unable to fetch meteo.')
}) })
} }
}, },
} }
</script> </script>

View File

@@ -14,30 +14,30 @@
</template> </template>
<script> <script>
export default { export default {
name: "ToDo", name: 'ToDo',
data: function () { data: function () {
return { return {
name: this.toDo.data.attributes.data.name, name: this.toDo.data.attributes.data.name,
errors: null, errors: null,
edit: false, edit: false,
checked: false, checked: false,
}
},
props: {
toDo: {
type: Object,
require: true
},
position: {
type: Number,
require: true
}
},
mounted() {
console.log(this.$key)
} }
},
props: {
toDo: {
type: Object,
require: true
},
position: {
type: Number,
require: true
}
},
mounted() {
console.log(this.$key)
} }
}
</script> </script>
<style scoped> <style scoped>

View File

@@ -9,7 +9,7 @@
</div> </div>
<ToDo v-else <ToDo v-else
v-for="(toDo, indexToDo) in toDoList.data.attributes.data.to_dos.data" v-for="(toDo, indexToDo) in toDoList.data.attributes.data.to_dos.data"
key="indexToDo" :key="indexToDo"
:toDo="toDo" :toDo="toDo"
:position="indexToDo" /> :position="indexToDo" />
</ul> </ul>
@@ -23,54 +23,56 @@
</template> </template>
<script> <script>
import InputField from "../../components/InputField"; import InputField from '../../components/InputField'
import ToDo from "./ToDo"; import ToDo from './ToDo'
export default { export default {
name: "ToDoList", name: 'ToDoList',
components: { components: {
InputField, ToDo InputField, ToDo
},
data: function () {
return {
name: '',
errors: null,
list: null,
edit: false,
}
},
props: {
toDoList: {
type: Object,
require: true
}
},
mounted() {
this.list = this.$el.querySelector('.draggable-list')
console.log(this.list)
},
methods: {
addToDo: function () {
// eslint-disable-next-line no-undef
axios.post('/api/to-do-lists/' + this.toDoList.data.to_do_list_id + '/to-do', {name: this.name})
.then(res => {
this.toDoList.data.attributes.data.to_dos.data.push(res.data)
this.name = ''
})
.catch(errorRes => {
console.log('Internal Error, Unable to delete contact.' + errorRes)
})
}, },
data: function () { deleteToDo: function (toDo, position) {
return { // eslint-disable-next-line no-undef
name: '', axios.delete('/api/to-do-lists/' + this.toDoList.data.to_do_list_id + '/to-do/' + toDo.data.to_do_id)
errors: null, .then(() => {
list: null, this.toDoList.data.attributes.data.to_dos.data.splice(position, 1)
edit: false, })
} .catch(errorRes => {
}, console.log('Internal Error, Unable to delete contact.' + errorRes)
props: { })
toDoList: {
type: Object,
require: true
}
},
mounted() {
this.list = this.$el.querySelector('.draggable-list')
console.log(this.list)
},
methods: {
addToDo: function () {
axios.post('/api/to-do-lists/' + this.toDoList.data.to_do_list_id + '/to-do', {name: this.name})
.then(res => {
this.toDoList.data.attributes.data.to_dos.data.push(res.data)
this.name = ''
})
.catch(errorRes => {
console.log('Internal Error, Unable to delete contact.' + errorRes)
})
},
deleteToDo: function (toDo, position) {
axios.delete('/api/to-do-lists/' + this.toDoList.data.to_do_list_id + '/to-do/' + toDo.data.to_do_id)
.then(res => {
this.toDoList.data.attributes.data.to_dos.data.splice(position, 1)
})
.catch(errorRes => {
console.log('Internal Error, Unable to delete contact.' + errorRes)
})
}
} }
} }
}
</script> </script>

View File

@@ -10,7 +10,7 @@
</div> </div>
</div> </div>
<div class="flex-between flex-center mb-1"> <div class="flex-between flex-center mb-1">
<a href="#" class="btn" @click="$router.back()">< Back</a> <a href="#" class="btn" @click="$router.back()">Back</a>
<a href="#" class="btn-primary" @click="modal = ! modal">Add New List</a> <a href="#" class="btn-primary" @click="modal = ! modal">Add New List</a>
</div> </div>
@@ -27,50 +27,52 @@
</template> </template>
<script> <script>
import Loader from "../../components/Loader"; import Loader from '../../components/Loader'
import InputField from "../../components/InputField"; import InputField from '../../components/InputField'
import ToDoList from "./ToDoList"; import ToDoList from './ToDoList'
export default { export default {
name: "ToDoListIndex", name: 'ToDoListIndex',
components: { components: {
Loader, InputField, ToDoList Loader, InputField, ToDoList
}, },
data: function () { data: function () {
return { return {
loading: true, loading: true,
modal: false, modal: false,
toDoLists: null, toDoLists: null,
name: '', name: '',
errors: null, errors: null,
} }
}, },
mounted() { mounted() {
axios.get('/api/to-do-lists') // eslint-disable-next-line no-undef
axios.get('/api/to-do-lists')
.then(res => {
this.toDoLists = res.data.data
this.loading = false
})
.catch(errorRes => {
this.loading = false
if (errorRes.response.status === 404) {
this.$router.push('/')
}
})
},
methods: {
create: function () {
// eslint-disable-next-line no-undef
axios.post('/api/to-do-lists', {name: this.name})
.then(res => { .then(res => {
this.toDoLists = res.data.data console.log(res)
this.loading = false this.modal = false
this.name = ''
this.toDoLists.push(res.data)
}) })
.catch(errorRes => { .catch(errorRes => {
this.loading = false console.log('Internal Error, Unable to delete contact.' + errorRes)
if (errorRes.response.status === 404) {
this.$router.push('/')
}
}) })
},
methods: {
create: function () {
axios.post('/api/to-do-lists', {name: this.name})
.then(res => {
console.log(res)
this.modal = false
this.name = ''
this.toDoLists.push(res.data)
})
.catch(errorRes => {
console.log('Internal Error, Unable to delete contact.' + errorRes)
})
}
} }
} }
}
</script> </script>

View File

@@ -1,9 +1,9 @@
<template> <template>
<div></div>
</template> </template>
<script> <script>
export default { export default {
name: "ToDoListShow" name: 'ToDoListShow'
} }
</script> </script>

View File

@@ -29,18 +29,18 @@
</template> </template>
<script> <script>
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import UploadableImage from "../../components/UploadableImage"; import UploadableImage from '../../components/UploadableImage'
export default { export default {
name: 'Profil', name: 'Profil',
components: { components: {
UploadableImage UploadableImage
}, },
computed: { computed: {
...mapGetters({ ...mapGetters({
authUser: 'authUser', authUser: 'authUser',
}) })
}, },
} }
</script> </script>

View File

@@ -11,31 +11,28 @@
</template> </template>
<script> <script>
import UploadableImage from "../../components/UploadableImage";
export default { export default {
name: 'Profile', name: 'Profile',
components: { data: function () {
UploadableImage return {
}, loading: true,
data: function () { user: null,
return { }
loading: true, },
user: null, mounted() {
} // eslint-disable-next-line no-undef
}, axios.get('/api/users/' + this.$route.params.id) // eslint-disable-line no-undef-init
mounted() { .then(response => {
axios.get('/api/users/' + this.$route.params.id) this.user = response.data.data
.then(response => { this.loading = false
this.user = response.data.data })
this.loading = false .catch(errorRes => {
}) this.loading = false
.catch(errorRes => { if (errorRes.response.status === 404) {
this.loading = false this.$router.push('/user')
if (errorRes.response.status === 404) { }
this.$router.push('/user') })
} },
}) }
},
}
</script> </script>

View File

@@ -1,108 +1,110 @@
<template> <template>
<div v-if="authUser"> <div v-if="authUser">
<div class="flex m-4"> <div class="flex m-4">
<div class="avatar mr-2"> <div class="avatar mr-2">
<Avatar :avatar="authUser.data.attributes.avatar" size="6xl" :alt="authUser.data.attributes.name" class="w-24 h-24" /> <Avatar :avatar="authUser.data.attributes.avatar" size="6xl" :alt="authUser.data.attributes.name" class="w-24 h-24" />
</div> </div>
<div class="flex flex-col justify-center ml-2"> <div class="flex flex-col justify-center ml-2">
<div><strong>{{ authUser.data.attributes.name }}</strong></div> <div><strong>{{ authUser.data.attributes.name }}</strong></div>
<div><strong>{{ authUser.data.attributes.email }}</strong></div> <div><strong>{{ authUser.data.attributes.email }}</strong></div>
</div>
</div>
<div v-if="authUser.data.attributes.is_admin">
<div class="box-toggle">
<div class="box-toggle-header" @click="userAddToggle = !userAddToggle">
<h2 class="mb-1">Ajouter un membre</h2>
<svg-vue icon="arrow" v-bind:class="{ open: userAddToggle }" />
</div>
<transition name="fade">
<form @submit.prevent="addMember" v-if="userAddToggle" class="box-toggle-content" >
<AlertBox v-if="alertType" :type="alertType" :message="alertMessage" class="mb-1" />
<div class="flex mb-2">
<InputField name="name" label="Nom du nouveau membre" placeholder="Nom" required :errors="errors" @update:field="form.name = $event" class="mr-1" />
<InputField name="email" type="email" label="Adresse email du nouveau membre" placeholder="E-mail" required :errors="errors" @update:field="form.email = $event" class="mr-1" />
<div class="flex items-end mb-2">
<button class="btn-primary">Ajouter</button>
</div>
</div>
</form>
</transition>
</div>
<div class="mb-2 box-toggle">
<div class="box-toggle-header" @click="userListToggle = !userListToggle">
<h2>Liste des utilisateurs</h2>
<svg-vue icon="arrow" v-bind:class="{ open: userListToggle }" />
</div> </div>
<transition name="fade">
<ul v-if="userListToggle" class="box-toggle-content">
<Loader v-if="loading" />
<li v-else v-for="user in users">
<router-link :to="'/users/' + user.data.user_id">{{ user.data.attributes.name }}</router-link> - {{ user.data.attributes.email }} - {{ user.data.attributes.last_login }} | {{ user.data.attributes.is_admin }}
</li>
</ul>
</transition>
</div> </div>
<div>Css Testeur pour constituer un thème : <router-link to="/css-testeur">Css Testeur</router-link></div> <div v-if="authUser.data.attributes.is_admin">
<div class="box-toggle">
<div class="box-toggle-header" @click="userAddToggle = !userAddToggle">
<h2 class="mb-1">Ajouter un membre</h2>
<svg-vue icon="arrow" v-bind:class="{ open: userAddToggle }" />
</div>
<transition name="fade">
<form @submit.prevent="addMember" v-if="userAddToggle" class="box-toggle-content" >
<AlertBox v-if="alertType" :type="alertType" :message="alertMessage" class="mb-1" />
<div class="flex mb-2">
<InputField name="name" label="Nom du nouveau membre" placeholder="Nom" required :errors="errors" @update:field="form.name = $event" class="mr-1" />
<InputField name="email" type="email" label="Adresse email du nouveau membre" placeholder="E-mail" required :errors="errors" @update:field="form.email = $event" class="mr-1" />
<div class="flex items-end mb-2">
<button class="btn-primary">Ajouter</button>
</div>
</div>
</form>
</transition>
</div>
<div class="mb-2 box-toggle">
<div class="box-toggle-header" @click="userListToggle = !userListToggle">
<h2>Liste des utilisateurs</h2>
<svg-vue icon="arrow" v-bind:class="{ open: userListToggle }" />
</div>
<transition name="fade">
<ul v-if="userListToggle" class="box-toggle-content">
<Loader v-if="loading" />
<li v-else v-for="(user, index) in users" :key="index">
<router-link :to="'/users/' + user.data.user_id">{{ user.data.attributes.name }}</router-link> - {{ user.data.attributes.email }} - {{ user.data.attributes.last_login }} | {{ user.data.attributes.is_admin }}
</li>
</ul>
</transition>
</div>
<div>Css Testeur pour constituer un thème : <router-link to="/css-testeur">Css Testeur</router-link></div>
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
import {mapGetters} from 'vuex'; import {mapGetters} from 'vuex'
import Avatar from '../../components/Avatar'; import Avatar from '../../components/Avatar'
import AlertBox from '../../components/AlertBox'; import AlertBox from '../../components/AlertBox'
import InputField from '../../components/InputField'; import InputField from '../../components/InputField'
import Loader from "../../components/Loader"; import Loader from '../../components/Loader'
export default { export default {
name: 'UserAdmin', name: 'UserAdmin',
components: { components: {
Avatar, AlertBox, InputField, Loader Avatar, AlertBox, InputField, Loader
}, },
data: function () { data: function () {
return { return {
form: { form: {
name: '', name: '',
email: '', email: '',
}, },
alertType: '', alertType: '',
alertMessage: '', alertMessage: '',
errors: null, errors: null,
loading: true, loading: true,
users: null, users: null,
userListToggle: false, userListToggle: false,
userAddToggle: false, userAddToggle: false,
} }
}, },
computed: { computed: {
...mapGetters({ ...mapGetters({
authUser: 'authUser', authUser: 'authUser',
})
},
mounted() {
// eslint-disable-next-line no-undef
axios.get('/api/users')
.then(response => {
this.users = response.data.data
this.loading = false
}) })
}, .catch(error => {
mounted() { this.loading = false
axios.get('/api/users') console.log('Unable to fetch users.' + error)
.then(response => { })
this.users = response.data.data },
this.loading = false methods: {
addMember: function () {
// eslint-disable-next-line no-undef
axios.post('/api/users', {name: this.form.name, email: this.form.email})
.then(res => {
this.form.name = ''
this.form.email = ''
this.alertType = 'success'
this.alertMessage = `${res.data.data.attributes.name} a bien été créé`
}) })
.catch(error => { .catch(errors => {
this.loading = false this.errors = errors.response.data.errors
console.log('Unable to fetch users.')
}) })
},
methods: {
addMember: function () {
axios.post('/api/users', {name: this.form.name, email: this.form.email})
.then(res => {
this.form.name = ''
this.form.email = ''
this.alertType = 'success'
this.alertMessage = `${res.data.data.attributes.name} a bien été créé`
})
.catch(errors => {
this.errors = errors.response.data.errors
})
}
} }
} }
}
</script> </script>