väliaikakommit, ennen hrm rikkomisia

code/moya-angular/package.json

@@ -4,12 +4,9 @@
   "license": "MIT",
   "angular-cli": {},
   "scripts": {
-    "ng": "ng",
-    "start": "ng serve",
-    "lint": "tslint \"src/**/*.ts\"",
-    "test": "ng test",
-    "pree2e": "webdriver-manager update --standalone false --gecko false",
-    "e2e": "protractor"
+    "prekissa": "echo \"pre kissa\" ",
+    "postkissa": "echo \"post kissa\" ",
+    "kissa": "node test.js"
   },
   "private": true,
   "dependencies": {
@@ -18,6 +15,7 @@
     "@angular/core": "^2.3.1",
     "@angular/forms": "^2.3.1",
     "@angular/http": "^2.3.1",
+    "@angular/material": "^2.0.0-beta.1",
     "@angular/platform-browser": "^2.3.1",
     "@angular/platform-browser-dynamic": "^2.3.1",
     "@angular/router": "^3.3.1",
@@ -29,11 +27,6 @@
     "ts-helpers": "^1.1.1",
     "zone.js": "^0.7.2"
   },
-  "scripts" : {
-    "prekissa" : "echo \"pre kissa\" ",
-    "postkissa" : "echo \"post kissa\" ",
-    "kissa": "node test.js"
-  },
   "devDependencies": {
     "@angular/compiler-cli": "^2.3.1",
     "@types/jasmine": "2.5.38",

code/moya-angular/src/app/app.component.html

-<h1>Moya</h1>
-
 <router-outlet></router-outlet>
-
-<a routerLink="/viplist" routerLinkActive="active">viplist</a>
-<a routerLink="/test" routerLinkActive="active">test</a>

code/moya-angular/src/app/app.module.ts

@@ -10,6 +10,7 @@ import {MoyaRestModule} from "./moya-rest/moya-rest.module";
 
 import { RouterModule, Routes } from '@angular/router';
 import {TestComponent} from "./test/test.component";
+import {MaterialModule} from "@angular/material";
 
 
 const appRoutes: Routes = [
@@ -28,6 +29,7 @@ const appRoutes: Routes = [
     BrowserModule,
     FormsModule,
     HttpModule,
+    MaterialModule.forRoot(),
     AlertModule.forRoot(),
     MoyaRestModule.forRoot(),
     RouterModule.forRoot(appRoutes)

code/moya-angular/src/app/viplist/viplist.component.css

+.row {
+  display: flex;
+  flex-direction: row;
+}
+
+.productsRow {
+  display: flex;
+  flex-direction: row;
+}
+
+.productsRow:not(:last-child) {
+
+  margin-bottom: 3px;
+  border-bottom: 1px solid darkgray;
+  padding-bottom: 3px;
+
+}
+
+.kissa:nth-child(even) {
+  background-color: grey;
+}

code/moya-angular/src/app/viplist/viplist.component.html

 
 
+<div class="container-fluid">
 
-<table class="table table-striped table-hover">
-  <thead>
-    <tr>
-      <th>Description</th>
-      <th>shortdesc</th>
-    </tr>
-  </thead>
+  <div class="row bg-primary text-white titlerow">
+    <div class="col">Isäntä</div>
+    <div class="col-3">Nimi</div>
+    <div class="col">Kuvaus</div>
+    <div class="col-4">Tuotteet</div>
+    <div class="col">Muokkaa</div>
+  </div>
 
+  <div  *ngFor="let vip of vips | async" class="row contentrow">
 
-  <tbody>
-    <tr *ngFor="let vip of vips | async">
-      <td>{{vip.description}}</td>
-      <td>{{vip.shortdescr}}</td>
-      <td>
-        <div>
-          <div *ngFor="let p of vip.products">
+
+      <div class="col">Kekkonen kekkonen</div>
+      <div class="col-3"><b>{{vip.shortdescr}}</b></div>
+      <div class="col">{{vip.description}}</div>
+      <div class="col-4">
+        <div *ngFor="let p of vip.products" class="row">
 
           <div style="display: inline-block;">{{p.name}}</div>
           <div style="display: inline-block;">{{p.quantity}}</div>
+          <div style="display: inline-block; flex: 1;"> </div>
+          <div style="display: inline-block;"><button type="button" class="btn btn-default">Toimita</button></div>
+
         </div>
       </div>
+
+      <div class="col">todo</div>
+
+  </div>
+
+
+</div>
+<br /><br />
+<br /><br />
+<br /><br />
+
+
+
+<table class="table table-striped">
+
+  <thead>
+  <tr class="bg-primary text-white">
+    <th>Isäntä</th>
+    <th>Nimi</th>
+    <th>Kuvaus</th>
+    <th>Tuotteet</th>
+    <th>Muokkaa</th>
+  </tr>
+  </thead>
+  <tbody>
+    <tr  *ngFor="let vip of vips | async" >
+
+      <td class="">Kekkonen kekkonen</td>
+      <td class=""><b>{{vip.shortdescr}}</b></td>
+      <td class="">{{vip.description}}</td>
+      <td class="">
+        <div *ngFor="let p of vip.products" class="productsRow">
+
+          <div>{{p.name}}</div>
+          <div>{{p.quantity}}</div>
+          <div style="flex: 1;"> </div>
+          <div><button type="button" class="btn btn-default">Toimita</button></div>
+
+        </div>
       </td>
+
+      <td class="">todo</td>
+
     </tr>
-  </tbody>
 
+  </tbody>
 
 </table>

code/moya-angular/src/styles.css

 /* You can add global styles to this file, and also import other style files */
+
+@import '~@angular/material/core/theming/prebuilt/indigo-pink.css';