From e13261951f51c1251450fbc823e3c51dc5091b32 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Matheus=20S=2E=20Silva?= Date: Sun, 6 Jun 2021 11:27:15 -0300 Subject: [PATCH 1/2] =?UTF-8?q?Integrando=20lan=C3=A7amentos=20na=20Home?= =?UTF-8?q?=20e=20adicionando=20dinamicidade?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Ajustar a label dos valores, formatando a data dos lançamentos --- src/app/pages/home/home.page.html | 47 +++++---------------- src/app/pages/home/home.page.ts | 70 +++++++++++++++++++++++-------- 2 files changed, 63 insertions(+), 54 deletions(-) diff --git a/src/app/pages/home/home.page.html b/src/app/pages/home/home.page.html index f5928e8..0e42d6d 100644 --- a/src/app/pages/home/home.page.html +++ b/src/app/pages/home/home.page.html @@ -13,7 +13,7 @@ -

Gasto total

+

{{ labelValorD }}

R$ {{ valorDinamico }}

 @@ -26,10 +26,10 @@

R$ {{ valorDinamico }}

mode="ios" swipeGesture="true" > - + Renda - + Gastos @@ -40,41 +40,16 @@

R$ {{ valorDinamico }}

 Últimas transações - + - + + diff --git a/src/app/pages/home/home.page.ts b/src/app/pages/home/home.page.ts index 7613159..c456823 100644 --- a/src/app/pages/home/home.page.ts +++ b/src/app/pages/home/home.page.ts @@ -1,38 +1,38 @@ import { Component, OnInit, ElementRef, ViewChild } from '@angular/core'; import { Chart } from 'chart.js'; +import { LocalStorageService } from '../../service/local-storage-service.service'; +import { Lancamento } from '../../interface/lancamento'; @Component({ selector: 'app-home', templateUrl: './home.page.html', styleUrls: ['./home.page.scss'], }) export class HomePage implements OnInit { - constructor() {} + constructor(private LocalStorageService: LocalStorageService) {} @ViewChild('graficoLinha') graficoLinha: ElementRef; estadoCategoria: string; valorDinamico: number; + labelValorD: string; dadosGrafico: number[]; corGrafico: string; grafico: any; + storage: any; + listaLancamentos: Array; + legendasGrafico: string[]; - //deixando ponto para integração com o local storage - enderecoImgCard: string; - dataCard: string; - tituloCard: string; - valorCard: string; - - ngOnInit() { - this.estadoCategoria = 'renda'; - this.valorDinamico = 12000; + async ngOnInit() { + this.storage = this.LocalStorageService; + this.estadoCategoria = 'entrada'; } - ionViewDidEnter() { + async ionViewDidEnter() { + await this.retornaTodosLancamentos(); this.trocarDadosGrafico(); this.criarGrafico(); } mudarCategoriaHome(ev: any) { - console.log('Nova categoria: ', ev.detail.value); this.trocarDadosGrafico(); this.criarGrafico(); } @@ -41,7 +41,7 @@ export class HomePage implements OnInit { this.grafico = new Chart(this.graficoLinha.nativeElement, { type: 'line', data: { - labels: ['Jan', 'Fev', 'Mar', 'Abril'], + labels: this.legendasGrafico, datasets: [ { label: this.estadoCategoria.toUpperCase(), @@ -70,20 +70,54 @@ export class HomePage implements OnInit { }); } - //Mais para frente esses dados irão vir da storage offline + //TODO: Ajustar a label dos valores trocarDadosGrafico() { + let entradas = { + valores: [], + data: [], + total: 0 + }; + let saidas = { + valores: [], + data: [], + total: 0 + }; + if (this.listaLancamentos) { + this.listaLancamentos.forEach((el) => { + if (el.tipoTransacao == 'entrada') { + entradas.valores.push(el.valor); + entradas.data.push(el.diaCompra); + entradas.total += el.valor; + } else { + saidas.data.push(el.diaCompra); + saidas.valores.push(el.valor); + saidas.total += el.valor; + } + }); + } + switch (this.estadoCategoria) { - case 'renda': - this.dadosGrafico = [1500, 3500, 4800, 3000]; + case 'entrada': + this.dadosGrafico = entradas.valores; + this.legendasGrafico = entradas.data; this.corGrafico = '#42d77d'; + this.labelValorD = 'Ganhos totais'; + this.valorDinamico = entradas.total; + break; - case 'gasto': - this.dadosGrafico = [800, 4500, 300, 800]; + case 'saida': + this.dadosGrafico = saidas.valores; + this.legendasGrafico = saidas.data; this.corGrafico = '#ed576b'; + this.labelValorD = 'Gastos totais'; + this.valorDinamico = saidas.total; break; default: this.dadosGrafico = [0]; break; } } + async retornaTodosLancamentos() { + this.listaLancamentos = await this.storage.retornaTodosLancamentos(); + } } From 7e20a2b6921086e08b446d07f23498e9e1488062 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Matheus=20S=2E=20Silva?= Date: Sun, 6 Jun 2021 12:52:22 -0300 Subject: [PATCH 2/2] =?UTF-8?q?Ajustando=20a=20forma=20de=20como=20os=20la?= =?UTF-8?q?n=C3=A7amentos=20s=C3=A3o=20listados?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/pages/home/home.page.html | 2 +- src/app/pages/home/home.page.ts | 11 ++++++++--- .../service/local-storage-service.service.ts | 18 +++++++++++------- 3 files changed, 20 insertions(+), 11 deletions(-) diff --git a/src/app/pages/home/home.page.html b/src/app/pages/home/home.page.html index 0e42d6d..b569482 100644 --- a/src/app/pages/home/home.page.html +++ b/src/app/pages/home/home.page.html @@ -40,7 +40,7 @@

R$ {{ valorDinamico }}

Últimas transações -
+
; + listaLancamentosCard: Array; legendasGrafico: string[]; async ngOnInit() { @@ -75,12 +76,12 @@ export class HomePage implements OnInit { let entradas = { valores: [], data: [], - total: 0 + total: 0, }; let saidas = { valores: [], data: [], - total: 0 + total: 0, }; if (this.listaLancamentos) { this.listaLancamentos.forEach((el) => { @@ -118,6 +119,10 @@ export class HomePage implements OnInit { } } async retornaTodosLancamentos() { - this.listaLancamentos = await this.storage.retornaTodosLancamentos(); + let arr = await this.storage.retornaTodosLancamentos(); + console.log(arr) + this.listaLancamentos = arr; + this.listaLancamentosCard = arr.slice().sort((a: Lancamento, b: Lancamento) => + new Date(b.diaCompra).getTime() - new Date(a.diaCompra).getTime()) } } diff --git a/src/app/service/local-storage-service.service.ts b/src/app/service/local-storage-service.service.ts index 144d1e3..4a1076c 100644 --- a/src/app/service/local-storage-service.service.ts +++ b/src/app/service/local-storage-service.service.ts @@ -1,11 +1,11 @@ import { Injectable } from '@angular/core'; import { Storage } from '@ionic/storage-angular'; +import { Lancamento } from '../interface/lancamento'; @Injectable({ - providedIn: 'root' + providedIn: 'root', }) export class LocalStorageService { - private _storage: Storage | null = null; constructor(private storage: Storage) { @@ -27,9 +27,14 @@ export class LocalStorageService { //Função para adicionar lançamento public addLancamento(value: any) { - return this.retornaTodosLancamentos().then(result => { - if(result) { + return this.retornaTodosLancamentos().then((result) => { + if (result) { result.push(value); + //Deixando os lancamentos em ordem crescente + result.sort( + (a: Lancamento, b: Lancamento) => + new Date(a.diaCompra).getTime() - new Date(b.diaCompra).getTime() + ); return this._storage.set('lancamentos', result); } else { return this._storage.set('lancamentos', [value]); @@ -39,7 +44,7 @@ export class LocalStorageService { //Para excluir um lançamento, apenas passe o ID public delLancamento(id: any) { - return this.retornaTodosLancamentos().then(result => { + return this.retornaTodosLancamentos().then((result) => { if (result) { var index = result.indexOf(id); result.splice(index, 1); @@ -48,7 +53,7 @@ export class LocalStorageService { }); } //Função que retorna todos os lançamentos em um array de objetos - public retornaTodosLancamentos(){ + public retornaTodosLancamentos() { return this._storage.get('lancamentos'); } @@ -56,5 +61,4 @@ export class LocalStorageService { public removerChave(key: string) { this._storage?.remove(key); } - }