Ignore:
Timestamp:
07/21/20 22:00:35 (4 years ago)
Author:
Mile Jankuloski <mile.jankuloski@…>
Branches:
master
Children:
c352b2d
Parents:
0c48bbb
Message:

Frontend adjustments for prototype

Location:
Farmatiko/ClientApp/src
Files:
16 added
10 edited

Legend:

Unmodified
Added
Removed

  • Farmatiko/ClientApp/src/app/app.component.ts

    r0c48bbb r333cdac  
    11import { Component } from '@angular/core';
     2import { MaterialModule } from './shared/material.module'
    23
    34@Component({

  • Farmatiko/ClientApp/src/app/app.module.ts

    r0c48bbb r333cdac  
    1010import { CounterComponent } from './counter/counter.component';
    1111import { FetchDataComponent } from './fetch-data/fetch-data.component';
     12import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
     13import { KoronaComponent } from './korona/korona.component';
    1214
    1315@NgModule({
    … …  
    1719    HomeComponent,
    1820    CounterComponent,
    19     FetchDataComponent
     21    FetchDataComponent,
     22    KoronaComponent
    2023  ],
    2124  imports: [
    … …  
    2528    RouterModule.forRoot([
    2629      { path: '', component: HomeComponent, pathMatch: 'full' },
    27       { path: 'counter', component: CounterComponent },
     30      { path: 'mapa', component: CounterComponent },
    2831      { path: 'fetch-data', component: FetchDataComponent },
    29     ])
     32      { path: 'koronavirus', component: KoronaComponent }
     33    ]),
     34    BrowserAnimationsModule
    3035  ],
    3136  providers: [],

  • Farmatiko/ClientApp/src/app/counter/counter.component.html

    r0c48bbb r333cdac  
    66
    77<button class="btn btn-primary" (click)="incrementCounter()">Increment</button>
     8
     9
     10<div class="wrapper">
     11    <div>
     12    <h2>Здравствени установи</h2>
     13    <input type="text" class="form-control" name="lek" placeholder="Пронајди лек">
     14    <table class='table table-striped table-bordered table-sm' cellspacing="0" width="100%" aria-labelledby="tableLabel" *ngIf="true">
     15        <thead>
     16            <tr>
     17            <th>Placeholder1</th>
     18            <th>Placeholder2</th>
     19            <th>Placeholder3</th>
     20            <th>Placeholder4</th>
     21            </tr>
     22        </thead>
     23        <tbody>
     24            <tr *ngFor="">
     25            <td>data1</td>
     26            <td>data2</td>
     27            <td>data3</td>
     28            <td>data4</td>
     29            </tr>
     30        </tbody>
     31    </table>
     32    <nav aria-label="Page navigation example">
     33        <ul class="pagination">
     34          <li class="page-item">
     35            <a class="page-link" href="#" aria-label="Previous">
     36              <span aria-hidden="true">&laquo;</span>
     37              <span class="sr-only">Previous</span>
     38            </a>
     39          </li>
     40          <li class="page-item"><a class="page-link" href="#">1</a></li>
     41          <li class="page-item"><a class="page-link" href="#">2</a></li>
     42          <li class="page-item"><a class="page-link" href="#">3</a></li>
     43          <li class="page-item">
     44            <a class="page-link" href="#" aria-label="Next">
     45              <span aria-hidden="true">&raquo;</span>
     46              <span class="sr-only">Next</span>
     47            </a>
     48          </li>
     49        </ul>
     50      </nav>
     51    </div>
     52    <div>
     53    <h2>Здравствени работници</h2>
     54    <input type="text" class="form-control" name="apteka" placeholder="Пронајди аптека">
     55    <table class='table table-striped table-bordered table-sm' cellspacing="0" width="100%" aria-labelledby="tableLabel" *ngIf="true">
     56        <thead>
     57        <tr>
     58            <th>Placeholder1</th>
     59            <th>Placeholder2</th>
     60            <th>Placeholder3</th>
     61            <th>Placeholder4</th>
     62        </tr>
     63        </thead>
     64        <tbody>
     65        <tr *ngFor="">
     66            <td>data1</td>
     67            <td>data2</td>
     68            <td>data3</td>
     69            <td>data4</td>
     70        </tr>
     71        </tbody>
     72    </table>
     73    <nav aria-label="Page navigation example">
     74        <ul class="pagination">
     75          <li class="page-item">
     76            <a class="page-link" href="#" aria-label="Previous">
     77              <span aria-hidden="true">&laquo;</span>
     78              <span class="sr-only">Previous</span>
     79            </a>
     80          </li>
     81          <li class="page-item"><a class="page-link" href="#">1</a></li>
     82          <li class="page-item"><a class="page-link" href="#">2</a></li>
     83          <li class="page-item"><a class="page-link" href="#">3</a></li>
     84          <li class="page-item">
     85            <a class="page-link" href="#" aria-label="Next">
     86              <span aria-hidden="true">&raquo;</span>
     87              <span class="sr-only">Next</span>
     88            </a>
     89          </li>
     90        </ul>
     91      </nav>
     92    </div>
     93</div>

  • Farmatiko/ClientApp/src/app/counter/counter.component.ts

    r0c48bbb r333cdac  
    33@Component({
    44  selector: 'app-counter-component',
    5   templateUrl: './counter.component.html'
     5  templateUrl: './counter.component.html',
     6  styleUrls: ['./counter.component.css']
    67})
    78export class CounterComponent {

  • Farmatiko/ClientApp/src/app/home/home.component.html

    r0c48bbb r333cdac  
    1 <h1>Hello, world!</h1>
    2 <p>Welcome to your new single-page application, built with:</p>
    3 <ul>
    4   <li><a href='https://get.asp.net/'>ASP.NET Core</a> and <a href='https://msdn.microsoft.com/en-us/library/67ef8sbd.aspx'>C#</a> for cross-platform server-side code</li>
    5   <li><a href='https://angular.io/'>Angular</a> and <a href='http://www.typescriptlang.org/'>TypeScript</a> for client-side code</li>
    6   <li><a href='http://getbootstrap.com/'>Bootstrap</a> for layout and styling</li>
    7 </ul>
    8 <p>To help you get started, we've also set up:</p>
    9 <ul>
    10   <li><strong>Client-side navigation</strong>. For example, click <em>Counter</em> then <em>Back</em> to return here.</li>
    11   <li><strong>Angular CLI integration</strong>. In development mode, there's no need to run <code>ng serve</code>. It runs in the background automatically, so your client-side resources are dynamically built on demand and the page refreshes when you modify any file.</li>
    12   <li><strong>Efficient production builds</strong>. In production mode, development-time features are disabled, and your <code>dotnet publish</code> configuration automatically invokes <code>ng build</code> to produce minified, ahead-of-time compiled JavaScript files.</li>
    13 </ul>
    14 <p>The <code>ClientApp</code> subdirectory is a standard Angular CLI application. If you open a command prompt in that directory, you can run any <code>ng</code> command (e.g., <code>ng test</code>), or use <code>npm</code> to install extra packages into it.</p>
     1<div class="wrapper">
     2    <div>
     3    <h2>Лекови</h2>
     4    <input type="text" class="form-control" name="lek" placeholder="Пронајди лек">
     5    <table class='table table-striped table-bordered table-sm' cellspacing="0" width="100%" aria-labelledby="tableLabel" *ngIf="true">
     6        <thead>
     7            <tr>
     8            <th>Placeholder1</th>
     9            <th>Placeholder2</th>
     10            <th>Placeholder3</th>
     11            <th>Placeholder4</th>
     12            </tr>
     13        </thead>
     14        <tbody>
     15            <tr *ngFor="">
     16            <td>data1</td>
     17            <td>data2</td>
     18            <td>data3</td>
     19            <td>data4</td>
     20            </tr>
     21        </tbody>
     22    </table>
     23    <nav aria-label="Page navigation example">
     24        <ul class="pagination">
     25          <li class="page-item">
     26            <a class="page-link" href="#" aria-label="Previous">
     27              <span aria-hidden="true">&laquo;</span>
     28              <span class="sr-only">Previous</span>
     29            </a>
     30          </li>
     31          <li class="page-item"><a class="page-link" href="#">1</a></li>
     32          <li class="page-item"><a class="page-link" href="#">2</a></li>
     33          <li class="page-item"><a class="page-link" href="#">3</a></li>
     34          <li class="page-item">
     35            <a class="page-link" href="#" aria-label="Next">
     36              <span aria-hidden="true">&raquo;</span>
     37              <span class="sr-only">Next</span>
     38            </a>
     39          </li>
     40        </ul>
     41      </nav>
     42    </div>
     43    <div>
     44    <h2>Аптеки</h2>
     45    <input type="text" class="form-control" name="apteka" placeholder="Пронајди аптека">
     46    <table class='table table-striped table-bordered table-sm' cellspacing="0" width="100%" aria-labelledby="tableLabel" *ngIf="true">
     47        <thead>
     48        <tr>
     49            <th>Placeholder1</th>
     50            <th>Placeholder2</th>
     51            <th>Placeholder3</th>
     52            <th>Placeholder4</th>
     53        </tr>
     54        </thead>
     55        <tbody>
     56        <tr *ngFor="">
     57            <td>data1</td>
     58            <td>data2</td>
     59            <td>data3</td>
     60            <td>data4</td>
     61        </tr>
     62        </tbody>
     63    </table>
     64    <nav aria-label="Page navigation example">
     65        <ul class="pagination">
     66          <li class="page-item">
     67            <a class="page-link" href="#" aria-label="Previous">
     68              <span aria-hidden="true">&laquo;</span>
     69              <span class="sr-only">Previous</span>
     70            </a>
     71          </li>
     72          <li class="page-item"><a class="page-link" href="#">1</a></li>
     73          <li class="page-item"><a class="page-link" href="#">2</a></li>
     74          <li class="page-item"><a class="page-link" href="#">3</a></li>
     75          <li class="page-item">
     76            <a class="page-link" href="#" aria-label="Next">
     77              <span aria-hidden="true">&raquo;</span>
     78              <span class="sr-only">Next</span>
     79            </a>
     80          </li>
     81        </ul>
     82      </nav>
     83    </div>
     84</div>

  • Farmatiko/ClientApp/src/app/home/home.component.ts

    r0c48bbb r333cdac  
    1 import { Component } from '@angular/core';
     1import { Component, OnInit, Input, ViewChild } from '@angular/core';
     2import { MaterialModule } from '../shared/material.module';
    23
    34@Component({
    45  selector: 'app-home',
    56  templateUrl: './home.component.html',
     7  styleUrls: ['./home.component.css']
    68})
    79export class HomeComponent {

  • Farmatiko/ClientApp/src/app/nav-menu/nav-menu.component.css

    r0c48bbb r333cdac  
    33  text-align: center;
    44  word-break: break-all;
     5}
     6
     7a.navbar-brand img {
     8  width: 200px;
    59}
    610

  • Farmatiko/ClientApp/src/app/nav-menu/nav-menu.component.html

    r0c48bbb r333cdac  
    44  >
    55    <div class="container">
    6       <a class="navbar-brand" [routerLink]="['/']">Farmatiko</a>
     6      <a class="navbar-brand" [routerLink]="['/']"><img src="../../assets/logo.png"></a>
    77      <button
    88        class="navbar-toggler"
    … …  
    2626            [routerLinkActiveOptions]="{ exact: true }"
    2727          >
    28             <a class="nav-link text-dark" [routerLink]="['/']">Home</a>
     28            <a class="nav-link text-dark" [routerLink]="['/']">Побарај лек</a>
    2929          </li>
    3030          <li class="nav-item" [routerLinkActive]="['link-active']">
    31             <a class="nav-link text-dark" [routerLink]="['/counter']"
    32               >Counter</a
     31            <a class="nav-link text-dark" [routerLink]="['/mapa']"
     32              >Мапа на здравствени работници и здравствени установи</a
    3333            >
    34           </li>
     34          </li>         
    3535          <li class="nav-item" [routerLinkActive]="['link-active']">
    36             <a class="nav-link text-dark" [routerLink]="['/fetch-data']"
    37               >Fetch data</a
     36            <a class="nav-link text-dark" [routerLink]="['/koronavirus']"
     37              >Коронавирус</a
    3838            >
    3939          </li>

  • Farmatiko/ClientApp/src/index.html

    r0c48bbb r333cdac  
    88    <meta name="viewport" content="width=device-width, initial-scale=1" />
    99    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    10   </head>
     10      <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
     11    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     12</head>
    1113  <body>
    12     <app-root>Loading...</app-root>
     14    <app-root></app-root>
    1315  </body>
    1416</html>

  • Farmatiko/ClientApp/src/styles.css

    r0c48bbb r333cdac  
    1515  border-color: #1861ac;
    1616}
     17
     18html, body { height: 100%; }
     19body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
Note: See TracChangeset for help on using the changeset viewer.