siwat
/
REDACTED-1-AdvComProg-Final
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

stylize page

This commit is contained in:
Siwat Sirichai 2021-12-08 22:59:01 +07:00
parent e4002ce835
commit cbe88e15f4
4 changed files with 58 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
package-lock.json generated
View File

@ -19,6 +19,7 @@
"@capacitor/haptics": "1.1.3", "@capacitor/haptics": "1.1.3",
"@capacitor/keyboard": "1.1.3", "@capacitor/keyboard": "1.1.3",
"@capacitor/status-bar": "1.0.6", "@capacitor/status-bar": "1.0.6",
"@fortawesome/fontawesome-svg-core": "^1.2.36",
"@ionic/angular": "^5.5.2", "@ionic/angular": "^5.5.2",
"chart.js": "^3.6.2", "chart.js": "^3.6.2",
"ng2-charts": "^3.0.1", "ng2-charts": "^3.0.1",
@ -3041,6 +3042,27 @@
"url": "https://github.com/sponsors/sindresorhus" "url": "https://github.com/sponsors/sindresorhus"
} }
}, },
"node_modules/@fortawesome/fontawesome-common-types": {
"version": "0.2.36",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz",
"integrity": "sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg==",
"hasInstallScript": true,
"engines": {
"node": ">=6"
}
},
"node_modules/@fortawesome/fontawesome-svg-core": {
"version": "1.2.36",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.36.tgz",
"integrity": "sha512-YUcsLQKYb6DmaJjIHdDWpBIGCcyE/W+p/LMGvjQem55Mm2XWVAP5kWTMKWLv9lwpCVjpLxPyOMOyUocP1GxrtA==",
"hasInstallScript": true,
"dependencies": {
"@fortawesome/fontawesome-common-types": "^0.2.36"
},
"engines": {
"node": ">=6"
}
},
"node_modules/@humanwhocodes/config-array": { "node_modules/@humanwhocodes/config-array": {
"version": "0.5.0", "version": "0.5.0",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.5.0.tgz", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.5.0.tgz",
@ -22387,6 +22409,19 @@
} }
} }
}, },
"@fortawesome/fontawesome-common-types": {
"version": "0.2.36",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz",
"integrity": "sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg=="
},
"@fortawesome/fontawesome-svg-core": {
"version": "1.2.36",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.36.tgz",
"integrity": "sha512-YUcsLQKYb6DmaJjIHdDWpBIGCcyE/W+p/LMGvjQem55Mm2XWVAP5kWTMKWLv9lwpCVjpLxPyOMOyUocP1GxrtA==",
"requires": {
"@fortawesome/fontawesome-common-types": "^0.2.36"
}
},
"@humanwhocodes/config-array": { "@humanwhocodes/config-array": {
"version": "0.5.0", "version": "0.5.0",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.5.0.tgz", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.5.0.tgz",

1
package.json
View File

@ -24,6 +24,7 @@
"@capacitor/haptics": "1.1.3", "@capacitor/haptics": "1.1.3",
"@capacitor/keyboard": "1.1.3", "@capacitor/keyboard": "1.1.3",
"@capacitor/status-bar": "1.0.6", "@capacitor/status-bar": "1.0.6",
"@fortawesome/fontawesome-svg-core": "^1.2.36",
"@ionic/angular": "^5.5.2", "@ionic/angular": "^5.5.2",
"chart.js": "^3.6.2", "chart.js": "^3.6.2",
"ng2-charts": "^3.0.1", "ng2-charts": "^3.0.1",

29
src/app/tab1/tab1.page.html
View File

@ -8,17 +8,26 @@
<ion-toolbar> <ion-toolbar>
<ion-searchbar [(ngModel)]="searchbar" (search)="search($event)"></ion-searchbar> <ion-searchbar [(ngModel)]="searchbar" (search)="search($event)"></ion-searchbar>
</ion-toolbar> </ion-toolbar>
<ion-item *ngFor="let item of current"> <ion-card *ngFor="let item of current">
<ion-card-header style="height: 10px">{{item.time}}</ion-card-header>
<ion-card-title>
<ion-item>
<ion-icon size="large" name="apps-outline"></ion-icon>
<span class="text">
<center>
<h1>&nbsp;&nbsp;&nbsp;{{item.web}}</h1>
</center>
</span>
</ion-item>
</ion-card-title>
<ion-card-content>
<h6><b><ion-icon name="ellipsis-vertical-outline"></ion-icon>&nbsp;Category: </b>{{capitalizeFirstLetter(item.category)}}<br></h6>
<h6><b><ion-icon name="list-outline"></ion-icon>&nbsp;Type: </b>{{capitalizeFirstLetter(item.type)}}<br></h6>
</ion-card-content>
<h2><b>web: </b>{{item.web}}<br></h2> </ion-card>
<h6><b>category: </b>{{item.category}}<br></h6>
<h6><b>Type: </b>{{item.type}}<br></h6>
<h6><b>time: </b>{{item.time}}<br></h6>
</ion-item>
<ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)"> <ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
<ion-infinite-scroll-content <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data...">
loadingSpinner="bubbles"
loadingText="Loading more data...">
</ion-infinite-scroll-content> </ion-infinite-scroll-content>
</ion-infinite-scroll> </ion-infinite-scroll>
</ion-content> </ion-content>

4
src/app/tab1/tab1.page.ts
View File

@ -18,7 +18,9 @@ export class Tab1Page implements OnInit {
private itemperpage = 20 private itemperpage = 20
ngOnInit() { ngOnInit() {
} }
capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
search(event) { search(event) {
console.log(this.searchbar); console.log(this.searchbar);
var that=this var that=this