-Up to angular 8

-Added candidates
-Added ads(old)

package.json

@@ -7,45 +7,46 @@
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",
-    "e2e": "ng e2e"
+    "e2e": "ng e2e",
+    "deploy": "ng build --prod --baseHref=https://app.standupma.com/vote/ & cd D:\\Workspaces\\StandUP\\AppConfigFirebase\\public\\vote & rm -r * & XCOPY D:\\Workspaces\\StandUP\\StandUPVoting\\dist\\StandUPVoting\\* . /s /e /y & cd ../.. & firebase deploy --only hosting"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~7.2.0",
+    "@angular/animations": "^8.2.14",
-    "@angular/common": "~7.2.0",
+    "@angular/common": "^8.2.14",
-    "@angular/compiler": "~7.2.0",
+    "@angular/compiler": "^8.2.14",
-    "@angular/core": "~7.2.0",
+    "@angular/core": "^8.2.14",
-    "@angular/forms": "~7.2.0",
+    "@angular/forms": "^8.2.14",
-    "@angular/platform-browser": "~7.2.0",
+    "@angular/platform-browser": "^8.2.14",
-    "@angular/platform-browser-dynamic": "~7.2.0",
+    "@angular/platform-browser-dynamic": "^8.2.14",
-    "@angular/router": "~7.2.0",
+    "@angular/router": "^8.2.14",
-    "angularfire2": "^5.1.1",
+    "angularfire2": "^5.2.3",
-    "core-js": "^2.5.4",
+    "core-js": "^2.6.10",
-    "firebase": "^5.8.4",
+    "firebase": "^5.11.1",
-    "ng2-adsense": "^5.4.0",
+    "ng2-adsense": "^5.4.3",
-    "rxjs": "~6.3.3",
+    "rxjs": "~6.5.3",
-    "tslib": "^1.9.0",
+    "tslib": "^1.10.0",
-    "zone.js": "~0.8.26"
+    "zone.js": "~0.9.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.13.0",
+    "@angular-devkit/build-angular": "~0.803.20",
-    "@angular/cli": "~7.3.3",
+    "@angular/cli": "^8.3.20",
-    "@angular/compiler-cli": "~7.2.0",
+    "@angular/compiler-cli": "^8.2.14",
-    "@angular/language-service": "~7.2.0",
+    "@angular/language-service": "^8.2.14",
-    "@types/node": "~8.9.4",
     "@types/jasmine": "~2.8.8",
-    "@types/jasminewd2": "~2.0.3",
+    "@types/jasminewd2": "^2.0.8",
-    "codelyzer": "~4.5.0",
+    "@types/node": "~8.9.4",
+    "codelyzer": "^5.0.1",
     "jasmine-core": "~2.99.1",
     "jasmine-spec-reporter": "~4.2.1",
     "karma": "~4.0.0",
     "karma-chrome-launcher": "~2.2.0",
-    "karma-coverage-istanbul-reporter": "~2.0.1",
+    "karma-coverage-istanbul-reporter": "^2.0.6",
     "karma-jasmine": "~1.1.2",
     "karma-jasmine-html-reporter": "^0.2.2",
     "protractor": "~5.4.0",
     "ts-node": "~7.0.0",
     "tslint": "~5.11.0",
-    "typescript": "~3.2.2"
+    "typescript": "~3.5.3"
   }
 }

src/app/app.component.html

@@ -1,8 +1,33 @@
 <div class="container" dir="rtl">
+  <!--<button (click)="totalvotes()">test</button>
+  <p *ngIf="items">
+    {{ items.length }}
+  </p>-->
   <h2>تصويت</h2>
-  <h3>شكون غادي يكون النجم ديال #ستانداب في موسمه الثالث؟🤩🤔🏆</h3>
+  <ng-adsense
+    [adFormat]="'auto'"
+    [adSlot]="2412324748"
+    [display]="'block'">
+  </ng-adsense>
+  <div>
+    <h3>شكون غادي يكون النجم ديال #ستانداب في موسمه الرابع؟🤩🤔🏆</h3>
   <h4>صوتو الآن و كونو نتوما الحكم 📲🤓</h4>
+  </div>
+  <div class="CircleContainer">
+    <ul class='loading-frame'>
+      <div class='circle'></div>
+      <div class='circle'></div>
+      <div class='circle'></div>
+      <div class='circle'></div>
+      <div class='circle'></div>
+      <div class='circle'></div>
+      <div class='circle'></div>
+      <div class='circle'></div>
+    </ul>
+  </div>
   <p class="placeholder">دردشة
+    REGARDER
+    شاهد الآن
     شات
     محادثة
     chat maroc
@@ -28,7 +53,7 @@
     Stand UP Maroc
     live video
   </p>
-  <ng-adsense
+  <!--<ng-adsense
     [adFormat]="'auto'"
     [adSlot]="2412324748"
     [display]="'block'">
@@ -38,15 +63,40 @@
     [adFormat]="'auto'"
     [adSlot]="2412324748"
     [display]="'block'">
+  </ng-adsense>-->
+  <ul>
+    <div *ngFor="let candidate of candidates | async">
+      <li *ngIf="candidate.id == 1 || candidate.id ==2">
+        <img (click)="vote(candidate)" [alt]="candidate.name" [ngClass]="getVoteClasses(candidate.id)"
+             [src]="candidate.img">
+        <h4>{{candidate.name}}</h4>
+        <p>{{candidate.votes}} تصويت</p>
+      </li>
+    </div>
+  </ul>
+  <ng-adsense [adFormat]="'fluid'" [adSlot]="5655939569" [display]="'block'" [layoutKey]="'-i8+j-1k-55+f9'">
   </ng-adsense>
   <ul>
-    <li *ngFor="let candidate of candidates | async">
+    <div *ngFor="let candidate of candidates | async">
-      <img (click)="vote(candidate)" [alt]="candidate.name" [ngClass]="getVoteClasses(candidate.id)"
+      <li *ngIf="candidate.id == 3 || candidate.id == 4">
-           [src]="candidate.img">
+        <img (click)="vote(candidate)" [alt]="candidate.name" [ngClass]="getVoteClasses(candidate.id)"
-      <h4>{{candidate.name}}</h4>
+             [src]="candidate.img">
-      <p>{{candidate.votes}} تصويت</p>
+        <h4>{{candidate.name}}</h4>
-    </li>
+        <p>{{candidate.votes}} تصويت</p>
-
+      </li>
+    </div>
+  </ul>
+  <ng-adsense [adFormat]="'fluid'" [adSlot]="5655939569" [display]="'block'" [layoutKey]="'-i8+j-1k-55+f9'">
+  </ng-adsense>
+  <ul>
+    <div *ngFor="let candidate of candidates | async">
+      <li *ngIf="candidate.id == 5 || candidate.id == 6">
+        <img (click)="vote(candidate)" [alt]="candidate.name" [ngClass]="getVoteClasses(candidate.id)"
+             [src]="candidate.img">
+        <h4>{{candidate.name}}</h4>
+        <p>{{candidate.votes}} تصويت</p>
+      </li>
+    </div>
   </ul>
   <ng-adsense
     [adFormat]="'auto'"

src/app/app.component.scss

@@ -77,3 +77,72 @@
   flex-direction: column;
   justify-content: center;
 }
+
+.CircleContainer {
+  height: 75px;
+}
+
+.loading-frame {
+  position: absolute;
+  padding: 0;
+  margin: 0;
+  left: 50%;
+}
+
+.circle {
+  position: absolute;
+  height: 13px;
+  width: 13px;
+  border-radius: 13px;
+  background-color: #f30000;
+  animation: animate linear 2s infinite;
+}
+
+.circle:nth-child(1) {
+  animation-delay: 0.5s;
+}
+
+.circle:nth-child(2) {
+  animation-delay: 0.7s;
+  transform: translate(0px, 15px);
+}
+
+.circle:nth-child(3) {
+  animation-delay: 0.9s;
+  transform: translate(0px, 30px);
+}
+
+.circle:nth-child(4) {
+  animation-delay: 0.9s;
+  transform: translate(-20px, 30px);
+}
+
+.circle:nth-child(5) {
+  animation-delay: 0.9s;
+  transform: translate(20px, 30px);
+}
+
+.circle:nth-child(6) {
+  animation-delay: 1.1s;
+  transform: translate(10px, 45px);
+}
+
+.circle:nth-child(7) {
+  animation-delay: 1.1s;
+  transform: translate(-10px, 45px);
+}
+
+.circle:nth-child(8) {
+  animation-delay: 1.3s;
+  transform: translate(0px, 60px);
+}
+
+@keyframes animate {
+  0%,
+  100% {
+    background-color: #f30000;
+  }
+  50% {
+    background-color: #000;
+  }
+}

src/app/app.component.ts

@@ -4,6 +4,15 @@ import {Observable} from 'rxjs';
 import {AngularFirestore} from 'angularfire2/firestore';
 import {HttpClient} from '@angular/common/http';
 
+export interface Vote {
+  candidate: number;
+  city: string;
+  country: string;
+  ip: string;
+  timestamp: string;
+}
+
+
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
@@ -13,17 +22,37 @@ export class AppComponent {
   public candidates: Observable<any[]>;
   private currentVoteID: any;
 
+  items: any;
 
   constructor(private db: AngularFirestore, private http: HttpClient) {
     this.candidates = db.collection('/Candidates').valueChanges();
   }
 
+  getRandomInt(min, max) {
+    min = Math.ceil(min);
+    max = Math.floor(max);
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+  }
   vote(candidate: any) {
-    console.log(this.currentVoteID);
+
-    if (this.currentVoteID === undefined) {
+    if (this.currentVoteID == undefined) {
+
       this.currentVoteID = candidate.id;
+
       candidate.votes++;
-      this.db.doc('/Candidates/' + candidate.id).update(candidate);
+
+      let CandidateRef = this.db.firestore.doc('/Candidates/' + candidate.id);
+      this.db.firestore.runTransaction(function(transaction) {
+        return transaction.get(CandidateRef).then(function(sfDoc) {
+          var newVotes = sfDoc.data().votes + 1;
+          transaction.update(CandidateRef, {votes: newVotes});
+        });
+      }).then(function() {
+
+      }).catch(function(error) {
+        console.log('Transaction failed: ', error);
+      });
+
 
       try {
         this.getIP().subscribe((IPData: any) => {
@@ -45,7 +74,6 @@ export class AppComponent {
 
       }
     }
-
   }
 
   getIP() {
@@ -58,4 +86,39 @@ export class AppComponent {
       lost: this.currentVoteID && this.currentVoteID !== id,
     };
   }
+
+  totalvotes() {
+    console.log('getting');
+    /*
+    let itemsCollection: AngularFirestoreCollection<Vote> = this.db.collection<Vote>('votes');
+    this.items = itemsCollection.valueChanges();
+
+    this.db.firestore.collection('votes').get().then((data:any) => {
+      console.log(data);
+
+    }).catch(err => {
+      console.log("err"+err);
+
+    })*/
+
+
+    this.db.collection('votes', ref =>
+      ref.where('city', '==', 'Casablanca')
+    ).get().subscribe((data) => {
+      //this.items = JSON.stringify();
+      this.items = data.docs;
+
+      console.log('done');
+
+
+    });
+
+
+  }
+
+  getCandidateByIndex(i: number) {
+    this.candidates.subscribe(candidates => {
+      return candidates[i];
+    });
+  }
 }

src/polyfills.ts

@@ -43,7 +43,7 @@
  *
  * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
  * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
- * (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
  *
  *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
  *  with the following flag, it will bypass `zone.js` patch for IE/Edge
@@ -55,7 +55,7 @@
 /***************************************************************************************************
  * Zone JS is required by default for Angular itself.
  */
-import 'zone.js/dist/zone';  // Included with Angular CLI.
+import 'zone.js/dist/zone'; // Included with Angular CLI.
 
 
 /***************************************************************************************************

tsconfig.json

@@ -2,15 +2,16 @@
   "compileOnSave": false,
   "compilerOptions": {
     "baseUrl": "./",
+    "downlevelIteration": true,
     "outDir": "./dist/out-tsc",
     "sourceMap": true,
     "declaration": false,
-    "module": "es2015",
+    "module": "esnext",
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "importHelpers": true,
-    "target": "es5",
+    "target": "es2015",
     "typeRoots": [
       "node_modules/@types"
     ],

tslint.json

@@ -62,12 +62,12 @@
     ],
     "trailing-comma": false,
     "no-output-on-prefix": true,
-    "use-input-property-decorator": true,
+    "no-inputs-metadata-property": true,
-    "use-output-property-decorator": true,
+    "no-outputs-metadata-property": true,
-    "use-host-property-decorator": true,
+    "no-host-metadata-property": true,
     "no-input-rename": true,
     "no-output-rename": true,
-    "use-life-cycle-interface": true,
+    "use-lifecycle-interface": true,
     "use-pipe-transform-interface": true,
     "component-class-suffix": true,
     "directive-class-suffix": true