golf пре 3 година
родитељ
комит
f7660536a2

+ 2 - 2
src/app/app.component.html

@@ -2,14 +2,14 @@
2 2
   <ion-menu side="start" contentId="content">
3 3
     <ion-header>
4 4
       <ion-toolbar>
5
-        <ion-title class="menu-title">Menu</ion-title>
5
+        <ion-title class="menu-title">Active Radio</ion-title>
6 6
       </ion-toolbar>
7 7
     </ion-header>
8 8
     <ion-content>
9 9
       <ion-list>
10 10
         <ion-menu-toggle auto-hide="true">
11 11
           <ion-item routerLink="/tabs/tab1" routerDirection="forward">
12
-            <ion-label>Tab 1</ion-label>
12
+            <ion-label>Tab 111</ion-label>
13 13
           </ion-item>
14 14
           <ion-item routerLink="/tabs/tab2" routerDirection="forward">
15 15
             <ion-label>Tab 2</ion-label>

+ 11 - 5
src/app/home/home.page.html

@@ -1,7 +1,9 @@
1 1
 <ion-header>
2 2
   <ion-toolbar class="toolbar-bg-color">
3 3
     <ion-buttons slot="end">
4
-      <ion-menu-button></ion-menu-button>
4
+      <ion-menu-button>
5
+        <ion-icon src="../assets/icon/menu-svgrepo-com.svg"></ion-icon>
6
+      </ion-menu-button>
5 7
     </ion-buttons>
6 8
     <img src="../../../assets/icon/logo-fm99.png" class="head-img">
7 9
   </ion-toolbar>
@@ -27,11 +29,11 @@
27 29
       </ion-col>
28 30
     </ion-row>
29 31
     <ion-row *ngFor="let news of newsdata | slice:0:4">
30
-      <ion-col size="5">        
31
-        <img [src]="news.better_featured_image.source_url" [style.width]="'100%'" /> 
32
+      <ion-col size="5">
33
+        <img [src]="news.better_featured_image.source_url" [style.width]="'100%'" />
32 34
       </ion-col>
33 35
       <ion-col class="ion-align-self-center"><a [routerLink]="['../news-detail' , news.id]"><span
34
-[innerHTML]="news.title.rendered"></span>
36
+            [innerHTML]="news.title.rendered"></span>
35 37
         </a>
36 38
       </ion-col>
37 39
     </ion-row>
@@ -67,7 +69,11 @@
67 69
       <ion-col class="ion-align-self-center">เจาะสนามบอลไทย [ 20-10-2022 l 20:00 - 21:30 น. ]</ion-col>
68 70
     </ion-row>
69 71
   </ion-grid>
70
-
72
+  <div *ngIf="ytalldata">
73
+    <div *ngFor="let ytdata of ytalldata['items']">
74
+      <span>{{ytdata.snippet.title}}</span>
75
+    </div>
76
+  </div>
71 77
   <ion-grid>
72 78
     <img src="../../../assets/img-static/banner-320x100.jpeg" alt="">
73 79
   </ion-grid>

+ 16 - 9
src/app/home/home.page.ts

@@ -1,8 +1,8 @@
1 1
 import { AfterContentChecked, Component, ViewChild, ViewEncapsulation } from '@angular/core';
2
-import {SwiperComponent} from 'swiper/angular';
2
+import { SwiperComponent } from 'swiper/angular';
3 3
 import { SwiperOptions } from 'swiper';
4
-import SwiperCore, { Pagination,Autoplay,Navigation,Keyboard } from 'swiper';
5
-import { WpdataService} from '../services/wpdata.service';
4
+import SwiperCore, { Pagination, Autoplay, Navigation, Keyboard } from 'swiper';
5
+import { WpdataService } from '../services/wpdata.service';
6 6
 
7 7
 SwiperCore.use([Pagination, Autoplay, Navigation, Keyboard]);
8 8
 @Component({
@@ -14,11 +14,12 @@ SwiperCore.use([Pagination, Autoplay, Navigation, Keyboard]);
14 14
 export class HomePage implements AfterContentChecked {
15 15
 
16 16
   newsdata: any = [];
17
-  
17
+  ytalldata: any;
18
+
18 19
   @ViewChild('swiper') swiper: SwiperComponent;
19 20
 
20 21
   config: SwiperOptions = {
21
-    slidesPerView: 1,  
22
+    slidesPerView: 1,
22 23
     pagination: { clickable: true },
23 24
     autoplay: {
24 25
       delay: 200,
@@ -28,20 +29,26 @@ export class HomePage implements AfterContentChecked {
28 29
     navigation: true,
29 30
   }
30 31
 
31
-  constructor( private wpgetdataService : WpdataService) {}
32
+  constructor(private wpgetdataService: WpdataService) { }
32 33
 
33 34
   ngAfterContentChecked() {
34 35
     if (this.swiper) {
35 36
       this.swiper.updateSwiper({});
36
-    }    
37
+    }
37 38
   }
38 39
 
39 40
   ionViewWillEnter() {
40 41
     this.wpgetdataService.getAllNews().subscribe((data) => {
41 42
       this.newsdata = data;
42
-      console.log('load Lineup Data');
43
+      console.log('load News Data');
43 44
       console.log(this.newsdata);
44
-      });
45
+    });
46
+
47
+    this.wpgetdataService.getAllYoutube().subscribe((data) => {
48
+      this.ytalldata = data;
49
+      console.log('load YouTube');
50
+      console.log(this.ytalldata);
51
+    });
45 52
   }
46 53
 
47 54
 }

+ 10 - 3
src/app/services/wpdata.service.ts

@@ -9,7 +9,7 @@ import { Storage } from '@ionic/storage-angular';
9 9
 })
10 10
 export class WpdataService {
11 11
 
12
-  constructor(private http:HttpClient) { }
12
+  constructor(private http: HttpClient) { }
13 13
 
14 14
   // getAllNews() {
15 15
   //   return this.http.get(
@@ -18,13 +18,20 @@ export class WpdataService {
18 18
   // }
19 19
   getAllNews() {
20 20
     return this.http.get(
21
-      "https://dev-web-fm99.mcot.net/wp-json/wp/v2/news?_embed"
21
+      "https://fm99activeradio.mcot.net/wp-json/wp/v2/news?_embed"
22 22
     );
23 23
   }
24 24
 
25 25
   getNewsDetail(id) {
26
-    let url = 'https://dev-web-fm99.mcot.net/'
26
+    let url = 'https://fm99activeradio.mcot.net/'
27 27
     const route = url + 'wp-json/wp/v2/' + 'news/' + id + '?_embed';
28 28
     return this.http.get(route);
29 29
   }
30
+
31
+  getAllYoutube() {
32
+    return this.http.get(
33
+      "../assets/api/youtube-data.json"
34
+      // https://youtube.googleapis.com/youtube/v3/search?part=snippet&channelId=UCfZdHbI3pIN4uselPFzzbOg&maxResults=5&order=date&key=AIzaSyDsRrS_dUxT_3PFaMZIBBdrbl37p_fqrNY
35
+    );
36
+  }
30 37
 }

+ 182 - 0
src/assets/api/youtube-data.json

@@ -0,0 +1,182 @@
1
+{
2
+  "kind": "youtube#searchListResponse",
3
+  "etag": "Epvia07TkaHlHcZzjhjK3NZbv-4",
4
+  "nextPageToken": "CAUQAA",
5
+  "regionCode": "TH",
6
+  "pageInfo": {
7
+    "totalResults": 13399,
8
+    "resultsPerPage": 5
9
+  },
10
+  "items": [
11
+    {
12
+      "kind": "youtube#searchResult",
13
+      "etag": "0Y_VBBo_UMU0M0-e1KA-qJCopgg",
14
+      "id": {
15
+        "kind": "youtube#video",
16
+        "videoId": "JXM0627moMU"
17
+      },
18
+      "snippet": {
19
+        "publishedAt": "2022-11-01T07:06:50Z",
20
+        "channelId": "UCfZdHbI3pIN4uselPFzzbOg",
21
+        "title": "Color Of Life [01-11-2022 I 14:00 - 15:00 น. ]",
22
+        "description": "Color Of Life [01-11-2022 I 14:00 - 15:00 น. ] ดำเนินรายการโดย สมเกียรติ คุณานิธิพงศ์ และแม่ช้อยนางรำ สันติ เศวตวิมล ฟังออนไลน์ได้ที่ ...",
23
+        "thumbnails": {
24
+          "default": {
25
+            "url": "https://i.ytimg.com/vi/JXM0627moMU/default_live.jpg",
26
+            "width": 120,
27
+            "height": 90
28
+          },
29
+          "medium": {
30
+            "url": "https://i.ytimg.com/vi/JXM0627moMU/mqdefault_live.jpg",
31
+            "width": 320,
32
+            "height": 180
33
+          },
34
+          "high": {
35
+            "url": "https://i.ytimg.com/vi/JXM0627moMU/hqdefault_live.jpg",
36
+            "width": 480,
37
+            "height": 360
38
+          }
39
+        },
40
+        "channelTitle": "FM99 ActiveRadio",
41
+        "liveBroadcastContent": "live",
42
+        "publishTime": "2022-11-01T07:06:50Z"
43
+      }
44
+    },
45
+    {
46
+      "kind": "youtube#searchResult",
47
+      "etag": "SGCS0buUo10TEELuyTbUOKVY7Xk",
48
+      "id": {
49
+        "kind": "youtube#video",
50
+        "videoId": "poDF-Bo9vZM"
51
+      },
52
+      "snippet": {
53
+        "publishedAt": "2022-11-01T07:03:56Z",
54
+        "channelId": "UCfZdHbI3pIN4uselPFzzbOg",
55
+        "title": "Motor Intrend  [01-11-2022 l 13:00 - 14:00 น. ]",
56
+        "description": "Motor Intrend [01-11-2022 l 13:00 - 14:00 น. ] ดำเนินรายการโดย เฮียก่ำ สมบูรณ์ และเฮียณัฐ เสตะจันทร์ www.fm99activeradio.com ...",
57
+        "thumbnails": {
58
+          "default": {
59
+            "url": "https://i.ytimg.com/vi/poDF-Bo9vZM/default.jpg",
60
+            "width": 120,
61
+            "height": 90
62
+          },
63
+          "medium": {
64
+            "url": "https://i.ytimg.com/vi/poDF-Bo9vZM/mqdefault.jpg",
65
+            "width": 320,
66
+            "height": 180
67
+          },
68
+          "high": {
69
+            "url": "https://i.ytimg.com/vi/poDF-Bo9vZM/hqdefault.jpg",
70
+            "width": 480,
71
+            "height": 360
72
+          }
73
+        },
74
+        "channelTitle": "FM99 ActiveRadio",
75
+        "liveBroadcastContent": "none",
76
+        "publishTime": "2022-11-01T07:03:56Z"
77
+      }
78
+    },
79
+    {
80
+      "kind": "youtube#searchResult",
81
+      "etag": "nN6VLHMJhxlIBQuBEIcR6Ct9wxs",
82
+      "id": {
83
+        "kind": "youtube#video",
84
+        "videoId": "Znw4acOwB9E"
85
+      },
86
+      "snippet": {
87
+        "publishedAt": "2022-11-01T06:02:47Z",
88
+        "channelId": "UCfZdHbI3pIN4uselPFzzbOg",
89
+        "title": "เกาะกระแสกีฬาไทย  [01-11-2022 l 12:30 - 13:00 น.]",
90
+        "description": "เกาะกระแสกีฬาไทย [01-11-2022 l 12:30 - 13:00 น.] ดำเนินรายการโดย เจ๋ง ทรงศักดิ์ www.fm99activeradio.com ...",
91
+        "thumbnails": {
92
+          "default": {
93
+            "url": "https://i.ytimg.com/vi/Znw4acOwB9E/default.jpg",
94
+            "width": 120,
95
+            "height": 90
96
+          },
97
+          "medium": {
98
+            "url": "https://i.ytimg.com/vi/Znw4acOwB9E/mqdefault.jpg",
99
+            "width": 320,
100
+            "height": 180
101
+          },
102
+          "high": {
103
+            "url": "https://i.ytimg.com/vi/Znw4acOwB9E/hqdefault.jpg",
104
+            "width": 480,
105
+            "height": 360
106
+          }
107
+        },
108
+        "channelTitle": "FM99 ActiveRadio",
109
+        "liveBroadcastContent": "none",
110
+        "publishTime": "2022-11-01T06:02:47Z"
111
+      }
112
+    },
113
+    {
114
+      "kind": "youtube#searchResult",
115
+      "etag": "yOpIXnqHzU92tD1PpDzKDgL8D0s",
116
+      "id": {
117
+        "kind": "youtube#video",
118
+        "videoId": "Yo7xp1OEbHU"
119
+      },
120
+      "snippet": {
121
+        "publishedAt": "2022-11-01T05:05:30Z",
122
+        "channelId": "UCfZdHbI3pIN4uselPFzzbOg",
123
+        "title": "MSM Action [01-11-2022 I 11:00 - 12:00 น.]",
124
+        "description": "MSM Action [01-11-2022 I 11:00 - 12:00 น.] ดำเนินรายการโดย เปอ นพฤทธิ์ เก่ง มนต์ชัยและจีน viewfinder ฟังออนไลน์ได้ที่ ...",
125
+        "thumbnails": {
126
+          "default": {
127
+            "url": "https://i.ytimg.com/vi/Yo7xp1OEbHU/default.jpg",
128
+            "width": 120,
129
+            "height": 90
130
+          },
131
+          "medium": {
132
+            "url": "https://i.ytimg.com/vi/Yo7xp1OEbHU/mqdefault.jpg",
133
+            "width": 320,
134
+            "height": 180
135
+          },
136
+          "high": {
137
+            "url": "https://i.ytimg.com/vi/Yo7xp1OEbHU/hqdefault.jpg",
138
+            "width": 480,
139
+            "height": 360
140
+          }
141
+        },
142
+        "channelTitle": "FM99 ActiveRadio",
143
+        "liveBroadcastContent": "none",
144
+        "publishTime": "2022-11-01T05:05:30Z"
145
+      }
146
+    },
147
+    {
148
+      "kind": "youtube#searchResult",
149
+      "etag": "rg3juQB2wGg76UkOvxrG078ueN4",
150
+      "id": {
151
+        "kind": "youtube#video",
152
+        "videoId": "7vCjUyqoI2Q"
153
+      },
154
+      "snippet": {
155
+        "publishedAt": "2022-11-01T04:03:58Z",
156
+        "channelId": "UCfZdHbI3pIN4uselPFzzbOg",
157
+        "title": "Active Entertain   [01-11-2022 l 09:00 - 10:00 น.]",
158
+        "description": "Active Entertain [01-11-2022 l 09:00 - 10:00 น.] ดำเนินรายการโดย พัตโตะและกีรติ ฟังออนไลน์ได้ที่ www.fm99activeradio.com ...",
159
+        "thumbnails": {
160
+          "default": {
161
+            "url": "https://i.ytimg.com/vi/7vCjUyqoI2Q/default.jpg",
162
+            "width": 120,
163
+            "height": 90
164
+          },
165
+          "medium": {
166
+            "url": "https://i.ytimg.com/vi/7vCjUyqoI2Q/mqdefault.jpg",
167
+            "width": 320,
168
+            "height": 180
169
+          },
170
+          "high": {
171
+            "url": "https://i.ytimg.com/vi/7vCjUyqoI2Q/hqdefault.jpg",
172
+            "width": 480,
173
+            "height": 360
174
+          }
175
+        },
176
+        "channelTitle": "FM99 ActiveRadio",
177
+        "liveBroadcastContent": "none",
178
+        "publishTime": "2022-11-01T04:03:58Z"
179
+      }
180
+    }
181
+  ]
182
+}

+ 1 - 0
src/assets/icon/menu-alt-left-svgrepo-com.svg

@@ -0,0 +1 @@
1
+<svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M4 11h12v2H4zm0-5h16v2H4zm0 12h7.235v-2H4z"/></svg>

+ 1 - 0
src/assets/icon/menu-svgrepo-com.svg

@@ -0,0 +1 @@
1
+<svg width="24px" height="24px" viewBox="-5 -7 24 24" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin" class="jam jam-menu"><path d='M1 0h5a1 1 0 1 1 0 2H1a1 1 0 1 1 0-2zm7 8h5a1 1 0 0 1 0 2H8a1 1 0 1 1 0-2zM1 4h12a1 1 0 0 1 0 2H1a1 1 0 1 1 0-2z' /></svg>

+ 6 - 1
src/global.scss

@@ -79,6 +79,11 @@
79 79
 }
80 80
 
81 81
 
82
+// ion-menu-button {
83
+//   --background: rgb(221, 221, 222);
84
+//   --color: darkorange;
85
+// }
86
+
82 87
 ion-content {
83 88
   // --ion-background-color: #111D12;
84 89
   --background: url('./assets/img-static/bg-content-min.jpg') no-repeat 
@@ -110,7 +115,7 @@ h3 {
110 115
 }
111 116
 
112 117
 .head-img {
113
-  width: 15%;
118
+  width: 18%;
114 119
   display: flex;
115 120
   margin-left: 10px;
116 121
   margin-top: 5px;