improved configurepage

ThomasCarstens · Nov 14, 2018 · a66b0b8 · a66b0b8
1 parent 539385f
commit a66b0b8
Show file tree

Hide file tree

Showing 12 changed files with 171 additions and 67 deletions.
diff --git a/src/app/app.firebaseconfig.ts b/src/app/app.firebaseconfig.ts
@@ -1,19 +1,19 @@
 //using the Implemented Database
-export var config = {
-    apiKey: "AIzaSyC_FMJcswceJB7ZYlzaRwKW1ij7kn8K6w4",
-    authDomain: "myapp-93470.firebaseapp.com",
-    databaseURL: "https://myapp-93470.firebaseio.com",
-    projectId: "myapp-93470",
-    storageBucket: "myapp-93470.appspot.com",
-    messagingSenderId: "412208839835"
-  };
-
-//using the Test Database
 //export var config = {
-//    apiKey: "AIzaSyAQD8TaZnXghoRbTE-7_b9LWBK4g3T6hUQ",
-//    authDomain: "dynamics1app.firebaseapp.com",
-//    databaseURL: "https://dynamics1app.firebaseio.com",
-//    projectId: "dynamics1app",
-//    storageBucket: "dynamics1app.appspot.com",
-//    messagingSenderId: "365540790494"
+//    apiKey: "AIzaSyC_FMJcswceJB7ZYlzaRwKW1ij7kn8K6w4",
+//    authDomain: "myapp-93470.firebaseapp.com",
+//    databaseURL: "https://myapp-93470.firebaseio.com",
+//    projectId: "myapp-93470",
+//    storageBucket: "myapp-93470.appspot.com",
+//    messagingSenderId: "412208839835"
 //  };
+
+//using the Test Database
+export var config = {
+    apiKey: "AIzaSyAQD8TaZnXghoRbTE-7_b9LWBK4g3T6hUQ",
+    authDomain: "dynamics1app.firebaseapp.com",
+    databaseURL: "https://dynamics1app.firebaseio.com",
+    projectId: "dynamics1app",
+    storageBucket: "dynamics1app.appspot.com",
+    messagingSenderId: "365540790494"
+  };
diff --git a/src/app/app.scss b/src/app/app.scss
@@ -14,3 +14,13 @@
 // To declare rules for a specific mode, create a child rule
 // for the .md, .ios, or .wp mode classes. The mode class is
 // automatically applied to the <body> element in the app.
+
+ion-label{
+  white-space:normal !important;
+}
+
+.alert-md .alert-radio-label,
+.alert-ios .alert-radio-label
+{
+  white-space:normal !important;
+}
diff --git a/src/pages/comments/comments.html b/src/pages/comments/comments.html
@@ -26,7 +26,7 @@
 
 <ion-content #content>
 
-<img [src]="post.data().image" *ngIf="post.data().image">
+<img [src]="post.data().image" *ngIf="post.data().image" (click)="ViewPhoto(post.data().image)">
 
 
 <ion-list>
@@ -40,7 +40,7 @@
             <span class="msg-name" *ngIf='comment.data().usertype !== "Tutor"'> Student who posted </span>
             <span class="msg-date"><em> {{ ago(comment.data().created.toDate()) }} ago </em></span>
             <p text-wrap>{{ comment.data().text }}</p>
-            <img [src]="comment.data().image" *ngIf="comment.data().image">
+            <img [src]="comment.data().image" *ngIf="comment.data().image" (click)="ViewPhoto(comment.data().image)">
           </div>
         </div>
 <!-- if other student: NOT my post and NOT tutor and NOT NAME of poster  -->
@@ -49,7 +49,7 @@
         <span class="msg-name"> Helpful Student </span>
         <span class="msg-date"><em> {{ ago(comment.data().created.toDate()) }} ago </em></span>
         <p text-wrap>{{ comment.data().text }}</p>
-        <img [src]="comment.data().image" *ngIf="comment.data().image">
+        <img [src]="comment.data().image" *ngIf="comment.data().image" (click)="ViewPhoto(comment.data().image)">
       </div>
     </div>
   <!-- if tutor: NOT my post and NOT poster but IS tutor  -->
@@ -58,7 +58,7 @@
           <span class="msg-name"> {{ comment.data().owner_name }} - Tutor </span>
           <span class="msg-date"><em> {{ ago(comment.data().created.toDate()) }} ago </em></span>
           <p text-wrap>{{ comment.data().text }}</p>
-          <img [src]="comment.data().image" *ngIf="comment.data().image">
+          <img [src]="comment.data().image" *ngIf="comment.data().image" (click)="ViewPhoto(comment.data().image)">
         </div>
       </div>
 
@@ -68,7 +68,7 @@
         <span class="msg-name"> Me </span>
         <span class="msg-date"><em> {{ ago(comment.data().created.toDate()) }} ago </em></span>
         <p text-wrap>{{ comment.data().text }}</p>
-        <img [src]="comment.data().image" *ngIf="comment.data().image">
+        <img [src]="comment.data().image" *ngIf="comment.data().image" (click)="ViewPhoto(comment.data().image)">
       </div>
     </div>
 
@@ -81,11 +81,12 @@
 
 <ion-footer>
 
-  <ion-row margin *ngIf="image">
-    <ion-card class="round-corners">
-      <img [src]="image" class="round-corners">
-    </ion-card>
-  </ion-row>
+  <div class="item profilepic-border" align="center" *ngIf="image">
+  	<button class="profilebutton" (click)="removePhoto()">
+      <ion-icon name="close-circle"></ion-icon>
+    </button>
+  	<img class="profilepic padding-bottom" [src]="image">
+  </div>
 
     <ion-row margin class="rowStyle">
       <button ion-button item-left color="danger" clear (click)="addPhoto()">

diff --git a/src/pages/comments/comments.ts b/src/pages/comments/comments.ts
@@ -6,7 +6,8 @@ import { Camera, CameraOptions } from '@ionic-native/camera';
 import { ConfigurePage } from '../configure/configure';
 import { PopupsProvider } from '../../providers/popups/popups';
 import { ViewController, NavController, NavParams, LoadingController, ToastController, ActionSheetController, AlertController, ModalController, Modal } from 'ionic-angular';
-
+import { PhotoViewer } from '@ionic-native/photo-viewer';
+import { App } from 'ionic-angular';
 
 @Component({
   selector: 'page-comments',
@@ -34,10 +35,14 @@ export class CommentsPage {
               private viewCtrl: ViewController,
               private loadingCtrl: LoadingController,
               private toastCtrl: ToastController,
+              private actionSheetCtrl: ActionSheetController,
               private camera: Camera,
               private alertCtrl: AlertController,
               //public configure: ConfigurePage,
-              public popup: PopupsProvider) {
+              public popup: PopupsProvider,
+              private photoViewer: PhotoViewer,
+              public appCtrl: App
+            ) {
 
 
 this.loadcomments();
@@ -223,13 +228,62 @@ CheckNumberVisits(){
                           })
 
                         }
-  addPhoto() {
+                        addPhoto() {
+
+                          const actionSheet = this.actionSheetCtrl.create({
+                                    title: 'Adding a Photo',
+                                    buttons: [
+                                      {
+                                        text: 'Use Camera',
+                                        role: 'destructive',
+                                        handler: () => {
+                                          this.launchCamera();
+                                          console.log('Camera clicked');
+                                        }
+                                      },{
+                                        text: 'Load from Library',
+                                        handler: () => {
+                                          //this.takePicture(this.camera.PictureSourceType.PHOTOLIBRARY);
+                                          this.openLibrary();
+                                          console.log('Library clicked');
+                                        }
+                                      },{
+                                        text: 'Cancel',
+                                        role: 'cancel',
+                                        handler: () => {
+                                          console.log('Cancel clicked');
+                                        }
+                                      }
+                                    ]
+                                  });
+                                  actionSheet.present();
+                        }
+
+                        openLibrary() {
+                          let options: CameraOptions = {
+                            quality: 100,
+                            sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
+                            destinationType: this.camera.DestinationType.DATA_URL,
+                            encodingType: this.camera.EncodingType.PNG,
+                            mediaType: this.camera.MediaType.PICTURE,
+                            correctOrientation: true,
+                            targetHeight: 512,
+                            targetWidth: 512,
+                            allowEdit: true
+                          }
+
+                          this.camera.getPicture(options).then((base64Image) => {
+                            console.log(base64Image);
+
+                            this.image = "data:image/png;base64," + base64Image;
 
-                          this.launchCamera();
 
+                          }).catch((err) => {
+                            console.log(err)
+                          })
                         }
 
-  launchCamera() {
+                        launchCamera() {
                           let options: CameraOptions = {
                             quality: 100,
                             sourceType: this.camera.PictureSourceType.CAMERA,
@@ -300,4 +354,14 @@ CheckNumberVisits(){
 
                         }
 
+  ViewPhoto(url: string) {
+    this.photoViewer.show(url, '', {share: true});
+  }
+
+  removePhoto() {
+    //very ugly way of doing it, because text erased.
+    //this.appCtrl.getRootNav().setRoot(CommentsPage);
+    this.image=null;
+    console.log('remove CommentsPagePic')
+  }
 }
diff --git a/src/pages/configure/configure.html b/src/pages/configure/configure.html
@@ -6,8 +6,10 @@
 -->
 <ion-header>
 
-  <ion-navbar>
+  <ion-navbar color="danger">
+    <div class="wrapper">
     <ion-title>Configure Post</ion-title>
+    </div>
 
     <ion-buttons end>
       <button ion-button icon-only clear (click)="close()">
@@ -22,30 +24,43 @@
 
 <ion-content padding>
   <ion-item>
-    <ion-label>Section of Work</ion-label>
-    <ion-select [(ngModel)]="worksection">
-      <ion-option value="Rectilinear, plane and curvilinear motion">Rectilinear, plane and curvilinear motion</ion-option>
-      <ion-option value="Relative and constrained motion">Relative and constrained motion</ion-option>
-      <ion-option value="Relative and constrained motion">Rotation and absolute motion</ion-option>
-      <ion-option value="Relative and constrained motion">Instantaneous centres of zero velocity</ion-option>
-      <ion-option value="Relative and constrained motion">Relative velocity and acceleration</ion-option>
-      <ion-option value="Relative and constrained motion">Motion relative to rotating axes</ion-option>
-      <ion-option value="Relative and constrained motion">Newton's 2nd Law</ion-option>
-      <ion-option value="Relative and constrained motion">Work, kinetic energy and potential energy</ion-option>
-      <ion-option value="Relative and constrained motion">Power and efficiency</ion-option>
-      <ion-option value="Relative and constrained motion">Linear and angular impulse-momentum and impact</ion-option>
+    <ion-label>Kinetics or Kinematics</ion-label>
+  <ion-select [(ngModel)]="kine_">
+      <ion-option value="Kinetics">Kinetics</ion-option>
+      <ion-option value="Kinematics">Kinematics</ion-option>
+    </ion-select>
+</ion-item>
 
-      <div>Mass moment of inertia</div>
-      <ion-option value="Relative and constrained motion">Mass moment of inertia</ion-option>
-      <ion-option value="Relative and constrained motion">General equations of motion</ion-option>
-      <ion-option value="Relative and constrained motion">Translation, fixed-axis rotation, general plane motion</ion-option>
-      <ion-option value="Relative and constrained motion">Work, kineticc kenergy and potential energy</ion-option>
-      <ion-option value="Relative and constrained motion">Power and efficiency</ion-option>
-      <ion-option value="Relative and constrained motion">Linear and angular impulse momentum and impact</ion-option>
+<ion-item>
+  <ion-label>Particles or Rigid Body</ion-label>
+<ion-select [(ngModel)]="physical">
+    <ion-option value="Particles">Particles</ion-option>
+    <ion-option value="Rigid Body">Rigid Body</ion-option>
+  </ion-select>
+</ion-item>
 
+<ion-item *ngIf='this.kine_ && this.physical'>
+    <ion-label>Choose Section of Work</ion-label>
+    <ion-select [(ngModel)]="worksection">
+      <ion-option textwrap *ngIf='this.kine_=="Kinematics" && this.physical=="Particles"' value="Rectilinear, plane and curvilinear motion">Rectilinear, plane and curvilinear motion</ion-option>
+      <ion-option textwrap *ngIf='this.kine_=="Kinematics" && this.physical=="Particles"' value="Relative and constrained motion">Relative and constrained motion</ion-option>
+      <ion-option textwrap *ngIf='this.kine_=="Kinematics" && this.physical=="Rigid Body"' value="Rotation and absolute motion">Rotation and absolute motion</ion-option>
+      <ion-option *ngIf='this.kine_=="Kinematics" && this.physical=="Rigid Body"' value="Instantaneous centres of zero velocity">Instantaneous centres of zero velocity</ion-option>
+      <ion-option *ngIf='this.kine_=="Kinematics" && this.physical=="Rigid Body"' value="Relative velocity and acceleration">Relative velocity and acceleration</ion-option>
+      <ion-option *ngIf='this.kine_=="Kinematics" && this.physical=="Rigid Body"' value="Motion relative to rotating axes">Motion relative to rotating axes</ion-option>
+      <ion-option *ngIf='this.kine_=="Kinetics" && this.physical=="Particles"' value="Newton's 2nd Law">Newton's 2nd Law</ion-option>
+      <ion-option *ngIf='this.kine_=="Kinetics" && this.physical=="Particles"' value="Work, kinetic energy and potential energy">Work, kinetic energy and potential energy</ion-option>
+      <ion-option *ngIf='this.kine_=="Kinetics" && this.physical=="Particles"' value="Power and efficiency">Power and efficiency</ion-option>
+      <ion-option *ngIf='this.kine_=="Kinetics" && this.physical=="Particles"' value="Linear and angular impulse-momentum and impact">Linear and angular impulse-momentum and impact</ion-option>
+      <ion-option *ngIf='this.kine_=="Kinetics" && this.physical=="Rigid Body"' value="Mass moment of inertia">Mass moment of inertia</ion-option>
+      <ion-option *ngIf='this.kine_=="Kinetics" && this.physical=="Rigid Body"' value="General equations of motion">General equations of motion</ion-option>
+      <ion-option *ngIf='this.kine_=="Kinetics" && this.physical=="Rigid Body"' value="Translation, fixed-axis rotation, general plane motion">Translation, fixed-axis rotation, general plane motion</ion-option>
+      <ion-option text-wrap *ngIf='this.kine_=="Kinetics" && this.physical=="Rigid Body"' value="Work, kinetic energy and potential energy">Work, kinetic energy and potential energy</ion-option>
+      <ion-option *ngIf='this.kine_=="Kinetics" && this.physical=="Rigid Body"' value="Power and efficiency">Power and efficiency</ion-option>
+      <ion-option *ngIf='this.kine_=="Kinetics" && this.physical=="Rigid Body"' value="Linear and angular impulse momentum and impact">Linear and angular impulse momentum and impact</ion-option>
     </ion-select>
   </ion-item>
-
+  <h6>Edit Picture</h6>
   <div class="item profilepic-border" align="center" *ngIf="this.image">
   	<button class="profilebutton" (click)="removePhoto()">
       <ion-icon name="close-circle"></ion-icon>
@@ -55,7 +70,7 @@
 </ion-content>
 
 <ion-footer>
-
+    <h6>   Edit Text</h6>
     <ion-row margin class="rowStyle">
       <button ion-button item-left color="danger" clear (click)="addPhoto()">
         <ion-icon name="images"></ion-icon>

diff --git a/src/pages/configure/configure.scss b/src/pages/configure/configure.scss
@@ -1,9 +1,9 @@
-page-feed {
+page-configure {
   ion-title {
   position: absolute;
   top: 0;
   left: 0;
-  padding: 0 90px 1px;
+  //padding: 0 90px 1px;
   width: 100%;
   height: 100%;
   text-align: center;
@@ -14,6 +14,10 @@ page-feed {
   text-align: center;
 }
 
+.wrapper {
+    text-align: center;
+}
+
 .posting {
   width: 50%;
 }
@@ -35,6 +39,7 @@ page-feed {
     display: table;
 }
 
+
     .bottom-bar{
         background-color: map-get($colors , semi-light);
 

diff --git a/src/pages/configure/configure.ts b/src/pages/configure/configure.ts
@@ -48,6 +48,7 @@ export class ConfigurePage {
               this.text = this.navParams.get("post").data().text;
               console.log(this.text)
 
+
   }
 
   ionViewDidLoad() {

diff --git a/src/pages/feed/feed.html b/src/pages/feed/feed.html
@@ -29,6 +29,9 @@
 
 <ion-content overflow-scroll=true>
 
+  <p class="fineprint"><button class="fineprint" (click)="gotoCodesign()">
+  Contact Developer
+  </button> || <a target="_blank" href="http://htmlpreview.github.io/?https://github.com/ThomasCarstens/uct_incubator/blob/master/privacypolicy"> Private Policy </a> </p>
 
 <!--<ion-textarea rows="1" id="messageInputBox" placeholder="Send message" (input)="change()" required></ion-textarea>-->
 
@@ -154,7 +157,5 @@
         <ion-icon name="send"></ion-icon>
       </button>
   </ion-row>
-  <p class="fineprint"><button class="fineprint" (click)="gotoCodesign()">
-  Contact Developer
-  </button> || <a target="_blank" href="http://htmlpreview.github.io/?https://github.com/ThomasCarstens/uct_incubator/blob/master/privacypolicy"> Private Policy </a> </p>
+
 </ion-footer>
diff --git a/src/pages/feed/feed.ts b/src/pages/feed/feed.ts
@@ -469,7 +469,6 @@ PostSure(){
 
 
   ViewPhoto(url: string) {
-    //this.image =
     this.photoViewer.show(url, '', {share: true});
   }
 
@@ -683,6 +682,12 @@ settings(post){
   const actionSheet = this.actionSheetCtrl.create({
             title: 'Post Settings',
             buttons: [
+              {
+                text: 'View Comments',
+                handler: () => {
+                  this.comment(post);
+                }
+              },
               {
                 text: 'Edit Post',
                 handler: () => {
@@ -718,7 +723,8 @@ deletePost(post){
 
 removePhoto() {
   //very ugly way of doing it, because text erased.
-  this.appCtrl.getRootNav().setRoot(FeedPage);
-  console.log('remove Pic')
+  //this.appCtrl.getRootNav().setRoot(FeedPage);
+  this.image=null;
+  console.log('remove FeedPic')
 }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -48,6 +48,7 @@ export class ConfigurePage { @@
                   this.text = this.navParams.get("post").data().text;
                   console.log(this.text)
       }
       ionViewDidLoad() {
@@ Expand Down @@