Initial Commit

package.json

@@ -19,7 +19,10 @@
     "@angular/platform-browser": "~7.2.0",
     "@angular/platform-browser-dynamic": "~7.2.0",
     "@angular/router": "~7.2.0",
+    "angularfire2": "^5.1.1",
     "core-js": "^2.5.4",
+    "firebase": "^5.8.4",
+    "ng2-adsense": "^5.4.0",
     "rxjs": "~6.3.3",
     "tslib": "^1.9.0",
     "zone.js": "~0.8.26"

src/app/app.component.html

@@ -1,21 +1,65 @@
-<!--The content below is only a placeholder and can be replaced.-->
+<div class="container" dir="rtl">
-<div style="text-align:center">
+  <h2>تصويت</h2>
-  <h1>
+  <ng-adsense
-    Welcome to {{ title }}!
+    [adFormat]="'auto'"
-  </h1>
+    [adSlot]="2946645009"
-  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
+    [display]="'inline-block'"
+    [height]="90"
+    [width]="180">
+  </ng-adsense>
+  <h3>شكون غادي يكون النجم ديال #ستانداب في موسمه الثالث؟🤩🤔🏆</h3>
+  <h4>صوتو الآن و كونو نتوما الحكم 📲🤓</h4>
+  <p class="placeholder">دردشة
+    شات
+    محادثة
+    chat maroc
+    chat
+    تصويت
+    مشارك
+    ربح
+    جوائز
+    بث مباشر
+    شاهد
+    فرجة
+    برامج
+    فيديوهات
+    مسلسلات
+    تفرج
+    مشاهدة بث مباشر
+    live
+    en direct
+    video
+    stream
+    streaming
+    Standup
+    Stand UP Maroc
+    live video
+  </p>
+  <ng-adsense
+    [adFormat]="'link'"
+    [adSlot]="4965257893"
+    [display]="'block'">
+  </ng-adsense>
+  <ng-adsense
+    [adFormat]="'auto'"
+    [adSlot]="2412324748"
+    [display]="'block'">
+  </ng-adsense>
+  <ul>
+    <li *ngFor="let candidate of candidates | async">
+      <img (click)="vote(candidate)" [alt]="candidate.name" [ngClass]="getVoteClasses(candidate.id)"
+           [src]="candidate.img">
+      <h4>{{candidate.name}}</h4>
+      <p>{{candidate.votes}} تصويت</p>
+    </li>
+
+  </ul>
+  <ng-adsense
+    [adFormat]="'auto'"
+    [adSlot]="2412324748"
+    [display]="'block'">
+  </ng-adsense>
+
 </div>
-<h2>Here are some links to help you start: </h2>
-<ul>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
-  </li>
-</ul>
 
 <router-outlet></router-outlet>

src/app/app.component.scss

@@ -0,0 +1,79 @@
+@import url(https://fonts.googleapis.com/earlyaccess/droidarabickufi.css);
+
+* {
+  font-family: 'Droid Arabic Kufi', sans-serif, 'trebuchet ms', 'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif;
+}
+
+.placeholder {
+  display: none;
+}
+
+.container {
+  margin: auto;
+  text-align: center;
+  padding-top: 4px;
+
+  ul {
+    list-style: none;
+    padding-left: 0;
+    padding-right: 0;
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+
+    li {
+      padding: 20px;
+
+      img {
+        width: 100px;
+        height: 100px;
+        border-radius: 50%;
+        box-shadow: 0 3px 4px 1px rgba(0, 0, 0, 0.1);
+        filter: grayscale(1);
+        border: 4px solid rgba(0, 0, 0, 0.2);
+        cursor: pointer;
+
+        &.elect {
+          border: 3px solid rgb(204, 54, 54);
+          box-shadow: 0 4px 7px 1px rgba(0, 0, 0, 0.1);
+          filter: grayscale(0);
+          cursor: default;
+        }
+
+        &.lost {
+          box-shadow: unset;
+          border: 4px solid rgba(0, 0, 0, 0.1);
+
+          &:hover {
+            filter: grayscale(1);
+            cursor: default;
+          }
+        }
+
+        &:hover {
+          filter: grayscale(0);
+        }
+      }
+
+      h4 {
+        font-size: 16px;
+        opacity: 0.9;
+        margin-bottom: 8px;
+        font-weight: lighter;
+      }
+
+      p {
+        font-size: 14px;
+        opacity: 0.6;
+        font-weight: bold;
+        margin: 4px 0;
+      }
+    }
+  }
+}
+
+.chart-box {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}

src/app/app.component.ts

@@ -1,4 +1,8 @@
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
+import {Observable} from 'rxjs';
+
+import {AngularFirestore} from 'angularfire2/firestore';
+import {HttpClient} from '@angular/common/http';
 
 @Component({
   selector: 'app-root',
@@ -6,5 +10,51 @@ import { Component } from '@angular/core';
   styleUrls: ['./app.component.scss'],
 })
 export class AppComponent {
-  title = 'StandUPVoting';
+  public candidates: Observable<any[]>;
+  private currentVoteID: any;
+
+
+  constructor(private db: AngularFirestore, private http: HttpClient) {
+    this.candidates = db.collection('/Candidates').valueChanges();
+  }
+
+  vote(candidate: any) {
+    if (candidate.id !== this.currentVoteID) {
+      this.currentVoteID = candidate.id;
+      candidate.votes++;
+      this.db.doc('/Candidates/' + candidate.id).update(candidate);
+
+      try {
+        this.getIP().subscribe((IPData: any) => {
+          const vote = {
+            candidate: candidate.id,
+            timestamp: Date.now(),
+            ip: IPData.query,
+            country: IPData.country,
+            city: IPData.city
+          };
+          this.db.collection('/votes').add(vote);
+        });
+      } catch (e) {
+        const vote = {
+          candidate: candidate.id,
+          timestamp: Date.now(),
+        };
+        this.db.collection('/votes').add(vote);
+
+      }
+    }
+
+  }
+
+  getIP() {
+    return this.http.get('http://ip-api.com/json');
+  }
+
+  getVoteClasses(id: any) {
+    return {
+      elect: this.currentVoteID && this.currentVoteID === id,
+      lost: this.currentVoteID && this.currentVoteID !== id,
+    };
+  }
 }

src/app/app.module.ts

@@ -1,8 +1,14 @@
-import { BrowserModule } from '@angular/platform-browser';
+import {BrowserModule} from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
+import {NgModule} from '@angular/core';
 
-import { AppRoutingModule } from './app-routing.module';
+import {AngularFirestoreModule} from 'angularfire2/firestore';
-import { AppComponent } from './app.component';
+import {AngularFireModule} from 'angularfire2';
+
+import {AppRoutingModule} from './app-routing.module';
+import {AppComponent} from './app.component';
+import {environment} from '../environments/environment';
+import {HttpClientModule} from '@angular/common/http';
+import {AdsenseModule} from 'ng2-adsense';
 
 @NgModule({
   declarations: [
@@ -10,7 +16,14 @@ import { AppComponent } from './app.component';
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    AppRoutingModule,
+    AngularFireModule.initializeApp(environment.firebase),
+    AngularFirestoreModule,
+    HttpClientModule,
+    AdsenseModule.forRoot({
+      adClient: 'ca-pub-2834067202174079',
+      adSlot: 4965257893,
+    })
   ],
   providers: [],
   bootstrap: [AppComponent]

src/environments/environment.prod.ts

@@ -1,3 +1,11 @@
 export const environment = {
-  production: true
+  production: true,
+  firebase: {
+    apiKey: 'AIzaSyCDnqRWXlm70g5erScWb9u5sNFbqjT1zG8',
+    authDomain: 'stand-up-2.firebaseapp.com',
+    databaseURL: 'https://stand-up-2.firebaseio.com',
+    projectId: 'stand-up-2',
+    storageBucket: 'stand-up-2.appspot.com',
+    messagingSenderId: '685966908054'
+  }
 };

src/environments/environment.ts

@@ -3,7 +3,15 @@
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
-  production: false
+  production: false,
+  firebase: {
+    apiKey: 'AIzaSyCDnqRWXlm70g5erScWb9u5sNFbqjT1zG8',
+    authDomain: 'stand-up-2.firebaseapp.com',
+    databaseURL: 'https://stand-up-2.firebaseio.com',
+    projectId: 'stand-up-2',
+    storageBucket: 'stand-up-2.appspot.com',
+    messagingSenderId: '685966908054'
+  }
 };
 
 /*

src/index.html

@@ -2,11 +2,13 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>StandUPVoting</title>
+  <title>تصويت</title>
   <base href="/">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+
+  <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
 </head>
 <body>
   <app-root></app-root>

src/styles.scss

@@ -1 +1,7 @@
 /* You can add global styles to this file, and also import other style files */
+body {
+  background: black url(http://standup.ma/wp-content/themes/gdaynews/images/rideau-header-arr.png);
+  background-size: cover;
+  color: white;
+  padding-top: 8px;
+}