import { createWebHistory, createRouter } from "vue-router";
import MiVacunaApp from '../components/MiVacunaApp.vue';
import Estadistica from '../components/Estadistica.vue';



const routes = [{
        path: "/",
        name: "MiVacunaApp",
        component: MiVacunaApp,
    },
    {
        path: "/estadistica",
        name: "Estadistica",
        component: Estadistica,
    }
];

const router = createRouter({
    history: createWebHistory(),
    routes,
});

export default router;
     
     
     
     
       
   

 
           
          
   import { createApp } from 'vue'
import App from './App.vue'
import router from './router';
import PrimeVue from 'primevue/config';
import ToastService from 'primevue/toastservice';
import Panel from 'primevue/panel';
import InputText from 'primevue/inputtext';
import InputNumber from 'primevue/inputnumber';
import Button from 'primevue/button';
import Toast from 'primevue/toast';
import Breadcrumb from 'primevue/breadcrumb';
import DataTable from 'primevue/datatable';
import Column from 'primevue/column';
import ColumnGroup from 'primevue/columngroup';

import 'primevue/resources/themes/bootstrap4-light-blue/theme.css';
import 'primevue/resources/primevue.min.css';
import 'primeicons/primeicons.css';




const app = createApp(App);
app.use(PrimeVue);
app.use(router);
app.use(ToastService);
app.component('Panel', Panel);
app.component('InputText', InputText);
app.component('InputNumber', InputNumber);
app.component('Button', Button);
app.component('Toast', Toast);
app.component('Breadcrumb', Breadcrumb);
app.component('DataTable', DataTable);
app.component('Column', Column);
app.component('ColumnGroup', ColumnGroup);
app.mount('#app')         
      
          
   

 
               
    <template>
  <div id="app" style="margin:0 auto;width:80%" >
     <Breadcrumb :home="home" :model="items" /> 
         <router-view></router-view>
  </div>
</template>

<script>
import Breadcrumb from 'primevue/breadcrumb';

export default {
  name: 'App',
  components: {
    Breadcrumb
  },
  setup(){
    return{
      items: [
                 {label:'Preregistro',icon: 'pi pi-book',to:'/'},
                {label:'Estadística',icon:'pi pi-chart-bar',to:'/estadistica'}
                
            ],

    };


  }
}
</script>

<style>

</style>        
            
        
   

 
                      
            
            
      import axios from 'axios';

export default class Poblacion2021Service {

    url = "http://localhost:8080/api/poblacion2021/";


    insertarPoblacion2021(poblacion) {

        return axios.post(this.url + "save", poblacion, {
            headers: {
                'Content-Type': 'application/json'
            }
        });
    }

    getDatosEstadisticos(codigoPostal) {


        return axios.get(this.url + "mostrar/" + codigoPostal);
    }


}      
            
            
            
            
      
   

 
               
     <template>
    <div style="margin:0 auto;width:70%">
        <Panel header="Estadística Mi Vacuna Covid 2021">
         
          <span class="p-float-label">
          <InputNumber  id="codigoPostal"  v-model="codigoPostal" 
          class="p-invalid"  />
        <label for="codigoPostal">Código Postal</label>
         </span>
         <br/> <br/>

        <Button label="Mostrar Datos" icon="pi pi-check" @click="buscar" />
         <br/> <br/>
         <Button label="Volve a calcular" icon="pi pi-trash" @click="limpiar" />  

        <div class="card">

          <h4>El Número de personas registradas es : {{counterPersona.totalPoblacion}}</h4>

          <h5>El Número de personas registradas en el codigo postal  {{codigoPostal }} es : {{counterPersona.totalCodigoPostal}}</h5>


            <DataTable :value="personas" :paginator="true" :rows="10">
        <Column field="edad" header="Edad de Personas"></Column>
        <Column field="cantidad" header="Cantidad de personas"></Column>
        <Column field="porcentaje" header="Porcentaje de personas">
        <template #body="slotProps">
                {{slotProps.data.porcentaje}}%
            </template>
        
        
        </Column>
        
      </DataTable>

          
          
           


          






        </div>



        


       
        </Panel>






    </div>
</template>

<script>
import Poblacion2021Service from "../service/Poblacion2021Service";

    export default{
        name : "Estadistica",
        data(){
            return{
             
              codigoPostal:null,
              counterPersona:{
                  totalPoblacion:null,
                  totalCodigoPostal:null,
                  totalEdad:null,
                  porcentajeEdad:null

              },
             personas:[],
             edad:18  
            };
        },
       
        poblacion2021Service:null,
        created(){
            this.poblacion2021Service=new Poblacion2021Service();
        },
         
        methods:{

            buscar(){
           
           
               if (!this.codigoPostal){
               alert("Debes agregar el código postal!");
               return;
               }
               

                this.poblacion2021Service.getDatosEstadisticos(this.codigoPostal).then(data => {
                 this.counterPersona = data.data;
                 

                 for(var i in this.counterPersona.totalEdad){
                 this.personas.push({edad:this.edad,cantidad:this.counterPersona.totalEdad[i],
                 porcentaje:this.counterPersona.porcentajeEdad[i]});
                       this.edad++;
                 }
                                  


      });
          
             


           },
           limpiar(){
             this.personas.length=0;
              this.codigoPostal=null;
              this.counterPersona.totalPoblacion=null;
              this.counterPersona.totalCodigoPostal=null;
              this.edad=18;
           }
            
        }

        
        };


    


</script>