Joururi/spellsaurus
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- Api client before I blow my brains out

Browse Source
This commit is contained in:
Alexis
2020-06-12 18:49:26 +02:00
parent f1602e5d95
commit d4674dd463
11 changed files with 213 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
client/api/ingredientsRepository.js Normal file
View File

@@ -0,0 +1,14 @@
import api from './api'
// URL for spells
const resource = "/ingredients"
// CRUD methods for spells
export default {
getIngredients() {
return api.get(`${resource}`)
},
getIngredient(id) {
return api.get(`${resource}/${id}`)
},
}

14
client/api/metaschoolsRepository.js Normal file
View File

@@ -0,0 +1,14 @@
import api from './api'
// URL for spells
const resource = "/meta_schools"
// CRUD methods for spells
export default {
getMetaSchools() {
return api.get(`${resource}`)
},
getMetaSchool(id) {
return api.get(`${resource}/${id}`)
},
}

10
client/api/repositories.js
View File

@@ -1,8 +1,16 @@
import spellsRepository from './spellsRepository'
import schoolsRepository from './schoolsRepository'
import metaschoolsRepository from './metaschoolsRepository'
import variablesRepository from './variablesRepository'
import ingredientsRepository from './ingredientsRepository'
// List of possible repositories
const repositories = {
spells: spellsRepository
spells: spellsRepository,
schools: schoolsRepository,
metaschools: metaschoolsRepository,
variables: variablesRepository,
ingredients: ingredientsRepository,
}
// Usage : RepositoryFactoryInstance.get('reponame');

14
client/api/schoolsRepository.js Normal file
View File

@@ -0,0 +1,14 @@
import api from './api'
// URL for spells
const resource = "/schools"
// CRUD methods for spells
export default {
getSchools() {
return api.get(`${resource}`)
},
getSchool(id) {
return api.get(`${resource}/${id}`)
},
}

6
client/api/spellsRepository.js
View File

@@ -11,4 +11,10 @@ export default {
getSpell(id) {
return api.get(`${resource}/${id}`)
},
addSpell(data) {
return api.post(`${resource}`, data)
},
updateSpell(id, data) {
return api.put(`${resource}/${id}`, data)
}
}

14
client/api/variablesRepository.js Normal file
View File

@@ -0,0 +1,14 @@
import api from './api'
// URL for spells
const resource = "/variables"
// CRUD methods for spells
export default {
getVariables() {
return api.get(`${resource}`)
},
getVariable(id) {
return api.get(`${resource}/${id}`)
},
}

4
client/public/libs/style.css
View File

@@ -1,4 +1,6 @@
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=cyrillic,latin-ext');/*&display=swap*/
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=cyrillic,latin-ext');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@font-face {
font-family: "stgeorge";
src: url("/public/resources/stgeorge.woff2") format("woff2");

6
client/src/assets/scss/_global.scss
View File

@@ -3,14 +3,10 @@
@import '_mixins';
@import '_fonts';
// Theme fonts
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Montserrat:wght@600;700&display=swap');
// RESETS
html {
box-sizing: border-box;
font-size: $font-size-root;
font-family: $font-family;
font-family: $font-family !important;
height: 100%;
-webkit-overflow-scrolling: touch;
line-height: 1.15;

149
client/src/components/spells/edit-spell-card.vue
View File

@@ -1,5 +1,7 @@
<template>
<div class="container-fluid">
<div
:spell="computeSpell"
class="container-fluid">
<div class="p-4">
<!--<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#spell_show_edit_modal">Spell show/edit modal</button>-->
<div class="" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="spell_show_edit_modal" aria-hidden="true">
@@ -12,46 +14,54 @@
</button>
</div>
<div class="modal-body">
<form>
<form id="update-spell" @submit="updateSpell">
<div class="form-group">
<label for="spell_name" class="font-weight-bold col-form-label">Nom&nbsp;:</label>
<input type="text" class="form-control" name="spell_name" id="spell_name" placeholder="(256 caractères max.)" v-bind:value="spell.name">
<input type="text" class="form-control" name="spell_name" id="spell_name" placeholder="(256 caractères max.)" v-model="spell.name">
</div>
<div class="form-group">
<label for="spell_description" class="font-weight-bold col-form-label">Description&nbsp;:</label>
<textarea class="form-control" name="spell_description" id="spell_description" placeholder="(2048 caractères max.)" v-bind:value="spell.description"></textarea>
<textarea class="form-control" name="spell_description" id="spell_description" placeholder="(2048 caractères max.)" v-model="spell.description"></textarea>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="spell_rituel" v-model="spell.is_ritual">
<label for="spell_ritual" class="font-weight-bold col-form-label">Rituel ?&nbsp;:</label>
</div>
<div class="form-group">
<label for="spell_level" class="font-weight-bold col-form-label">Niveau&nbsp;:</label>
<input type="number" class="form-control" name="spell_level" id="spell_level" min="0" max="100" step="1" placeholder="(Nombre entier de 0 à 100)" v-bind:value="spell.level">
<input type="number" class="form-control" name="spell_level" id="spell_level" min="0" max="100" step="1" placeholder="(Nombre entier de 0 à 100)" v-model="spell.level">
</div>
<div class="form-group">
<label for="spell_schools" class="font-weight-bold col-form-label">École(s)&nbsp;:</label>
<select class="form-control" id="spell_schools" name="spell_schools" multiple>
<option value="1">Lumomancie</option>
<option value="2">Vitamancie</option>
<select class="form-control" id="spell_schools" name="spell_schools" multiple v-model="spell_school_ids">
<option v-for="(school,index) in all_schools" :key="index" :value="'school_' + school.id">{{school.name}}</option>
</select>
</div>
<div class="form-group">
<label for="spell_charge" class="font-weight-bold col-form-label">Charge&nbsp;:</label>
<input type="number" class="form-control" name="spell_charge" id="spell_charge" min="0" max="100" step="1" placeholder="(Nombre entier de 0 à 100)" v-bind:value="spell.charge">
<input type="number" class="form-control" name="spell_charge" id="spell_charge" min="0" max="100" step="1" placeholder="(Nombre entier de 0 à 100)" v-model="spell.charge">
</div>
<div class="form-group">
<label for="spell_ingredients" class="font-weight-bold col-form-label">Ingrédient(s)&nbsp;:</label>
<select class="form-control" id="spell_ingredients" name="spell_ingredients" multiple>
<option value="1">Langue de salamandre</option>
<option value="2">Geste</option>
<select class="form-control" id="spell_ingredients" name="spell_ingredients" multiple v-model="spell_ingredient_ids">
<option v-for="(ingredient,index) in all_ingredients" :key="index" :value="'ingredient_' + ingredient.id">{{ingredient.name}}</option>
</select>
</div>
<div class="form-group">
<label for="spell_cost" class="font-weight-bold col-form-label">Coût&nbsp;:</label>
<input type="text" class="form-control" name="spell_cost" id="spell_cost" placeholder="(32 caractères max.)" v-bind:value="spell.cost">
<input type="text" class="form-control" name="spell_cost" id="spell_cost" placeholder="(32 caractères max.)" v-model="spell.cost">
</div>
<div class="form-group">
<label for="spell_variables" class="font-weight-bold col-form-label">Variables(s)&nbsp;:</label>
<select class="form-control" id="spell_variables" name="spell_variables" multiple v-model="spell_variable_ids">
<option v-for="(variable,index) in all_variables" :key="index" :value="'variable_' + variable.id">{{variable.description}}</option>
</select>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
<button type="button" class="btn btn-primary">Enregistrer</button>
<input type="submit" class="btn btn-primary" value="Enregistrer" form="update-spell">
<button type="button" class="btn btn-danger">Supprimer</button>
</div>
</div>
@@ -62,14 +72,119 @@
</template>
<script>
// API
import { RepositoryFactory } from "../../../api/repositories"
const Spells = RepositoryFactory.get('spells')
const Schools = RepositoryFactory.get('schools')
const Variables = RepositoryFactory.get('variables')
const Ingredients = RepositoryFactory.get('ingredients')
export default {
name: 'edit-spell-card',
props: {
spell: Object,
spell: {
type: Object,
required: true,
id: Number,
name: String,
description: String,
is_ritual: Boolean,
schools: Array,
variables: Array,
ingredients: Array,
},
},
data() {
return {
all_schools: [],
all_variables: [],
all_ingredients: [],
spell_school_ids: [],
spell_variable_ids: [],
spell_ingredient_ids: [],
}
},
computed: {
computeSpell() {
let output = this.spell
console.log(output)
return output
}
},
created() {
let fetchSchools = Schools.getSchools()
let fetchVariables = Variables.getVariables()
let fetchIngredients = Ingredients.getIngredients()
Promise.all([fetchSchools, fetchVariables, fetchIngredients])
.then(v => {
this.all_schools = v[0].data
this.all_variables = v[1].data
this.all_ingredients = v[2].data
this.getAssociatedValues(this.spell)
})
.catch(err => {
console.log(err)
})
},
mounted() {
},
watch: {
spell: {
deep: true,
handler() {
this.getAssociatedValues(this.spell)
}
}
},
methods: {
setSpell(spell) {
this.spell = spell
},
getAssociatedValues(spell) {
this.spell_school_ids = []
this.spell_variable_ids = []
this.spell_ingredient_ids = []
spell.schools.forEach(element => {
this.spell_school_ids.push(element['id'])
})
spell.variables.forEach(element => {
this.spell_variable_ids.push(element['id'])
})
spell.ingredients.forEach(element => {
this.spell_ingredient_ids.push(element['id'])
})
},
updateSpell(e) {
e.preventDefault()
let schoolsData = Object.values(this.spell_school_ids).map(v => { return parseInt(v.slice(7)) })
let variablesData = Object.values(this.spell_variable_ids).map(v => { return parseInt(v.slice(9)) })
let ingredientsData = Object.values(this.spell_ingredient_ids).map(v => { return parseInt(v.slice(11)) })
let data = {
name: this.spell.name,
description: this.spell.description,
is_ritual: !!+this.spell.is_ritual,
schools: schoolsData,
variables: variablesData,
ingredients: ingredientsData,
}
Spells.updateSpell(this.spell.id, data)
.then(v => {
this.setSpell(v.data)
})
}
}
}
</script>
<style>
<style lang="scss" scoped>
textarea, select {
min-height: 10rem;
}
</style>

11
client/src/components/spells/spells-list.vue
View File

@@ -3,7 +3,7 @@
<div v-masonry transition-duration=".5s" item-selector=".spell-card" class="row spells-list">
<spell-card v-masonry-tile class="spell-card" v-for="(spell, index) in spells" :key="index" v-bind:spell="spell" @editSpell="editSpell"/>
</div>
<edit-spell-card v-bind:spell="active_spell"/>
<edit-spell-card v-if="Object.keys(active_spell).length > 0" v-bind:spell="active_spell"/>
</div>
</template>
@@ -14,7 +14,7 @@ import EditSpellCard from "./edit-spell-card"
// API
import { RepositoryFactory } from "../../../api/repositories"
const spellsRepository = RepositoryFactory.get('spells')
const Spells = RepositoryFactory.get('spells')
export default {
name: 'spellslist',
@@ -36,11 +36,7 @@ export default {
},
methods: {
async fetchSpells() {
const { data } = await spellsRepository.getSpells()
return data
},
async fetchSpell(id) {
const { data } = await spellsRepository.getSpell(id)
const { data } = await Spells.getSpells()
return data
},
async computeSpells() {
@@ -51,7 +47,6 @@ export default {
},
async editSpell(e) {
this.active_spell = e;
console.log(this.active_spell)
}
}
}

3
client/src/main.js
View File

@@ -17,6 +17,9 @@ window.jquery = jquery
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/js/bootstrap.js'
// Styles
import './assets/scss/_global.scss'
Vue.config.productionTip = false
Vue.use(VueRouter)
Vue.use(VueMasonryPlugin)