Skip to content

Commit

Permalink
frontend: Ultimos ajustes nos estilos
Browse files Browse the repository at this point in the history
  • Loading branch information
@Eslley
Eslley committed Aug 19, 2022
1 parent 2ef5a40 commit bf2cbc8
Show file tree
Hide file tree
Showing 7 changed files with 238 additions and 56 deletions.
3 changes: 1 addition & 2 deletions zssnfront/src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
</nav>

<Itens v-show="page == 'itens'" />
<Sobreviventes v-if="page == 'sobreviventes'" />
<Sobreviventes v-show="page == 'sobreviventes'" />
<Inventarios v-if="page == 'inventarios'" />
<Comercio v-if="page == 'comercio'"/>
<Relatorios v-if="page == 'relatorios'" />
Expand Down Expand Up @@ -58,7 +58,6 @@ export default {
Sobreviventes,
Inventarios,
Relatorios,
Comercio,
Comercio
}
Expand Down
99 changes: 71 additions & 28 deletions zssnfront/src/components/Comercio.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@

<Message :msg="msg" v-show="msg"/>

<Loading :isLoading="isLoading"/>

<div class="row two-inputs">

<div class="col m6 s12">
Expand All @@ -29,20 +31,29 @@
<span class="card-title">Sobrevivente: {{ sobrevivente1.sobrevivente }}</span>

<span>Inventário</span>
<div class="collection">
<a href="#!" v-for="(item, index) in sobrevivente1.itens" :key="item.index" class="collection-item">
{{ item.item.nome }}: {{item.item.pontos}} pontos <span class="badge">{{ item.quantidade }}
<button @click="addItem1(item, index)" class="waves-effect waves-light btn-small">Ofertar 1<i class="material-icons left">arrow_forward</i></button></span>
</a>
</div>
<ul class="collection">
<li v-for="(item, index) in sobrevivente1.itens" :key="item.index" class="collection-item">
<div> <span class="item-name">{{ item.item.nome }}: {{item.quantidade}}x</span>
<a @click="addItem1(item, index)" href="#!" class="secondary-content">
<i class="material-icons">arrow_forward</i>
<span>Ofertar 1</span>
</a>
</div>
</li>
</ul>

<span>Itens Ofertados:</span>
<div class="collection">
<a href="#!" v-for="(item, index) in comercio.sobrevivente1.itens" :key="item.index" class="collection-item">
{{ item.item.nome }}: <span class="badge">Quantidade {{ item.quantidade }}
<button @click="removeItem1(index)" class=" btn-small">Retirar 1<i class="material-icons left">arrow_back</i></button></span>
</a>
</div>
<ul class="collection">
<li v-for="(item, index) in comercio.sobrevivente1.itens" :key="item.index" class="collection-item">
<div>
<span class="item-name">{{ item.item.nome }}: {{item.quantidade}}x</span>
<a @click="removeItem1(index)" href="#!" class="secondary-content">
<i class="material-icons">arrow_back</i>
<span>Retirar 1</span>
</a>
</div>
</li>
</ul>

<div class="center-align total-pontos white"><span class="">Total de Pontos Ofertados: {{ totalPontos1 }}</span></div>
</div>
Expand All @@ -55,22 +66,28 @@
<span class="card-title">Sobrevivente: {{ sobrevivente2.sobrevivente }}</span>

<span>Inventário</span>
<div class="collection">
<a href="#!" v-for="(item, index) in sobrevivente2.itens" :key="item.index" class="collection-item ">
{{ item.item.nome }}: {{item.item.pontos}} pontos
<span class="badge">{{ item.quantidade }}
<button @click="addItem2(item, index)" class="waves-effect waves-light btn-small">Ofertar 1<i class="material-icons left">arrow_forward</i></button>
</span>
</a>
</div>
<ul class="collection">
<li v-for="(item, index) in sobrevivente2.itens" :key="item.index" class="collection-item">
<div> <span class="item-name">{{ item.item.nome }}: {{item.quantidade}}x</span>
<a @click="addItem2(item, index)" href="#!" class="secondary-content">
<i class="material-icons">arrow_forward</i>
<span>Ofertar 1</span>
</a>
</div>
</li>
</ul>

<span>Itens Ofertados:</span>
<div class="collection">
<a href="#!" v-for="(item, index) in comercio.sobrevivente2.itens" :key="item.index" class="collection-item">
{{ item.item.nome }}: <span class="badge">Quantidade {{ item.quantidade }}
<button @click="removeItem2(index)" class="waves-effect waves-light btn-small">Retirar 1<i class="material-icons left">arrow_back</i></button></span>
</a>
</div>
<ul class="collection">
<li href="#!" v-for="(item, index) in comercio.sobrevivente2.itens" :key="item.index" class="collection-item">
<div> <span class="item-name">{{ item.item.nome }}: {{item.quantidade}}x</span>
<a @click="removeItem2(index)" href="#!" class="secondary-content">
<i class="material-icons">arrow_forward</i>
<span>Retirar 1</span>
</a>
</div>
</li>
</ul>

<div class="center-align total-pontos white"><span>Total de Pontos Ofertados: {{ totalPontos2 }}</span></div>
</div>
Expand All @@ -92,6 +109,7 @@
import Comercio from '../services/comercio';
import Inventarios from '../services/inventarios';
import Message from './Message.vue'
import Loading from './Loading.vue'
export default {
name: "Comercio",
Expand All @@ -114,12 +132,14 @@
sobrevivente: "",
itens: []
}
}
},
isLoading: false
}
},
components: {
Message
Message,
Loading
},
methods: {
Expand All @@ -135,13 +155,16 @@
},
buscar() {
this.isLoading = true
this.sobrevivente1 = {}
this.sobrevivente2 = {}
this.totalPontos1 = 0
this.totalPontos2 = 0
if(this.id1 == this.id2 || this.id1 == "" || this.id2 == "" ){
this.showMessage("Preencha os campos corretamente!")
this.isLoading = false
} else {
Inventarios.getInventario(this.id1).then(response => {
Expand All @@ -155,14 +178,17 @@
this.sobrevivente1 = response.data
this.sobrevivente2 = response2.data
this.isLoading = false
}
}).catch(err => {
this.isLoading = false
this.showMessage("Erro ao buscar sobrevivente!")
if(err.response.data.message) {
this.showMessage((err.response.data.message))
}
})
}).catch(err => {
this.isLoading = false
this.showMessage("Erro ao buscar sobrevivente!")
if(err.response.data.message) {
this.showMessage((err.response.data.message))
Expand Down Expand Up @@ -216,6 +242,7 @@
},
requestTroca() {
this.isLoading = true
if(this.totalPontos1 == this.totalPontos2) {
this.comercio.sobrevivente1.sobrevivente = this.sobrevivente1.sobreviventeId
Expand All @@ -224,6 +251,7 @@
this.preComercio()
Comercio.trocar(this.comercio).then(response => {
this.isLoading = false
if(response.status == 200) {
this.showMessage("Troca realizada com sucesso!")
this.clearData()
Expand All @@ -236,6 +264,7 @@
}
})
} else {
this.isLoading = false
this.showMessage("A quantidade de pontos oferecidos é diferente!");
}
Expand Down Expand Up @@ -295,5 +324,19 @@
margin-left: 10px;
}
.collection-tem span {
color: black !important;
}
.item-name {
color: #26a69a;
}
li .secondary-content {
display: flex;
}
.collection .collection-item {
padding: 7px 7px;
}
</style>

16 changes: 13 additions & 3 deletions zssnfront/src/components/Inventarios.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,9 @@

<div class="container">

<h4 class="center-align subtitle-page"><i class="material-icons">domain</i> Inventários</h4>
<h4 class="center-align subtitle-page"><i class="material-icons">domain</i> Inventários</h4>

<Loading :isLoading="isLoading"/>

<table class="center">

Expand Down Expand Up @@ -41,26 +43,34 @@
<script>
import Inventarios from '../services/inventarios'
import Loading from './Loading.vue'
export default {
name: "Inventarios",
data() {
return {
inventarios: []
inventarios: [],
isLoading: false
}
},
components: {
Loading
},
mounted() {
this.getInventarios()
},
methods: {
getInventarios() {
this.isLoading = true
Inventarios.listar().then(response => {
this.inventarios = response.data.inventarios
this.isLoading = false
}).catch(err => {
this.isLoading = false
})
}
}
Expand Down
21 changes: 18 additions & 3 deletions zssnfront/src/components/Itens.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@

<Message :msg="msg" v-show="msg" />

<Loading :isLoading="isLoading"/>

<form @submit.prevent="salvar">

<div class="row">
Expand Down Expand Up @@ -77,6 +79,7 @@
import Itens from '../services/itens';
import Message from './Message.vue';
import Loading from './Loading.vue'
export default {
name: 'Itens',
Expand All @@ -90,12 +93,14 @@
itens: [],
errors: [],
msg: "",
itemD: {}
itemD: {},
isLoading: false
}
},
components: {
Message
Message,
Loading
},
mounted() {
Expand All @@ -110,35 +115,45 @@
},
listar() {
this.isLoading = true
Itens.listar().then(response => {
this.itens = response.data;
this.isLoading = false
})
},
salvar() {
this.isLoading = true
Itens.salvar(this.item).then(response => {
if(response.status == 201) {
this.listar()
this.item = {}
this.showMessage("Item adicionado!")
}
this.isLoading = false
}).catch(err => {
this.showMessage("Erro ao salvar")
this.errors = err.response.data
this.isLoading = false
})
},
deletar() {
this.isLoading = true
Itens.deletar(this.itemD).then(response => {
if(response.status == 200) {
this.listar()
this.showMessage("Item deletado!")
}
}
this.isLoading = false
}).catch(err => {
this.showMessage("Erro ao deletar")
this.isLoading = false
})
}
Expand Down
40 changes: 40 additions & 0 deletions zssnfront/src/components/Loading.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
<template>
<div class="loading">
<div v-if="isLoading" class="preloader-wrapper big active">
<div class="spinner-layer spinner-blue-only">
<div class="circle-clipper left">
<div class="circle"></div>
</div><div class="gap-patch">
<div class="circle"></div>
</div><div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>

</div>
</div>
</template>

<script>
export default {
name: "Loading",
props: {
isLoading: false
}
}
</script>

<style>
.loading {
position: fixed;
top: 50%;
left: 50%;
margin: -25px 0 0 -25px;left: 50%;
top: 50%;
background-color: rgba(0, 0reen, 0lue, 0.5);
}
</style>
Loading

0 comments on commit bf2cbc8

Please sign in to comment.