implementación route

Eric Fernandez
1 parent bd9b0091aa
Showing 22 changed files with 188 additions and 84 deletions Show diff stats
package-lock.json
package.json
src/app/app-routing.module.ts
src/app/app.component.html
src/app/app.module.ts
src/app/boton-service.service.ts
src/app/botonera/botonera.component.css
src/app/botonera/botonera.component.html
src/app/botonera/botonera.component.ts
src/app/comprobantes/comprobantes.component.css
src/app/comprobantes/comprobantes.component.html
src/app/comprobantes/comprobantes.component.spec.ts
src/app/comprobantes/comprobantes.component.ts
src/app/lista-comprobantes/lista-comprobantes.component.css
src/app/lista-comprobantes/lista-comprobantes.component.html
src/app/lista-comprobantes/lista-comprobantes.component.spec.ts
src/app/lista-comprobantes/lista-comprobantes.component.ts
src/assets/img/comprobante.png
src/assets/img/logo.png
src/img/logo.png
@@ -3540,6 +3540,11 @@
         }
       }
     },
+    "font-awesome": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
+      "integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM="
+    },
     "for-each": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
@@ -21,6 +21,7 @@
     "@angular/router": "~8.0.0",
     "@ng-bootstrap/ng-bootstrap": "^4.2.0",
     "cordova-android": "^8.0.0",
+    "font-awesome": "^4.7.0",
     "rxjs": "~6.4.0",
     "tslib": "^1.9.0",
     "zone.js": "~0.9.1"
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
+import { ComprobantesComponent } from './comprobantes/comprobantes.component';
+import { AppBotonera } from './botonera/botonera.component';
  
-const routes: Routes = [];
+const routes: Routes = [
+  { path: 'comprobantes', component: ComprobantesComponent, pathMatch: 'full' },
+  { path: '', redirectTo: 'home', pathMatch: 'full' },
+  { path: 'home', component: AppBotonera }
+];
  
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
 <!--The content below is only a placeholder and can be replaced.-->
-<div style="text-align:center" class="body-background">
-  <h1>
-    Gestión comprobantes DEBO
-    <app-botonera></app-botonera>
-  </h1>
+<div style="text-align:center" class="body-background container">
+  <router-outlet></router-outlet>
 </div>
-
-<router-outlet></router-outlet>
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { HttpClientModule } from '@angular/common/http';
  
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-import { ListaComprobantesComponent } from './lista-comprobantes/lista-comprobantes.component';
 import { AppBotonera } from './botonera/botonera.component';
+import { ComprobantesComponent } from './comprobantes/comprobantes.component';
  
 @NgModule({
   declarations: [
     AppComponent,
-    ListaComprobantesComponent,
-    AppBotonera
+    AppBotonera,
+    ComprobantesComponent
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
-    NgbModule
+    NgbModule,
+    HttpClientModule
   ],
   providers: [],
   bootstrap: [AppComponent, AppBotonera]
@@ -0,0 +1,15 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class BotonServiceService {
+
+  constructor(private http: String) { }
+
+  getBotones() {
+    // return this.http.get('http://localhost:5555/comprobantes');
+    return [1];
+  }
+}
@@ -0,0 +1,54 @@
+.botonera-principal-comprobante {
+  background-image: url('/assets/img/comprobante.png');
+  background-size: 90px 90px;
+  display: inline-block;
+  text-align: center;
+  border-radius: 12px;
+  border-width: 0;
+  height: 90px;
+  position: relative;
+  width: 90px;
+  outline: 0;
+}
+.botonera-principal-comprobante:hover {
+  background-color:rgb(250,250,250);
+  filter:drop-shadow(4px 4px 4px gray);
+}
+.botonera-principal-comprobante:active {
+  background-color: rgb(230, 230, 230);
+  filter:drop-shadow(4px 4px 4px gray);
+}
+@media (min-width: 992px) and (max-width: 1200px) {
+  .botonera-principal-comprobante {
+    width: 150px;
+  }
+}
+.botonera-principal-comprobante > span {
+  left: 0;
+  position: absolute;
+  text-align: center;
+  top: 90px;
+  width: 100%;
+  font-size: 12px;
+  color: #777777
+}
+.botonera-principal-logo {
+  width: 50%;
+  margin-left: 75%;
+  opacity: .8;
+}
+@media (max-width: 576px) {
+  .botonera-principal-logo {
+    width: 180%;
+    margin-left: 20%;
+    opacity: .8;
+  }
+}
+.acciones-mobile {
+  line-height: 2.5em; 
+  color: orange;
+  font-size: 1.25em
+}
+.swiper {
+  height: 300px;
+}
-<ngb-carousel *ngIf="images">
-  <ng-template ngbSlide>
-    <img [src]="images[0]" alt="Random first slide">
-    <div class="carousel-caption">
-      <h3>First slide label</h3>
-      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
-    </div>
-  </ng-template>
-  <ng-template ngbSlide>
-    <img [src]="images[1]" alt="Random second slide">
-    <div class="carousel-caption">
-      <h3>Second slide label</h3>
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-    </div>
-  </ng-template>
-  <ng-template ngbSlide>
-    <img [src]="images[2]" alt="Random third slide">
-    <div class="carousel-caption">
-      <h3>Third slide label</h3>
-      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
-    </div>
-  </ng-template>
-</ngb-carousel>
 \ No newline at end of file
+<div class="col-6">
+  <img src="assets/img/logo.png" class="botonera-principal-logo">
+</div>
+<div class="pt-5 row">
+  <div class="swiper col-12">
+    <a class="botonera-principal-comprobante" routerLink="/comprobantes">
+      <span>Lista comprobantes</span>
+    </a>
+  </div>
+  <div class="d-none d-sm-block">
+      <a
+          class="btn btn-outline-dark mt-5 btn-lg"
+          href="javascript:void()"
+          ng-click="showTerminal()"
+      >
+      <i class="fa fa-info-circle" aria-hidden="true"></i>
+      </a>
+      <a class="btn btn-outline-dark mt-5 btn-lg"
+          href="javascript:void()"
+          ng-click="logout()"
+      >
+      <i class="fa fa-power-off" aria-hidden="true"></i>
+  </a>
+  </div>
+  <div class="row d-md-none fixed-bottom">
+      <div class="w-100 d-flex px-3 acciones-mobile">
+          <a
+            class="btn btn-outline-dark btn-lg mr-2"
+            href="javascript:void()"
+            ng-click="showTerminal()"
+          >
+              <i class="fa fa-info-circle" aria-hidden="true"></i>
+          </a>
+          <a class="btn btn-outline-dark btn-lg"
+              href="javascript:void()"
+              ng-click="logout()"
+          >
+              <i class="fa fa-power-off" aria-hidden="true"></i>
+          </a>
+      </div>
+  </div>
+</div>
 import { Component } from '@angular/core';
+import { BotonServiceService } from 'src/app/boton-service.service';
  
 @Component({
   selector: 'app-botonera',
@@ -7,5 +8,6 @@ import { Component } from &#39;@angular/core&#39;;
 })
  
 export class AppBotonera {
-  images = [1, 2, 3].map(() => `https://picsum.photos/900/500?random&t=${Math.random()}`);
+  botones = new BotonServiceService('').getBotones();
+  paginas = [1];
 }
@@ -0,0 +1,5 @@
+<ul>
+  <li *ngFor="let comprobante of comprobantes">
+    {{comprobante}}
+  </li>
+</ul>
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ComprobantesComponent } from './comprobantes.component';
+
+describe('ComprobantesComponent', () => {
+  let component: ComprobantesComponent;
+  let fixture: ComponentFixture<ComprobantesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ComprobantesComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ComprobantesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-comprobantes',
+  templateUrl: './comprobantes.component.html',
+  styleUrls: ['./comprobantes.component.css']
+})
+export class ComprobantesComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  comprobantes = [1, 2, 3];
+}
@@ -1,5 +0,0 @@
-<ul>
-  <li *ngFor="let item of items">
-    {{item}}
-  </li>
-</ul>
@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ListaComprobantesComponent } from './lista-comprobantes.component';
-
-describe('ListaComprobantesComponent', () => {
-  let component: ListaComprobantesComponent;
-  let fixture: ComponentFixture<ListaComprobantesComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ ListaComprobantesComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(ListaComprobantesComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
@@ -1,17 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-lista-comprobantes',
-  templateUrl: './lista-comprobantes.component.html',
-  styleUrls: ['./lista-comprobantes.component.css']
-})
-
-export class ListaComprobantesComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-  items = [10, 20];
-}
@@ -7,6 +7,10 @@
  
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="./img/logo.png">
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+
+  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
+
   <script type="text/javascript" src="cordova.js"></script>
 </head>
 <body>
 /* You can add global styles to this file, and also import other style files */
+@import '../node_modules/font-awesome/css/font-awesome.min.css';
+
 body {
   background-color: #cccccc;
 }
...	...	@@ -3540,6 +3540,11 @@
3540	3540	}
3541	3541	}
3542	3542	},
	3543	+ "font-awesome": {
	3544	+ "version": "4.7.0",
	3545	+ "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
	3546	+ "integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM="
	3547	+ },
3543	3548	"for-each": {
3544	3549	"version": "0.3.3",
3545	3550	"resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
...	...	@@ -21,6 +21,7 @@
21	21	"@angular/router": "~8.0.0",
22	22	"@ng-bootstrap/ng-bootstrap": "^4.2.0",
23	23	"cordova-android": "^8.0.0",
	24	+ "font-awesome": "^4.7.0",
24	25	"rxjs": "~6.4.0",
25	26	"tslib": "^1.9.0",
26	27	"zone.js": "~0.9.1"
1	1	import { NgModule } from '@angular/core';
2	2	import { Routes, RouterModule } from '@angular/router';
	3	+import { ComprobantesComponent } from './comprobantes/comprobantes.component';
	4	+import { AppBotonera } from './botonera/botonera.component';
3	5
4		-const routes: Routes = [];
	6	+const routes: Routes = [
	7	+ { path: 'comprobantes', component: ComprobantesComponent, pathMatch: 'full' },
	8	+ { path: '', redirectTo: 'home', pathMatch: 'full' },
	9	+ { path: 'home', component: AppBotonera }
	10	+];
5	11
6	12	@NgModule({
7	13	imports: [RouterModule.forRoot(routes)],
1	1	<!--The content below is only a placeholder and can be replaced.-->
2		-<div style="text-align:center" class="body-background">
3		- <h1>
4		- Gestión comprobantes DEBO
5		- <app-botonera></app-botonera>
6		- </h1>
	2	+<div style="text-align:center" class="body-background container">
	3	+ <router-outlet></router-outlet>
7	4	</div>
8		-
9		-<router-outlet></router-outlet>
1	1	import { BrowserModule } from '@angular/platform-browser';
2	2	import { NgModule } from '@angular/core';
3		-import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
	3	+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
	4	+import { HttpClientModule } from '@angular/common/http';
4	5
5	6	import { AppRoutingModule } from './app-routing.module';
6	7	import { AppComponent } from './app.component';
7		-import { ListaComprobantesComponent } from './lista-comprobantes/lista-comprobantes.component';
8	8	import { AppBotonera } from './botonera/botonera.component';
	9	+import { ComprobantesComponent } from './comprobantes/comprobantes.component';
9	10
10	11	@NgModule({
11	12	declarations: [
12	13	AppComponent,
13		- ListaComprobantesComponent,
14		- AppBotonera
	14	+ AppBotonera,
	15	+ ComprobantesComponent
15	16	],
16	17	imports: [
17	18	BrowserModule,
18	19	AppRoutingModule,
19		- NgbModule
	20	+ NgbModule,
	21	+ HttpClientModule
20	22	],
21	23	providers: [],
22	24	bootstrap: [AppComponent, AppBotonera]
...	...	@@ -0,0 +1,15 @@
	1	+import { Injectable } from '@angular/core';
	2	+import { HttpClient } from '@angular/common/http';
	3	+
	4	+@Injectable({
	5	+ providedIn: 'root'
	6	+})
	7	+export class BotonServiceService {
	8	+
	9	+ constructor(private http: String) { }
	10	+
	11	+ getBotones() {
	12	+ // return this.http.get('http://localhost:5555/comprobantes');
	13	+ return [1];
	14	+ }
	15	+}
...	...	@@ -0,0 +1,54 @@
	1	+.botonera-principal-comprobante {
	2	+ background-image: url('/assets/img/comprobante.png');
	3	+ background-size: 90px 90px;
	4	+ display: inline-block;
	5	+ text-align: center;
	6	+ border-radius: 12px;
	7	+ border-width: 0;
	8	+ height: 90px;
	9	+ position: relative;
	10	+ width: 90px;
	11	+ outline: 0;
	12	+}
	13	+.botonera-principal-comprobante:hover {
	14	+ background-color:rgb(250,250,250);
	15	+ filter:drop-shadow(4px 4px 4px gray);
	16	+}
	17	+.botonera-principal-comprobante:active {
	18	+ background-color: rgb(230, 230, 230);
	19	+ filter:drop-shadow(4px 4px 4px gray);
	20	+}
	21	+@media (min-width: 992px) and (max-width: 1200px) {
	22	+ .botonera-principal-comprobante {
	23	+ width: 150px;
	24	+ }
	25	+}
	26	+.botonera-principal-comprobante > span {
	27	+ left: 0;
	28	+ position: absolute;
	29	+ text-align: center;
	30	+ top: 90px;
	31	+ width: 100%;
	32	+ font-size: 12px;
	33	+ color: #777777
	34	+}
	35	+.botonera-principal-logo {
	36	+ width: 50%;
	37	+ margin-left: 75%;
	38	+ opacity: .8;
	39	+}
	40	+@media (max-width: 576px) {
	41	+ .botonera-principal-logo {
	42	+ width: 180%;
	43	+ margin-left: 20%;
	44	+ opacity: .8;
	45	+ }
	46	+}
	47	+.acciones-mobile {
	48	+ line-height: 2.5em;
	49	+ color: orange;
	50	+ font-size: 1.25em
	51	+}
	52	+.swiper {
	53	+ height: 300px;
	54	+}
1		-<ngb-carousel *ngIf="images">
2		- <ng-template ngbSlide>
3		- <img [src]="images[0]" alt="Random first slide">
4		- <div class="carousel-caption">
5		- <h3>First slide label</h3>
6		- <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
7		- </div>
8		- </ng-template>
9		- <ng-template ngbSlide>
10		- <img [src]="images[1]" alt="Random second slide">
11		- <div class="carousel-caption">
12		- <h3>Second slide label</h3>
13		- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
14		- </div>
15		- </ng-template>
16		- <ng-template ngbSlide>
17		- <img [src]="images[2]" alt="Random third slide">
18		- <div class="carousel-caption">
19		- <h3>Third slide label</h3>
20		- <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
21		- </div>
22		- </ng-template>
23		-</ngb-carousel>
24	1	\ No newline at end of file
	2	+<div class="col-6">
	3	+ <img src="assets/img/logo.png" class="botonera-principal-logo">
	4	+</div>
	5	+<div class="pt-5 row">
	6	+ <div class="swiper col-12">
	7	+ <a class="botonera-principal-comprobante" routerLink="/comprobantes">
	8	+ <span>Lista comprobantes</span>
	9	+ </a>
	10	+ </div>
	11	+ <div class="d-none d-sm-block">
	12	+ <a
	13	+ class="btn btn-outline-dark mt-5 btn-lg"
	14	+ href="javascript:void()"
	15	+ ng-click="showTerminal()"
	16	+ >
	17	+ <i class="fa fa-info-circle" aria-hidden="true"></i>
	18	+ </a>
	19	+ <a class="btn btn-outline-dark mt-5 btn-lg"
	20	+ href="javascript:void()"
	21	+ ng-click="logout()"
	22	+ >
	23	+ <i class="fa fa-power-off" aria-hidden="true"></i>
	24	+ </a>
	25	+ </div>
	26	+ <div class="row d-md-none fixed-bottom">
	27	+ <div class="w-100 d-flex px-3 acciones-mobile">
	28	+ <a
	29	+ class="btn btn-outline-dark btn-lg mr-2"
	30	+ href="javascript:void()"
	31	+ ng-click="showTerminal()"
	32	+ >
	33	+ <i class="fa fa-info-circle" aria-hidden="true"></i>
	34	+ </a>
	35	+ <a class="btn btn-outline-dark btn-lg"
	36	+ href="javascript:void()"
	37	+ ng-click="logout()"
	38	+ >
	39	+ <i class="fa fa-power-off" aria-hidden="true"></i>
	40	+ </a>
	41	+ </div>
	42	+ </div>
	43	+</div>
1	1	import { Component } from '@angular/core';
	2	+import { BotonServiceService } from 'src/app/boton-service.service';
2	3
3	4	@Component({
4	5	selector: 'app-botonera',
...	...	@@ -7,5 +8,6 @@ import { Component } from '@angular/core';
7	8	})
8	9
9	10	export class AppBotonera {
10		- images = [1, 2, 3].map(() => `https://picsum.photos/900/500?random&t=${Math.random()}`);
	11	+ botones = new BotonServiceService('').getBotones();
	12	+ paginas = [1];
11	13	}
...	...	@@ -0,0 +1,5 @@
	1	+<ul>
	2	+ <li *ngFor="let comprobante of comprobantes">
	3	+ {{comprobante}}
	4	+ </li>
	5	+</ul>