Merge pull request #22 from SimonDamminga/Simon

Simon branch to test
SimonDamminga · Nov 7, 2018 · 68f620b · 68f620b
2 parents a034fa8 + 3737049
commit 68f620b
Show file tree

Hide file tree

Showing 31 changed files with 550 additions and 74 deletions.
diff --git a/README.md b/README.md
@@ -1,10 +1,9 @@
-## Dev omgeving opzetten
+# Dev omgeving opzetten
 
 ### v-host opzetten
 1. Open kladblok als administrator
-2. Ga naar open bestand
-3. Open bestand C:/Windows/System32/drivers/etc/hosts
-4. Voeg deze regel toe: 127.0.0.1 intro-tour.local
+2. Open bestand ``C:/Windows/System32/drivers/etc/hosts``
+3. Voeg deze regel toe: ``127.0.0.1 intro-tour.local``
 
 ### Apache v-hosts opzetten
 
@@ -18,18 +17,45 @@
     ServerName "intro-tour.local"
 </VirtualHost>
 ```
+(``{project root}`` moet je wel zelf invullen)
+
 3. Start apache opnieuw op
 
 ### Laravel Configureren
 
 1. Maak ``.env`` bestand aan in de root folder van het project
 2. Kopieer inhoud van ``.env.example`` in het nieuw aangemaakte ``.env`` bestand
-3. Verander regel 5 naar ``APP_URL=http://intro-tour.local``
-4. Run command ``php artisan key:generate``
+3. Pas de informatie in het ``.env`` bestand aan aan jou instellingen
+4. maak in dien nodig een database aan in [phpMyAdmin](http://localhost/phpmyadmin/index.php)
+4. Verander regel 5 naar ``APP_URL=http://intro-tour.local``
 5. Run command ``composer update``
+6. Run command ``php artisan key:generate``
+7. Run command ``php migrate:refresh --seed`` om de database te vullen met de test data
 
-# Angular werkend krijgen
+## Angular werkend krijgen
 
 1. install node.js
 2. run command ``npm install`` in intro-tour-client map (if this does not work load node installer and run repair) 
-3. run command ``npm start``
+3. run command ``npm start`` of ``ng serve -o``
+
+# Bugs aangeven
+Wil je een bug melden? Volg dan de volgende stappen:
+1. Ga naar [de issue pagina van onze repo](https://github.com/SimonDamminga/Intro-Tour/issues) om bugs te reporten
+2. Klik op de groene **New Issue** knop
+3. Klik op **Get Started**
+4. Volg de instructies in het template 
+Dit moet wel in markdown: [cheatsheet MD](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)
+5. Klik op de **Submit new issue** knop
+
+# Extra informatie
+
+Wij adviseren bij het testen van de locaties om de *Chrome browser* te gebruiken
+omdat Chrome de optie biedt om je geolocatie te manipuleren. Dit kan je doen door:
+1. Open het ``f12`` menu
+2. Klik op de drie puntjes rechts boven de pagina van het ``f12`` menu
+3. Klik op **meer tools**
+4. Zoek de optie **sensors**
+5. Dit opent het sensors menu
+6. Voer bij **geolocation** de gewenste locatie in door middel van:
+    * latitude
+    * longitude
diff --git a/intro-tour-client/src/app/app.component.ts b/intro-tour-client/src/app/app.component.ts
@@ -14,16 +14,19 @@ export class AppComponent {
   teamName;
   teamPin;
 
-  constructor (private teamService: TeamService, private localstorageService: LocalstorageService) {}
+  constructor (private teamService: TeamService, private localstorageService: LocalstorageService) {
+
+  }
 
   ngOnInit(){
     //teamname in header
-    if(this.localstorageService.getItem('team') == null){
-      this.teamService.currentTeamName.subscribe(name => this.teamName = name);
-    }else{
-      this.teamName = this.localstorageService.getItem('team').team_name;
-    }
-
+    setTimeout(() => {
+      if(this.localstorageService.getItem('team') == null){
+        this.teamService.teamName('INTRO TOUR');
+        this.teamService.currentTeamName.subscribe(name => this.teamName = name);
+      }else{
+        this.teamName = this.localstorageService.getItem('team').team_name;
+      }      
+    }, 100);
   }
-
 }
diff --git a/intro-tour-client/src/app/app.module.ts b/intro-tour-client/src/app/app.module.ts
@@ -16,11 +16,13 @@ import { TeamCreateComponent } from './components/team-create/team-create.compon
 import { MinutesSecondsPipe } from './pipes/minutes-seconds.pipe';
 import { LeaderboardComponent } from './components/leaderboard/leaderboard.component';
 import { PointReplacerPipe } from './pipes/point-replacer.pipe';
+import { TeamJoinComponent } from './components/team-join/team-join.component';
 
 const appRoutes: Routes = [
 	{ path: 'location', component: LocationPageComponent },
 	{ path: 'home', component: HomeComponent },
 	{ path: 'team-create', component: TeamCreateComponent },
+	{ path: 'team-join', component: TeamJoinComponent },
 	{ path: 'login', component: LoginComponent },
 	{ path: '', component: LoginComponent },
 	{ path: 'leaderboard', component: LeaderboardComponent }
@@ -36,7 +38,8 @@ const appRoutes: Routes = [
 		TeamCreateComponent,
 		MinutesSecondsPipe,
 		LeaderboardComponent,
-		PointReplacerPipe
+		PointReplacerPipe,
+		TeamJoinComponent
 	],
 	imports: [
 		BrowserModule,

diff --git a/intro-tour-client/src/app/components/home/home.component.css b/intro-tour-client/src/app/components/home/home.component.css
@@ -16,4 +16,7 @@
     left: 50%;
     bottom: 0px;
     transform: translate(-50%);
+}
+#team-pin-text{
+    font-size: 13px;
 }
diff --git a/intro-tour-client/src/app/components/home/home.component.html b/intro-tour-client/src/app/components/home/home.component.html
@@ -2,13 +2,15 @@
   <div class="ui card">
     <div class="content">
       <div class="header">Welkom {{usr.name}}</div>
+      <div class="description" *ngIf="team.team_leader == usr.id">
+        <p id="team-pin-text">Team Pin: {{team.team_pin}}</p>
+      </div>
     </div>
     <div class="content">
-      <h4 class="ui sub header">{{team.team_name}}</h4>
-      <h4 class="ui sub header">De team pincode is: {{team.team_pin}}</h4>
+      <h4 class="ui sub header">Het team bestaat uit {{totalMembers}} <span *ngIf="totalMembers == 1">persoon</span><span *ngIf="totalMembers > 1">personen</span></h4>
+      <div class="description" *ngFor="let member of members">
+        <p>{{member.name}} <span *ngIf="member.id == team.team_leader"><i class="fas fa-crown" style="color: #ffc938;"></i></span></p>
+      </div>
     </div>
   </div>
-  <div class="bottom">
-    <button class="ui button green big btn" (click)="getUsr()">Bekijk Team Info</button>
-  </div>
 </div>
diff --git a/intro-tour-client/src/app/components/home/home.component.ts b/intro-tour-client/src/app/components/home/home.component.ts
@@ -21,15 +21,18 @@ export class HomeComponent implements OnInit {
 	) { }
 
 	public teamPin: string;
+	public totalMembers: number = 0;
 	public name: string;
 	public id: number;
 	public team = {
 		team_name: '',
-		team_pin: ''
+		team_pin: '',
+		questions_answerd: []
 	};
 	public usr = {
 		name: ''
 	};
+	public members: Array<any>;
 
 	ngOnInit() {
 		// Subscribe to team name from the team service
@@ -40,7 +43,11 @@ export class HomeComponent implements OnInit {
 
 		if (localStorage.getItem('user') == null) {
 			this.userName.currentId.subscribe(id => this.id = id);
-			this.teamService.currentTeamPin.subscribe(teamPin => this.teamPin = teamPin);
+			this.teamService.currentTeamPin
+				.subscribe((teamPin) => {
+					this.localstorageService.setItem('teamPin', teamPin);
+					this.teamPin = this.localstorageService.getItem('teamPin');
+				});
 
 			//check if user is set
 			if (this.id == 0) {
@@ -51,28 +58,47 @@ export class HomeComponent implements OnInit {
 				this.participantsService.getUserById(this.id)
 					.subscribe((res) => {
 						//user opslaan in de loclastorage
-						this.localstorageService.setItem('user', res);
-						this.usr = this.localstorageService.getItem('user');
+						this.localstorageService.setItem('user', res[0]);
+						this.usr = this.localstorageService.getItem('user')
 					});
 				this.teamService.getTeamByTeamPin(this.teamPin)
 					.subscribe((res) => {
 						//team opslaan in localstorage
+						res[0].questions_answerd = [];
 						this.localstorageService.setItem('team', res[0]);
 						this.team = this.localstorageService.getItem('team');
 						this.teamService.teamName(res[0].team_name);
 					});
+				this.participantsService.getUsersByPin(this.teamPin)
+					.subscribe((res) => {
+						this.localstorageService.setItem('members', res);
+						this.members = this.localstorageService.getItem('members');
+						this.totalMembers = this.members.length;
+					});
 			}
 		} else {
 			//als de user al is opgeslagen in de localstorage
+			this.teamPin = this.localstorageService.getItem('teamPin');
 			this.usr = this.localstorageService.getItem('user');
 			this.team = this.localstorageService.getItem('team');
+
+
+			// temporary fix
+			this.participantsService.getUsersByPin(this.teamPin)
+			.subscribe((res) => {
+				this.localstorageService.setItem('members', res);
+				this.members = this.localstorageService.getItem('members');
+				this.totalMembers = this.members.length;
+			});
+			//end temporary fix
+
+			this.team.questions_answerd = [];
 		}
 
 	}
 
-
-	getUsr() {
-		console.log(this.usr);
+	getUsr(){
 		console.log(this.team);
+		console.log(this.usr);
 	}
 }
diff --git a/intro-tour-client/src/app/components/location-page/location-page.component.css b/intro-tour-client/src/app/components/location-page/location-page.component.css
@@ -39,6 +39,12 @@ agm-map{
     margin: 10px 0px 0px 20px;
     font-weight: bold;
 }
+.q-points{
+    font-family: 'Bree Serif', serif;
+    font-size: 20px;
+    margin: 5px 0px 0px 20px;
+    color: #c4c4c4;
+}
 .q-options{
     margin: 10px 0px 0px 20px;
     font-family: 'Bree Serif', serif;

diff --git a/intro-tour-client/src/app/components/location-page/location-page.component.html b/intro-tour-client/src/app/components/location-page/location-page.component.html
@@ -1,20 +1,31 @@
-<agm-map [latitude]="curLocation.x" [longitude]="curLocation.y" [zoom]="z">
+<agm-map [latitude]="curLocation.x" [longitude]="curLocation.y" [zoom]="z" [streetViewControl]="false" [zoomControl]="false">
 	<agm-marker [latitude]="curLocation.x" [longitude]="curLocation.y" [iconUrl]="icons[0]"></agm-marker>
 	<agm-marker *ngFor="let location of locations" [latitude]="location.latitude" [longitude]="location.longitude"
 	 [iconUrl]="icons[location.map_icon]" id="{{location.id}}">
-
+		<agm-circle [latitude]="location.latitude" [longitude]="location.longitude" [radius]="location.radius.data"></agm-circle>
 		<agm-info-window *ngIf="arePointsNear(location) && location.map_icon == 1">
-			<p><span class="info-window-title">Je bent in de buurt van de vraag </span> <br>klik op de knop om het event te
-				openen <br><b>voor {{location.points}} punten</b></p>
+			<p><span class="info-window-title">{{location.name}}</span>
+				<br><b>{{location.description}}</b><br>
+				<br>Je bent in de buurt van de vraag 
+				<br>klik op de knop om het event te openen 
+				<br>voor <b>{{location.points}}</b> punten
+			</p>
 			<button class="small green ui button" (click)="showWindow(location)">OPEN</button>
 		</agm-info-window>
 		<agm-info-window *ngIf="!arePointsNear(location) && location.map_icon == 1">
-			<p><span class="info-window-title">Je bent niet in de buurt</span> <br>kom hier heen om het event te doen <br><b>voor
-					{{location.points}} punten</b></p>
+			<p><span class="info-window-title">{{location.name}}</span> 
+				<br><b>{{location.description}}</b><br>
+				<br>Je bent niet in de buurt
+				<br>kom hier heen om het event te doen 
+				<br>voor <b>{{location.points}}</b> punten
+			</p>
 		</agm-info-window>
 		<agm-info-window *ngIf="location.map_icon == 2">
-			<p><span class="info-window-title">Je hebt dit event al gedaan</span> <br>Je hebt voor dit event <b>{{location.points}}</b>
-				punten gekregen</p>
+			<p><span class="info-window-title">{{location.name}}</span>
+				<br><b>{{location.description}}</b><br>
+				<br>Je hebt dit event al gedaan
+				<br>Je hebt voor dit event <b>{{location.points}}</b> punten gekregen
+			</p>
 		</agm-info-window>
 	</agm-marker>
 </agm-map>
@@ -24,18 +35,13 @@
 	<div id="popup-{{location.id}}" class="question-pop-up">
 		<div class="question-popup-content" *ngIf="question != undifined">
 			<form (ngSubmit)="checkAnswer(location.id)">
-				<div class="ui grid">
-					<div class="thirteen wide column">
-						<p class="q-title">{{question.question}} {{location.points}}</p>
-					</div>
-					<div class="three wide column">
-						<p class="q-title">{{timeRemaining | minutesSeconds}}</p>
-					</div>
-				</div>
+				<p class="q-title"><span>{{timeRemaining | minutesSeconds}}</span> | {{question.question}}</p>
+				<p class="q-points">{{location.points}} punten</p>
 				<p class="q-options" *ngFor="let answer of question.answers"><input type="radio" name="answer" (click)="setValue(answer.right_answer)">
 					{{answer.answer}}.</p>
 				<button type="submit" class="big one ui green button btn">Controleer</button>
 			</form>
+			<button class="normal one ui blue button" (click)='giveHint(location.id)' style="margin-left: 20px; margin-top: 50px;">Koop een hint voor ... punten</button>
 		</div>
 	</div>