Browse Source

AND now with a clean little Ionic client to talk to the server with.

Kr Younger 6 years ago
parent
commit
deff4498ca

+ 1
- 1
.gitignore View File

24
 nbdist/
24
 nbdist/
25
 .nb-gradle/
25
 .nb-gradle/
26
 
26
 
27
-frontend/FE/node_modules
27
+frontend/SimpleMonday/node_modules

+ 19
- 1
README.md View File

1
 # Throwup Thursday
1
 # Throwup Thursday
2
 
2
 
3
-*Use spring, and HAL Browser (for Spring Data REST) to create a couple of POJOs (Book and Person) and
3
+*Use Spring, and HAL Browser (for Spring Data REST) to create a couple of POJOs (Book and Person) and
4
 a framework so that we can mock up some data in spring, and then generate
4
 a framework so that we can mock up some data in spring, and then generate
5
 JSON and other marvels.*
5
 JSON and other marvels.*
6
 
6
 
7
 **Run and then point a browser to [http://localhost:8080/]()**
7
 **Run and then point a browser to [http://localhost:8080/]()**
8
 
8
 
9
+## New and Improved!! As seen ov TV! 
10
+## ThrowupThursday can now talk to a MySQL db running on your machine.
11
+
12
+Yes, that's right, you can do a very simple CRUDRepository in Spring to suply the data you need!
13
+
14
+You're welcome.
15
+
16
+## New and Improved! Now with the earth-shattering SimpleMonday Client!!
17
+
18
+Then open VSC on the SAME project. Go into frontend/SimpleMonday and find a simple Ionic 3 client, which can talk to the 
19
+Spring server above, fetch a single GET from the server display the results in the People tab of the 
20
+SimpleMonday client.
21
+
22
+BUT to make this work, you need to go to [http://localhost:8100]() with the Chrome browser, and then
23
+download and INSTALL this extension: https://chrome.google.com/webstore/detail/cors-toggle/jioikioepegflmdnbocfhgmpmopmjkim
24
+That will allow the SimpleMonday client to load the JSON from localhost:8080
25
+Otherwise the SimpleMonday client runs afoul of CORS (look it up).
26
+
9
 
27
 
10
 #### Kris and Wilhem wrote this, because we feel sorry for the poor Zipcoder-wanna-bees.
28
 #### Kris and Wilhem wrote this, because we feel sorry for the poor Zipcoder-wanna-bees.
11
 
29
 

+ 5
- 1
frontend/SimpleMonday/src/app/app.module.ts View File

2
 import { BrowserModule } from '@angular/platform-browser';
2
 import { BrowserModule } from '@angular/platform-browser';
3
 import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
3
 import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
4
 import { MyApp } from './app.component';
4
 import { MyApp } from './app.component';
5
+import { HttpModule } from '@angular/http';
5
 
6
 
6
 import { AboutPage } from '../pages/about/about';
7
 import { AboutPage } from '../pages/about/about';
7
 import { ContactPage } from '../pages/contact/contact';
8
 import { ContactPage } from '../pages/contact/contact';
10
 
11
 
11
 import { StatusBar } from '@ionic-native/status-bar';
12
 import { StatusBar } from '@ionic-native/status-bar';
12
 import { SplashScreen } from '@ionic-native/splash-screen';
13
 import { SplashScreen } from '@ionic-native/splash-screen';
14
+import { PeopleSupplyProvider } from '../providers/people-supply/people-supply';
13
 
15
 
14
 @NgModule({
16
 @NgModule({
15
   declarations: [
17
   declarations: [
21
   ],
23
   ],
22
   imports: [
24
   imports: [
23
     BrowserModule,
25
     BrowserModule,
26
+    HttpModule,
24
     IonicModule.forRoot(MyApp)
27
     IonicModule.forRoot(MyApp)
25
   ],
28
   ],
26
   bootstrap: [IonicApp],
29
   bootstrap: [IonicApp],
34
   providers: [
37
   providers: [
35
     StatusBar,
38
     StatusBar,
36
     SplashScreen,
39
     SplashScreen,
37
-    {provide: ErrorHandler, useClass: IonicErrorHandler}
40
+    {provide: ErrorHandler, useClass: IonicErrorHandler},
41
+    PeopleSupplyProvider
38
   ]
42
   ]
39
 })
43
 })
40
 export class AppModule {}
44
 export class AppModule {}

+ 31
- 2
frontend/SimpleMonday/src/pages/about/about.html View File

1
 <ion-header>
1
 <ion-header>
2
   <ion-navbar>
2
   <ion-navbar>
3
     <ion-title>
3
     <ion-title>
4
-      About
4
+      About Simply Monday
5
     </ion-title>
5
     </ion-title>
6
   </ion-navbar>
6
   </ion-navbar>
7
 </ion-header>
7
 </ion-header>
8
 
8
 
9
 <ion-content padding>
9
 <ion-content padding>
10
-
10
+  <h2>Monday Monday, -- The Mommas and Papas</h2>
11
+<p>Bah-da bah-da-da-da
12
+  Bah-da bah-da-da-da
13
+  Bah-da bah-da-da-da</p><p>
14
+  Monday, Monday, so good to me
15
+  Monday mornin´, it was all I hoped it would be
16
+  Oh Monday mornin´, Monday mornin´ couldn´t guarantee
17
+  That Monday evenin´ you would still be here with me</p><p>
18
+  Monday, Monday, can´t trust that day
19
+  Monday, Monday, sometimes it just turns out that way
20
+  Oh Monday mornin´ you gave me no warnin´ of what was to be
21
+  Oh Monday, Monday, how could you leave and not take me</p><p>
22
+  Every other day, every other day
23
+  Every other day of the week is fine, yeah
24
+  But whenever Monday comes, but whenever Monday comes
25
+  A-you can find me cryin´ all of the time</p><p>
26
+  Monday, Monday, so good to me
27
+  Monday mornin´, it was all I hoped it would be
28
+  But Monday mornin´, Monday mornin´ couldn´t guarantee
29
+  That Monday evenin´ you would still be here with me</p><p>
30
+  Every other day, every other day
31
+  Every other day of the week is fine, yeah
32
+  But whenever Monday comes, but whenever Monday comes
33
+  A-you can find me cryin´ all of the time</p><p>
34
+  Monday, Monday, can´t trust that day
35
+  Monday, Monday, it just turns out that way
36
+  Oh Monday, Monday, won´t go away
37
+  Monday, Monday, it´s here to stay
38
+  Oh Monday, Monday
39
+  Oh Monday, Monday</p>
11
 </ion-content>
40
 </ion-content>

+ 7
- 6
frontend/SimpleMonday/src/pages/contact/contact.html View File

8
 
8
 
9
 <ion-content>
9
 <ion-content>
10
   <ion-list>
10
   <ion-list>
11
-    <ion-list-header>Follow us on Twitter</ion-list-header>
12
-    <ion-item>
13
-      <ion-icon name="ionic" item-start></ion-icon>
14
-      @ionicframework
15
-    </ion-item>
16
-  </ion-list>
11
+      <ion-list-header>Live People!</ion-list-header>
12
+
13
+      <ion-item *ngFor="let person of people">
14
+        <!-- <img [src]="person.data.url" /> -->
15
+        <ion-icon name="person" item-start></ion-icon> {{person.name}} age: {{person.age}}
16
+      </ion-item>
17
+    </ion-list>
17
 </ion-content>
18
 </ion-content>

+ 11
- 1
frontend/SimpleMonday/src/pages/contact/contact.ts View File

1
 import { Component } from '@angular/core';
1
 import { Component } from '@angular/core';
2
 import { NavController } from 'ionic-angular';
2
 import { NavController } from 'ionic-angular';
3
+import { Http } from '@angular/http';
4
+
5
+import 'rxjs/add/operator/map';
6
+
3
 
7
 
4
 @Component({
8
 @Component({
5
   selector: 'page-contact',
9
   selector: 'page-contact',
6
   templateUrl: 'contact.html'
10
   templateUrl: 'contact.html'
7
 })
11
 })
12
+
8
 export class ContactPage {
13
 export class ContactPage {
14
+  people: any;
9
 
15
 
10
-  constructor(public navCtrl: NavController) {
16
+  constructor(public navCtrl: NavController, public http: Http) {
17
+    this.http.get('http://localhost:8080/persons').map(res => res.json()).subscribe(data => {
18
+        //console.log(data);
19
+        this.people = data._embedded.persons;
20
+    });
11
 
21
 
12
   }
22
   }
13
 
23
 

+ 2
- 1
frontend/SimpleMonday/src/pages/home/home.html View File

5
 </ion-header>
5
 </ion-header>
6
 
6
 
7
 <ion-content padding>
7
 <ion-content padding>
8
-  <h2>Welcome to Ionic!</h2>
8
+  <h2>Welcome to Simple Monday!</h2>
9
   <p>
9
   <p>
10
     This starter project comes with simple tabs-based layout for apps
10
     This starter project comes with simple tabs-based layout for apps
11
     that are going to primarily use a Tabbed UI.
11
     that are going to primarily use a Tabbed UI.
14
     Take a look at the <code>src/pages/</code> directory to add or change tabs,
14
     Take a look at the <code>src/pages/</code> directory to add or change tabs,
15
     update any existing page or create new pages.
15
     update any existing page or create new pages.
16
   </p>
16
   </p>
17
+  <p>and this also loads the persons from the ThrowupThursday Spring.io server. You're welcome.</p>
17
 </ion-content>
18
 </ion-content>

+ 1
- 1
frontend/SimpleMonday/src/pages/tabs/tabs.html View File

1
 <ion-tabs>
1
 <ion-tabs>
2
   <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
2
   <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
3
   <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
3
   <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
4
-  <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
4
+  <ion-tab [root]="tab3Root" tabTitle="People" tabIcon="contacts"></ion-tab>
5
 </ion-tabs>
5
 </ion-tabs>