Skip to content

Commit

Permalink
Add Piece Forum (App v2.2.0)
Browse files Browse the repository at this point in the history 
Added PieceForumComponent (which is nested in PieceDashboardComponent).
Updated PieceService to serve PieceForumComponent (corresponding
functions are found there).
  • Loading branch information
@Taremeh
Taremeh committed May 21, 2018
1 parent 140e730 commit 60f1777
Show file tree
Hide file tree
Showing 8 changed files with 448 additions and 164 deletions.
4 changes: 2 additions & 2 deletions apphovenAlpha/app/App_Resources/Android/AndroidManifest.xml
View file
@@ -1,8 +1,8 @@
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="__PACKAGE__"
android:versionCode="10"
android:versionName="2.1.1">
android:versionCode="11"
android:versionName="2.2.0">

<supports-screens
android:smallScreens="true"
Expand Down
3 changes: 3 additions & 0 deletions apphovenAlpha/app/app.routing.ts
View file
Expand Up @@ -13,6 +13,7 @@ import { AudioRecorderComponent } from "./pages/audio-recorder/audio-recorder/au
import { AudioListComponent } from "./pages/audio-recorder/audio-list/audio-list.component";
import { AudioAnalyzerComponent } from "./pages/audio-recorder/audio-analyzer/audio-analyzer.component";
import { ProfileComponent } from "./pages/profile/profile.component";
import { PieceForumComponent } from "./pages/piece/piece-forum/piece-forum.component";

export const authProviders = [
AuthGuard
Expand All @@ -28,6 +29,7 @@ export const routes = [
{ path: 'addpiece', component: AddPieceComponent, canActivate: [AuthGuard] },
{ path: 'addpiece/registerpiece/:composerId', component: RegisterPieceComponent, canActivate: [AuthGuard] },
{ path: 'piece-db/:pieceId/:originType', component: PieceDashboardComponent, canActivate: [AuthGuard] },
{ path: 'piece-forum/:pieceId/:movementId', component: PieceForumComponent, canActivate: [AuthGuard] },
{ path: 'piece-list', component: PieceListComponent, canActivate: [AuthGuard] },
{ path: 'piece-recorder', component: PieceRecorderComponent, canActivate: [AuthGuard] },
{ path: 'practice-session', component: PracticeSessionComponent, canActivate: [AuthGuard] },
Expand All @@ -47,6 +49,7 @@ export const navigatableComponents = [
AddPieceComponent,
RegisterPieceComponent,
PieceDashboardComponent,
PieceForumComponent,
PieceListComponent,
PieceRecorderComponent,
PracticeSessionComponent,
Expand Down
17 changes: 13 additions & 4 deletions apphovenAlpha/app/pages/piece/piece-dashboard/piece-dashboard.component.html
View file
Expand Up @@ -5,13 +5,22 @@
<ScrollView orientation="horizontal">
<Label class="title-bold hugetitle" textWrap="true" text="{{ pieceTitle }}"></Label>
</ScrollView>
<Label class="piece-text" text="Work-Number: {{ pieceWorkNumber }}"></Label>
<Label class="piece-text" text="Movements: {{ pieceMovementAmount }}" visibility="{{pieceMovementAmount ? 'visible' : 'collapsed' }}"></Label>
<StackLayout *ngIf="!showPieceForum || movementId == -1">
<Label class="piece-text" text="Work-Number: {{ pieceWorkNumber }}"></Label>
<Label class="piece-text" text="Movements: {{ pieceMovementAmount }}" visibility="{{pieceMovementAmount ? 'visible' : 'collapsed' }}"></Label>
</StackLayout>
<StackLayout *ngIf="showPieceForum && movementId != -1">
<Label class="piece-text" text="Work-Number: {{ pieceWorkNumber }}"></Label>
<Label class="piece-text" text="Movement: {{ pieceMovementArrayAll[movementId].title }}"></Label>
</StackLayout>
</StackLayout>
</StackLayout>
<GridLayout rows="*, auto">
<StackLayout row="0" class="ah-main-container container-correction">
<StackLayout #pieceContainer class="piece-container">
<!-- PIECE-FORUM Component -->
<ah-piece-forum *ngIf="showPieceForum"></ah-piece-forum>
<!-- / PIECE-FORUM Component / -->
<StackLayout #pieceContainer class="piece-container" [visibility]="!showPieceForum ? 'visible' : 'collapsed'">
<StackLayout class="movement-container" visibility="{{pieceMovementAmount ? 'visible' : 'collapsed' }}">
<ListView [items]="selectedArray" separatorColor="white" (itemTap)="handleItemTap($event)">
<ng-template let-movement="item">
Expand All @@ -30,6 +39,6 @@
</StackLayout>
</StackLayout>
</StackLayout>
<Button row="1" class="bottom-button" [text]="toggleButtonText" (tap)="toggleRemainingMovements()"></Button>
<Button *ngIf="!showPieceForum && componentLoaded" row="1" class="bottom-button" [text]="toggleButtonText" (tap)="toggleRemainingMovements()"></Button>
</GridLayout>
</StackLayout>
179 changes: 22 additions & 157 deletions apphovenAlpha/app/pages/piece/piece-dashboard/piece-dashboard.component.ts
View file
Expand Up @@ -15,6 +15,8 @@ import { RouterExtensions } from "nativescript-angular/router";
import dialogs = require("ui/dialogs");
import { SwissArmyKnife } from "nativescript-swiss-army-knife";

import { PieceForumComponent } from "../piece-forum/piece-forum.component";

@Component({
selector: "ah-piece-db",
templateUrl: "pages/piece/piece-dashboard/piece-dashboard.component.html",
Expand Down Expand Up @@ -48,6 +50,11 @@ export class PieceDashboardComponent implements OnInit, OnDestroy {
public pieceMovementAmount: number;
public pieceComposer: string;

// Piece-Forum (Nested Component)
public componentLoaded: boolean = false;
public showPieceForum: boolean = false;
public movementId = -1;

// Observables
private listenerUnsubscribe: () => void;

Expand Down Expand Up @@ -83,97 +90,7 @@ export class PieceDashboardComponent implements OnInit, OnDestroy {
this.firestoreListen();
}

/*loadFirebaseData(initialize: boolean){
firebase.query(
(result) => {
if (result) {
console.log("Event type: " + result.type);
console.log("Key: " + result.key);
console.log("Value: " + JSON.stringify(result.value));
if(result.value.movementItem){
// Movements are available
// RESET Arrays
this.pieceMovementArray = [];
this.pieceMovementArrayNotSelected = [];
this.pieceMovementArrayAll = [];
this.selectedArray = [];
// Amount of movements
var len = result.value.movementItem.length;
for (let i = 0; i < len; i++) {
if (result.value.movementItem[i].state != 0){
// Add only movements to pieceMovementArray, that are being practiced
this.pieceMovementArray.push({
title: result.value.movementItem[i].title,
state: result.value.movementItem[i].state,
id: result.value.movementItem[i].id,
});
}
// Add all movements to pieceMovementArrayAll
this.pieceMovementArrayAll.push({
title: result.value.movementItem[i].title,
state: result.value.movementItem[i].state,
id: result.value.movementItem[i].id,
});
if(result.value.movementItem[i].lastUsed) {
this.pieceMovementArrayAll[i].lastUsed = result.value.movementItem[i].lastUsed;
}
}
if(initialize){
// Show only movements, that are being practiced (onInit)
this.selectedArray = this.pieceMovementArray;
} else {
// ngZone is needed here to update the Listview in case of:
// First action => Delete Movement
// (If the first action was adding a movement, the listview would
// refresh even without ngZone) - Why?
this._ngZone.run(() => {
// Show all piece (after adding / removing pieces)
this.selectedArray = this.pieceMovementArrayAll;
})
}
// Is this code-line needed? -> Saves pieceMovementAmount
this.pieceMovementAmount = result.value.movementItem.length;
} else {
this.pieceMovementAmount = 0;
console.log("No piece movements found");
}
this.pieceTitle = result.value.pieceTitle;
this.pieceWorkNumber = result.value.pieceWorkNumber;
// Get Composer Name
this._httpService.getComposerName(result.value.composerId).subscribe((res) => {
this._ngZone.run(() => {
this.pieceComposer = res[0].name;
});
console.log("COMPOSER NAME: " + this.pieceComposer);
});

} else {
console.log("Error: Piece not found");
}
},
"/user/" + BackendService.token + "/piece/" + this.routerParamId['pieceId'],
{
singleEvent: true,
orderBy: {
type: firebase.QueryOrderByType.CHILD,
value: 'since' // mandatory when type is 'child'
}
}
);
}*/
public randomImageGenerator() {
let pieceBoxBgImages = [
"bgi1",
Expand Down Expand Up @@ -277,10 +194,16 @@ export class PieceDashboardComponent implements OnInit, OnDestroy {

// Is this code-line needed? -> Saves pieceMovementAmount
this.pieceMovementAmount = piece.data().movementItem.length;

this.componentLoaded = true;

} else {
// If piece does not contain movements
this.pieceMovementAmount = 0;
console.log("No piece movements found");

// Show Piece-Forum Component
this.showPieceForum = true;
}

this.pieceTitle = piece.data().pieceTitle;
Expand All @@ -307,6 +230,12 @@ export class PieceDashboardComponent implements OnInit, OnDestroy {
//this._router.navigate(['/addpiece']);
if(this.routerParamId['originType'] == 1){
this._routerExtensions.navigate(["/home"], { clearHistory: true });
} else if(this.showPieceForum && this.movementId > -1) {
console.log("Hide Forum");
this._ngZone.run(() => {
this.showPieceForum = false;
});
data.cancel = true;
}
});
}
Expand Down Expand Up @@ -337,6 +266,9 @@ export class PieceDashboardComponent implements OnInit, OnDestroy {
this.recordSession(args);
*/
this.movementId = this.selectedArray[args.index].id;
this.showPieceForum = true;
console.log("TAPPED MOVEMENT: " + JSON.stringify(this.selectedArray[args.index]));
} else {
// Editing-Mode -> Add / Remove movement from list
if(this.pieceMovementArrayAll[args.index].state == 0){
Expand Down Expand Up @@ -378,78 +310,11 @@ export class PieceDashboardComponent implements OnInit, OnDestroy {
this._pieceService.updateMovement(Number(this.pieceId), this.pieceMovementArrayAll);
//});
}

/* if(type == 1) {
// TYPE 1 = ADD MOVEMENT to PRACTICE LIST
console.log("HANDLE ADD");
this.pieceMovementArrayAll[args.index].state = 1;
this.pieceMovementArrayAll[args.index].lastUsed = currentDate;
this._pieceService.updateMovement(Number(this.pieceId), this.pieceMovementArrayAll);
// Set lastPieceId & lastMovementId in BackendService DEL
/*BackendService.lastPieceId = Number(this.routerParamId['pieceId']);
BackendService.lastMovementId = Number(args.index);
//this.firebaseAction();
} else if (type == 2){
// TYPE 2 = REMOVE MOVEMENT FROM PRACTICE LIST
console.log("HANDLE REMOVE");
if(this.pieceMovementArray.length < 2) {
// IF DELETING LAST MOVEMENT -> Inform User, that piece will be deleted | Still in DEV-Mode
dialogs.confirm({
title: "Attention!",
message: '"' + this.pieceMovementArrayAll[args.index].title + '" is your last remaining movement! Do you want to delete the entire piece from your practicing list?',
okButtonText: "Yes, delete entire piece",
cancelButtonText: "No!",
}).then(function (result) {
if(result){
// REMOVE ENTIRE PIECE & PRACTICE SESSIONS THROUGH pieceService
that._pieceService.removePiece(that.routerParamId['pieceId'], -1).then(function() {
console.log("PIECE DELETED");
that._routerExtensions.navigate(["/piece-list"], { clearHistory: true });
});
}
});
} else {
// SURE you want to delete?
dialogs.confirm({
title: "Delete movement from list?",
message: "Do you want to remove this movement from your Practice-List? \n\nYour Practice-Progress (Practice-Sessions) won't be deleted.",
okButtonText: "Yes, remove please",
cancelButtonText: "No!",
}).then(function (result) {
if(result){
that._pieceService.removePiece(that.routerParamId['pieceId'], args.index).then(function() {
// Set BackendService: lastMovementId to none (-1) DEL
/*if(BackendService.lastMovementId == args.index){
BackendService.lastMovementId = -1;
}
that.pieceMovementArrayAll[args.index].state = 0;
that.firebaseAction();
});
}
});
}
}*/
}
}

firebaseAction(){
console.log("MAINTENANCE firebaseAction() fired");
/*console.log("ARRAY: "+JSON.stringify(this.pieceMovementArrayAll));
let that = this;
firebase.update(
'/user/'+BackendService.token+'/piece/'+this.routerParamId['pieceId']+'/movementItem',
this.pieceMovementArrayAll
).then(
function () {
// Reload Firebase-Data (false, because show all pieces)
that.loadFirebaseData(false);
},
function (error) {
console.log("ERROR: " + error);
}); */
}

public firestoreStopListening(): void {
Expand Down
42 changes: 42 additions & 0 deletions apphovenAlpha/app/pages/piece/piece-forum/piece-forum-common.css
View file
@@ -0,0 +1,42 @@
.start-discussion-button {
padding: 15;
color: #E95D59;
border-color: #E95D59;
border-radius: 7;
border-width: 2;
}

.question-container {
margin-bottom: 5;
padding: 13;
background-color: rgb(255, 219, 214);
}

.question-container-solved {
background-color: rgb(221, 253, 221);
}

.answer-item {
margin: 5 0 5 10;
padding: 5;
background-color: rgb(251, 255, 191);
}

.answer-item-accepted {
margin: 5 0 5 10;
padding: 5;
background-color: rgb(191, 255, 191);
}

/* Not the accepted answer, even though question has been responded to */
.answer-item-regular {
background-color: transparent;
}

.answer-button {
padding: 2 5 2 5;
color: white;
border-radius: 5;
background-color: rgb(231, 142, 139);
vertical-align: middle;
}

0 comments on commit 60f1777

Please sign in to comment.