diff --git a/package-lock.json b/package-lock.json
index e5e6590..d6444f0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5564,30 +5564,11 @@
"xmlhttprequest": "^1.8.0"
},
"dependencies": {
- "base64url": {
- "version": "2.0.0",
- "resolved": "https://registry.npmjs.org/base64url/-/base64url-2.0.0.tgz",
- "integrity": "sha1-6sFuA+oUOO/5Qj1puqNiYu0fcLs="
- },
- "buffer-equal-constant-time": {
- "version": "1.0.1",
- "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
- "integrity": "sha1-+OcRMvf/5uAaXJaXpMbz5I1cyBk="
- },
"dom-storage": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/dom-storage/-/dom-storage-2.0.2.tgz",
"integrity": "sha1-7RfL9oq9EOCu+BgnE+KXxeS1ALA="
},
- "ecdsa-sig-formatter": {
- "version": "1.0.9",
- "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.9.tgz",
- "integrity": "sha1-S8kmJ07Dtau1AW5+HWCSGsJisqE=",
- "requires": {
- "base64url": "^2.0.0",
- "safe-buffer": "^5.0.1"
- }
- },
"faye-websocket": {
"version": "0.9.3",
"resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.9.3.tgz",
@@ -5618,35 +5599,23 @@
}
},
"jsonwebtoken": {
- "version": "7.4.0",
- "resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-7.4.0.tgz",
- "integrity": "sha1-UVvyu6Bw7GFbrZf9LpRQJ+tHaUY=",
+ "version": "7.4.3",
+ "resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-7.4.3.tgz",
+ "integrity": "sha1-d/UCHeBYtgWheD+hKD6ZgS5kVjg=",
"requires": {
"joi": "^6.10.1",
"jws": "^3.1.4",
"lodash.once": "^4.0.0",
- "ms": "^0.7.1",
+ "ms": "^2.0.0",
"xtend": "^4.0.1"
}
},
- "jwa": {
- "version": "1.1.5",
- "resolved": "https://registry.npmjs.org/jwa/-/jwa-1.1.5.tgz",
- "integrity": "sha1-oFUs4CIHQs1S4VN3SjKQXDDnVuU=",
- "requires": {
- "base64url": "2.0.0",
- "buffer-equal-constant-time": "1.0.1",
- "ecdsa-sig-formatter": "1.0.9",
- "safe-buffer": "^5.0.1"
- }
- },
"jws": {
- "version": "3.1.4",
- "resolved": "https://registry.npmjs.org/jws/-/jws-3.1.4.tgz",
- "integrity": "sha1-+ei5M46KhHJ31kRLFGT2GIDgUKI=",
+ "version": "3.2.2",
+ "resolved": "https://registry.npmjs.org/jws/-/jws-3.2.2.tgz",
+ "integrity": "sha512-YHlZCB6lMTllWDtSPHz/ZXTsi8S00usEV6v1tjq8tOUZzw7DpSDWVXjXDre6ed1w/pd495ODpHZYSdkRTsa0HA==",
"requires": {
- "base64url": "^2.0.0",
- "jwa": "^1.1.4",
+ "jwa": "^1.4.1",
"safe-buffer": "^5.0.1"
}
},
@@ -5670,11 +5639,6 @@
"resolved": "https://registry.npmjs.org/promise-polyfill/-/promise-polyfill-6.0.2.tgz",
"integrity": "sha1-2chtPcTcLfkBboiUbe/Wm0m0EWI="
},
- "safe-buffer": {
- "version": "5.0.1",
- "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.0.1.tgz",
- "integrity": "sha1-0mPKVGls2KMGtcplUekt5XkY++c="
- },
"topo": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/topo/-/topo-1.1.0.tgz",
@@ -5707,6 +5671,46 @@
"integrity": "sha1-pcbVMr5lbiPbgg77lDofBJmNY68="
}
}
+ },
+ "hoek": {
+ "version": "2.16.3",
+ "resolved": "https://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz",
+ "integrity": "sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0="
+ },
+ "isemail": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/isemail/-/isemail-1.2.0.tgz",
+ "integrity": "sha1-vgPfjMPineTSxd9lASY/H6RZXpo="
+ },
+ "joi": {
+ "version": "6.10.1",
+ "resolved": "https://registry.npmjs.org/joi/-/joi-6.10.1.tgz",
+ "integrity": "sha1-TVDDGAeRIgAP5fFq8f+OGRe3fgY=",
+ "requires": {
+ "hoek": "2.x.x",
+ "isemail": "1.x.x",
+ "topo": "1.x.x"
+ }
+ },
+ "jsonwebtoken": {
+ "version": "7.4.3",
+ "resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-7.4.3.tgz",
+ "integrity": "sha1-d/UCHeBYtgWheD+hKD6ZgS5kVjg=",
+ "requires": {
+ "joi": "^6.10.1",
+ "jws": "^3.1.4",
+ "lodash.once": "^4.0.0",
+ "ms": "^2.0.0",
+ "xtend": "^4.0.1"
+ }
+ },
+ "topo": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/topo/-/topo-1.1.0.tgz",
+ "integrity": "sha1-6ddRYV0buH3IZdsYL6HKCl71NtU=",
+ "requires": {
+ "hoek": "2.x.x"
+ }
}
}
},
@@ -7220,6 +7224,16 @@
"integrity": "sha512-wPVv/y/QQ/Uiirj/vh3oP+1Ww+AWehmi1g5fFWGPF6IpCBCDVrhgHRMvrLfdYcwDh3QJbGXDW4JAuzxElLSqKA==",
"dev": true
},
+ "ionic4-rating": {
+ "version": "1.0.9",
+ "resolved": "https://registry.npmjs.org/ionic4-rating/-/ionic4-rating-1.0.9.tgz",
+ "integrity": "sha512-mv5z6IODHYC5J2caiowFEYYhXDUPzwGpfA0aSku0Fikpzcg418WOwZvfygW5NQ2/mX3jSZjwfxRuzSXcR+EDXw=="
+ },
+ "ionic4-star-rating": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/ionic4-star-rating/-/ionic4-star-rating-1.1.1.tgz",
+ "integrity": "sha512-6lwaT2ZuAN5byRKmAdbigvTKz2dIHnxZ2/1AHD2qscjZ9QfwLCITiNRVi34cEX42wJwXespEvUfrTf4oiAEKCw=="
+ },
"ionicons": {
"version": "4.6.3",
"resolved": "https://registry.npmjs.org/ionicons/-/ionicons-4.6.3.tgz",
@@ -9504,6 +9518,14 @@
"integrity": "sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==",
"dev": true
},
+ "ng-starrating": {
+ "version": "1.0.11",
+ "resolved": "https://registry.npmjs.org/ng-starrating/-/ng-starrating-1.0.11.tgz",
+ "integrity": "sha512-A+CJmrAjBhzm1U0SfTd8QW7l0iQpTxKrAlo5Z+nlR2xctiPOycyY0Xym4885fkOfytXeoEKERlSEvlEz3nqQmw==",
+ "requires": {
+ "tslib": "^1.9.0"
+ }
+ },
"nice-try": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
diff --git a/package.json b/package.json
index ec5831e..02ab1be 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,9 @@
"core-js": "^2.5.4",
"firebase": "^7.5.2",
"firebase-import": "^2.2.0",
+ "ionic4-rating": "^1.0.9",
+ "ionic4-star-rating": "^1.1.1",
+ "ng-starrating": "^1.0.11",
"rxjs": "~6.5.1",
"tslib": "^1.9.0",
"xml2json": "^0.11.2",
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 65b00ab..41ecfd2 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -3,6 +3,7 @@ import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
+import { StarRatingComponent } from 'ng-starrating';
@Component({
selector: 'app-root',
@@ -24,4 +25,11 @@ export class AppComponent {
this.splashScreen.hide();
});
}
+
+ onRate($event:{oldValue:number, newValue:number, starRating:StarRatingComponent}) {
+ alert(`Old Value:${$event.oldValue},
+ New Value: ${$event.newValue},
+ Checked Color: ${$event.starRating.checkedcolor},
+ Unchecked Color: ${$event.starRating.uncheckedcolor}`);
+ }
}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index ea1cdf5..8f1df69 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -11,6 +11,7 @@ import firebaseConfig from './firebase';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
+import { RatingModule } from 'ng-starrating'
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
@@ -29,7 +30,8 @@ import { TransformProvider } from './providers/transform';
AngularFireModule.initializeApp(firebaseConfig),
AngularFireAuthModule,
AngularFirestoreModule,
- HttpClientModule
+ HttpClientModule,
+ RatingModule,
],
providers: [
StatusBar,
diff --git a/src/app/review/review.module.ts b/src/app/review/review.module.ts
index d97aa65..663d59b 100644
--- a/src/app/review/review.module.ts
+++ b/src/app/review/review.module.ts
@@ -7,13 +7,15 @@ import { IonicModule } from '@ionic/angular';
import { ReviewPageRoutingModule } from './review-routing.module';
import { ReviewPage } from './review.page';
+import { StarRatingModule } from 'ionic4-star-rating'
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
- ReviewPageRoutingModule
+ ReviewPageRoutingModule,
+ StarRatingModule,
],
declarations: [ReviewPage]
})
diff --git a/src/app/review/review.page.html b/src/app/review/review.page.html
index 4f49e75..4b2c353 100644
--- a/src/app/review/review.page.html
+++ b/src/app/review/review.page.html
@@ -8,13 +8,9 @@
Rate
This
Game
-
-
-
-
-
-
-
+
+
+
diff --git a/src/app/review/review.page.scss b/src/app/review/review.page.scss
index a1e7bf4..bb5a34f 100644
--- a/src/app/review/review.page.scss
+++ b/src/app/review/review.page.scss
@@ -39,6 +39,15 @@ ion-content{
// height: 100%;
background-color: white;
}
+.rating {
+ ion-icon {
+ color: gray;
+
+ &.filled {
+ color: #ffb400;
+ }
+ }
+ }
// ::-webkit-scrollbar {
// width: 0px; /* Remove scrollbar space */
diff --git a/src/app/review/review.page.ts b/src/app/review/review.page.ts
index 19cb57e..62910de 100644
--- a/src/app/review/review.page.ts
+++ b/src/app/review/review.page.ts
@@ -1,7 +1,9 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChildren } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
import { UserService } from '../user.service';
import { HttpClientModule } from '@angular/common/http';
+import { StarRatingComponent } from 'ng-starrating';
+import { Observable } from 'rxjs'
@Component({
selector: 'app-review',
@@ -13,21 +15,23 @@ export class ReviewPage implements OnInit {
comment: string
players: number
time: number
+ rating: string = '5';
constructor(
public afstore: AngularFirestore,
public user: UserService,
- public http: HttpClientModule
+ public http: HttpClientModule,
) { }
ngOnInit() {
}
- createPost(){
+ async addReview(){
const comment = this.comment
const players = this.players
const time = this.time
const uid = this.user.getUID()
+ const rate = this.rating
console.log(comment,players,time,uid)
this.afstore.collection("review").add({
feedback: comment,
@@ -35,9 +39,14 @@ export class ReviewPage implements OnInit {
duration: time,
user: uid,
gameid: "123456",
- rating: 5
+ rating: rate
})
}
+ updateStar($event:{oldValue:number, newValue:number, starRating:StarRatingComponent}) {
+ this.rating=$event.newValue.toString();
+ console.log(this.rating)
+ }
+
}
diff --git a/src/app/tabs/tabs.module.ts b/src/app/tabs/tabs.module.ts
index 52b6ff9..7320d8b 100644
--- a/src/app/tabs/tabs.module.ts
+++ b/src/app/tabs/tabs.module.ts
@@ -7,7 +7,6 @@ import { IonicModule } from '@ionic/angular';
import { TabsPageRoutingModule } from './tabs-routing.module';
import { TabsPage } from './tabs.page';
-
@NgModule({
imports: [
CommonModule,