se agrego la pagina de mensajes de aministrador (novedades)

Jajajaby · Dec 8, 2018 · de9670c · de9670c
1 parent 19c36a2
commit de9670c
Show file tree

Hide file tree

Showing 4 changed files with 145 additions and 72 deletions.
diff --git a/src/app/pages/message-admin/message-admin.component.css b/src/app/pages/message-admin/message-admin.component.css
@@ -0,0 +1,31 @@
+.message,
+.no-message {
+  background: #fff;
+  padding: 1rem;
+  border-radius: 8px;
+  border: 2px solid #2321;
+
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.message span {
+  align-self: flex-end;
+  font-size: .8rem;
+}
+
+.no-message {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  background: #d3a9a9;
+  padding: 2rem;
+}
+
+.loader {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
diff --git a/src/app/pages/message-admin/message-admin.component.html b/src/app/pages/message-admin/message-admin.component.html
@@ -1,3 +1,34 @@
-<p>
-  message-admin works!
-</p>
+
+<div class="container">
+  <h2 class="mt-3"> Novedades </h2>
+  <div class="row mt-5">
+    <div class="col-3">
+      <ul *ngIf="!loader" class="list-group shadow-box">
+        <li *ngFor="let message of messages" 
+            class="list-group-item"
+            style="cursor: pointer"
+            [ngClass]="{'active': selected !== undefined && selected.day === message.day }"> 
+          <a (click)="selected = message"> {{ message.title }} </a>
+        </li>
+      </ul>
+
+      <div *ngIf="loader" class="loader">
+        <p>Buscando mensajes...</p>
+        <app-loading></app-loading>
+      </div>
+    </div>
+
+    <div class="col-8">
+      <div *ngIf="selected !== undefined;" class="message shadow-box">
+        <h3> {{ selected.title }} </h3>
+        <p> {{ selected.body }} </p>
+        <span> {{ selected.hour }} </span>
+      </div>
+
+      <div *ngIf="selected === undefined" class="no-message shadow-box">
+        <h3> Debe seleccionar un mensaje </h3>
+      </div>
+    </div>
+
+  </div>
+</div>
diff --git a/src/app/pages/message-admin/message-admin.component.ts b/src/app/pages/message-admin/message-admin.component.ts
@@ -1,15 +1,24 @@
 import { Component, OnInit } from '@angular/core';
 
+import { DatabaseService } from '../../services/database.service';
+
 @Component({
   selector: 'app-message-admin',
   templateUrl: './message-admin.component.html',
   styleUrls: ['./message-admin.component.css']
 })
-export class MessageAdminComponent implements OnInit {
+export class MessageAdminComponent {
 
-  constructor() { }
+  messages:any[];
+  selected:any;
+  loader:boolean = true;
 
-  ngOnInit() {
+  constructor( _dbService: DatabaseService ) {
+    _dbService.getData('global-messages')  
+      .valueChanges()
+      .subscribe( resp => {
+        this.messages = resp;
+        this.loader = false;
+      });
   }
-
 }
diff --git a/src/styles.css b/src/styles.css
@@ -1,51 +1,47 @@
-
 /* Líneas del formulario de libro */
 .border-input-custom {
-   border-bottom: 1px solid #67757c !important;
+  border-bottom: 1px solid #67757c !important;
 }
 .border-input-custom:focus {
-   border-bottom: 1px solid #398bf7 !important;
+  border-bottom: 1px solid #398bf7 !important;
 }
 
 .modal-lg {
-    max-width: 70% !important;
-    min-width: 500px !important;
+  max-width: 70% !important;
+  min-width: 500px !important;
 }
 
 .modal-body {
-    min-width: 500px !important;
+  min-width: 500px !important;
 }
 
 .sidebar-nav ul li a {
-    padding: 0 !important;
-    font-size: 12px !important;
+  padding: 0 !important;
+  font-size: 12px !important;
 }
 
-
 .img-carousel {
-    width: 100%;
-    height: 100%;
-    max-height: 340px;
+  width: 100%;
+  height: 100%;
+  max-height: 340px;
 }
 
 /* ESTILO DE CAJA DE LOADER QUE QUEDA AL CENTRO */
 .loader-contenedor {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: center;
-    margin-top: 5rem;
-    width: 80vw;
-    height: 300%;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  margin-top: 5rem;
+  width: 80vw;
+  height: 300%;
 }
 
-.container-fluid{
-    margin-left: 1% !important;
+.container-fluid {
+  margin-left: 1% !important;
 }
 
-
-
 /* ADMIN */
 /* @media (max-width: 1023px){
     .page-wrapper {
@@ -60,86 +56,92 @@
 } */
 
 .container {
-    padding-right: 0 !important;
-    padding-left: 0 !important;
+  padding-right: 0 !important;
+  padding-left: 0 !important;
 }
 
-
 .mailbox .message-center {
-    height: 100% !important;
+  height: 100% !important;
 }
 
 /* Categorías de libros */
 .contenedor {
-    max-width: 220px !important;
-    min-width: 220px !important;
-  }
+  max-width: 220px !important;
+  min-width: 220px !important;
+}
 
 /* Imágen de perfil en header */
 .topbar .profile-pic {
-    width: 50px !important; 
+  width: 50px !important;
 }
 
 /* Dashboard */
-.container-dashboard{
-    /* margin-left: 0 !important; */
+.container-dashboard {
+  /* margin-left: 0 !important; */
 }
 
 .img-circle-30 {
-    width: 30px;
-    height: 30px;
-    border-radius: 100%;
+  width: 30px;
+  height: 30px;
+  border-radius: 100%;
 }
 
 .img-circle-40 {
-    width: 40px;
-    height: 40px;
-    border-radius: 100%;
+  width: 40px;
+  height: 40px;
+  border-radius: 100%;
 }
 
 .img-circle-50 {
-    width: 50px;
-    height: 50px;
-    border-radius: 100%;
+  width: 50px;
+  height: 50px;
+  border-radius: 100%;
 }
 
 .sidebar-nav > ul > li > a.active {
-    background: none !important;
-    color: #687384 !important;
+  background: none !important;
+  color: #687384 !important;
 }
 
 .other-header .close {
-    float: none;
-    margin-left: 10px;
+  float: none;
+  margin-left: 10px;
 }
 
 .dropdown-menu.show {
-    display: block;
-    position: absolute !important;
-    top: 40px !important;
-    right: 20px !important;
-    left: auto !important;
+  display: block;
+  position: absolute !important;
+  top: 40px !important;
+  right: 20px !important;
+  left: auto !important;
 }
 
-.pointer { cursor: pointer; }
+.pointer {
+  cursor: pointer;
+}
 
 .topbar .top-navbar .mailbox {
-    width: 300px;
-    max-height: 400px;
-    overflow: scroll;
+  width: 300px;
+  max-height: 400px;
+  overflow: scroll;
 }
 
-.no-wrap td, .no-wrap th {
-    white-space: pre-wrap;
+.no-wrap td,
+.no-wrap th {
+  white-space: pre-wrap;
 }
 
-
-@media (max-width: 767px){
-    .chat-main-box .chat-left-aside {
-        left: 0px !important;
-    }
+@media (max-width: 767px) {
+  .chat-main-box .chat-left-aside {
+    left: 0px !important;
+  }
 }
 
 .chaoOverflow {
-    overflow: hidden !important;
-}
+  overflow: hidden !important;
+}
+
+.shadow-box {
+  flex-direction: column;
+  box-shadow: 5px 5px 31px -6px rgba(84, 84, 84, 1);
+}