make it better

6338003821advcomprogfinalprojectserver_v1_1.py

@@ -7,10 +7,10 @@ Original file is located at
     https://colab.research.google.com/drive/1B0ihZ275Hw0V034W4eFtKc-wxwkg7iLS
 """
 
-! pip install pymongo[srv]
+#! pip install pymongo[srv]
 
-! pip install flask_ngrok
+#! pip install flask_ngrok
-! pip install flask_cors
+#! pip install flask_cors
 
 # Write all of your functions in this cell 
 from flask import Flask,request,flash, request, redirect, url_for, Response,jsonify
@@ -95,6 +95,7 @@ def filter():
 
 @app.route('/alldata')
 def get_data():
+  collection_data2=client.data.data2
   dp = list(collection_data2.find().sort([('timeStamp', pymongo.DESCENDING)]))
   df = json_normalize(dp)
   df.rename(columns = {'accessor.identifier':'iden'}, inplace = True)

package-lock.json

@@ -32,7 +32,7 @@
         "@angular-eslint/eslint-plugin": "~12.0.0",
         "@angular-eslint/eslint-plugin-template": "~12.0.0",
         "@angular-eslint/template-parser": "~12.0.0",
-        "@angular/cli": "~12.1.1",
+        "@angular/cli": "12.1.4",
         "@angular/compiler": "~12.1.1",
         "@angular/compiler-cli": "~12.1.1",
         "@angular/language-service": "~12.0.1",

package.json

@@ -37,7 +37,7 @@
     "@angular-eslint/eslint-plugin": "~12.0.0",
     "@angular-eslint/eslint-plugin-template": "~12.0.0",
     "@angular-eslint/template-parser": "~12.0.0",
-    "@angular/cli": "~12.1.1",
+    "@angular/cli": "12.1.4",
     "@angular/compiler": "~12.1.1",
     "@angular/compiler-cli": "~12.1.1",
     "@angular/language-service": "~12.0.1",

src/app/app.component.html

@@ -7,17 +7,17 @@
   
       <ion-tab-button tab="home">
         <ion-icon mode="md" name="analytics"></ion-icon>
-        <ion-label>data</ion-label>
+        <ion-label>Data</ion-label>
       </ion-tab-button>
   
       <ion-tab-button tab="tab1" class="inner-left-btn">
-        <ion-icon name="search"></ion-icon>
+        <ion-icon name="Search"></ion-icon>
-        <ion-label>search</ion-label>
+        <ion-label>Search</ion-label>
       </ion-tab-button>
   
       <ion-tab-button tab="tab2">
         <ion-icon name="add-circle-outline"></ion-icon>
-        <ion-label>insert</ion-label>
+        <ion-label>Insert</ion-label>
       </ion-tab-button>
   
     </ion-tab-bar>

src/app/data-provider.service.ts

@@ -1,21 +1,30 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { providerData } from '../../src/models/temp.model';
+import { ReplaySubject } from 'rxjs';
 @Injectable({
   providedIn: 'root'
 })
 export class DataProviderService {
-  constructor(private http: HttpClient ) { }
+  public cache = new ReplaySubject(1);
+  constructor(private http: HttpClient ) { 
+    this.updateData();
+    
+  }
+  public updateData(){
+    this.http.get(this.url+'/alldata').subscribe(data=>this.cache.next(data));
+  }
   // allData(){
   //   return this.http.get('https://bc50-104-199-132-26.ngrok.io/alldata');
   // }
+  public url = 'http://796c-35-186-184-86.ngrok.io/'
   insert(dbname: String,colname: String,web: String,cat: String){
-    //return this.http.get<providerData>("http://0b75-35-247-61-40.ngrok.io/insert?dbname="+dbname+"&collectionname="+colname+"&web="+web+"&cat="+cat);
+    //return this.http.get<providerData>("http://localhost:/insert?dbname="+dbname+"&collectionname="+colname+"&web="+web+"&cat="+cat);
-    return this.http.get<providerData>("https://d036-104-199-132-26.ngrok.io/insert?dbname=data&collectionname=testdata&web=com.burbn.instagram&cat=photos");
+    return this.http.get<providerData>(this.url+"/insert?dbname=data&collectionname=testdata&web=com.burbn.instagram&cat=photos");
   }
 
   public getData(listData: any,lineChart: any) { 
-    return this.http.get('https://d036-104-199-132-26.ngrok.io/alldata');
+    return this.cache.asObservable();
   }
   update(data: any) {
     return data;

src/app/home/home.page.html

@@ -1,4 +1,3 @@
-
 <ion-header [translucent]="true">
   <ion-toolbar>
     <ion-title>
@@ -8,31 +7,46 @@
 </ion-header>
 <ion-content [fullscreen]="true">
   <div class="ion-padding">
+    <ion-card>
+      <ion-text>
+        <center>
+        <h3>
+          {{checkLabel}}
+        </h3>
+      </center>
+      </ion-text>
+      <div style="height: 200px; overflow-x: auto">
+        <ion-list>
+          <ion-item *ngFor="let entry of apps">
+            <ion-label>{{entry.val}}</ion-label>
+            <ion-checkbox slot="end" [(ngModel)]="entry.isChecked" value="box" name="box"
+              (ionChange)="checklistChanged()"></ion-checkbox>
+          </ion-item>
+        </ion-list>
+      </div>
+    </ion-card>
+    <div [hidden]=hideBarCharts>
       <ion-card>
         <ion-card-header>
-        Bar Chart {{a$ | async}}
+          {{barLabel}}
         </ion-card-header>
         <ion-card-content>
           <canvas #barCanvas style="position: relative; height:20vh; width:40vw"></canvas>
         </ion-card-content>
       </ion-card>
-
+      </div>
+      <div [hidden]=hidePieCharts>
       <ion-card>
         <ion-card-header>
-        Doughnut Chart
+          {{doughnutLabel}}
         </ion-card-header>
         <ion-card-content>
           <canvas #doughnutCanvas style="position: relative; height:60vh; width:40vw"></canvas>
         </ion-card-content>
       </ion-card>
- 
+    </div>
-    <ion-card>
+    <div [hidden]=hideNotice>
-      <ion-card-header>
+      <h2>Please select atleast one entry to view charts.</h2>
-        Line Chart {{showData}}
+    </div>
-      </ion-card-header>
-      <ion-card-content>
-        <canvas #lineCanvas style="position: relative; height:20vh; width:40vw"></canvas>
-      </ion-card-content>
-    </ion-card>
   </div>
 </ion-content>

src/app/home/home.page.ts

@@ -4,27 +4,37 @@ import { Chart, registerables } from 'chart.js';
 import { DataProviderService } from '../data-provider.service';
 import { providerData } from 'src/models/temp.model';
 import { Observable } from 'rxjs';
-
+import { IonCheckbox, IonList, LoadingController } from '@ionic/angular';
+import { loadingController } from '@ionic/core';
+import { async } from '@angular/core/testing';
 @Component({
   selector: 'app-home',
   templateUrl: 'home.page.html',
   styleUrls: ['home.page.scss'],
 })
 export class HomePage {
+
   // Importing ViewChild. We need @ViewChild decorator to get a reference to the local variable 
   // that we have added to the canvas element in the HTML template.
   @ViewChild('barCanvas', { static: true }) private barCanvas: ElementRef;
   @ViewChild('doughnutCanvas', { static: true }) private doughnutCanvas: ElementRef;
   @ViewChild('lineCanvas', { static: true }) private lineCanvas: ElementRef;
-
+  public apps = [];
+  selectiveItems = [];
   //data = null;
   barChart: any;
   doughnutChart: any;
   lineChart: any;
+  checkLabel: string
   showData = [];
+  hideBarCharts: boolean
+  hidePieCharts: boolean
+  hideNotice: boolean
+  barLabel: string
+  doughnutLabel: string
   a$: Observable<providerData>;
-  
+  Pepperoni: IonCheckbox
-  constructor(private myDataProvider: DataProviderService) {
+  constructor(private myDataProvider: DataProviderService, public loadingController: LoadingController) {
     Chart.register(...registerables);
   }
   // getallData(){
@@ -32,19 +42,46 @@ export class HomePage {
   // }
   // When we try to call our chart to initialize methods in ngOnInit() it shows an error nativeElement of undefined. 
   // So, we need to call all chart methods in ngAfterViewInit() where @ViewChild and @ViewChildren will be resolved.
+
   ionViewDidEnter() {
-    this.barChartMethod();
+    var that = this
-    this.doughnutChartMethod();
+    this.hideBarCharts=true
-    this.lineChartMethod();
+    this.hidePieCharts=true
+    this.hideNotice=true
+    this.initializeChecklist();
     this.func();
     //this.data=this.myDataProvider.getData(this.showData,this.lineChart);
-  }
+  };
 
-  func(){
+  initializeChecklist() {
-    this.a$ = this.myDataProvider.insert(null,null,null,null)
+    this.checkLabel = "Loading . . ."
-    console.log(this.a$)
+    this.myDataProvider.getData(null, null).subscribe(data => {
+      var dataJSON: Array<Object>
+      dataJSON = JSON.parse(data.toString())
+      this.apps = []
+      for (var i = 0; i < dataJSON.length; i++) {
+        this.apps.push({ val: dataJSON[i]['iden'], isChecked: true });
+        this.selectiveItems.push(dataJSON[i]['iden'])
+      };
+    });
+    this.checklistChanged();
   }
+  func() {
+    //this.a$ = this.myDataProvider.insert(null, null, null, null)
+    //console.log(this.a$)
 
+  }
+  checklistChanged() {
+    this.selectiveItems = []
+    for (var i = 0; i < this.apps.length; i++) {
+      if (this.apps[i].isChecked) {
+        this.selectiveItems.push(this.apps[i].val)
+      }
+    }
+    this.barChartMethod();
+    this.doughnutChartMethod();
+    console.log(this.selectiveItems)
+  }
   barChartMethod() {
     // Now we need to supply a Chart element reference with an object that defines the type of chart we want to use, and the type of data we want to display.
     //var data;
@@ -57,17 +94,29 @@ export class HomePage {
       var y = []
       for (var i = 0; i < dataJSON.length; i++) {
         var frame = dataJSON[i];
+        console.log(this.selectiveItems.includes(frame['iden']))
+        if (this.selectiveItems.includes(frame['iden'])) {
           y.push(frame['all'])
           x.push(frame['iden'])
+        }
       };
       //console.log(x)
       //console.log(y)
+      if (this.barChart != undefined)
+        this.barChart.destroy();
+      else {
+        for (var i = 0; i < this.apps.length; i++) {
+          if (this.apps[i].isChecked) {
+            this.selectiveItems.push(this.apps[i].val)
+          }
+        }
+      }
       this.barChart = new Chart(this.barCanvas.nativeElement, {
         type: 'bar',
         data: {
           labels: x,
           datasets: [{
-            label: '# of Votes',
+            label: '# of Requests',
             data: y,
             backgroundColor: [
               'rgba(255, 99, 132, 0.2)',
@@ -101,29 +150,43 @@ export class HomePage {
     this.myDataProvider.getData(null, null).subscribe(data => {
       var dataJSON: Array<Object>
       dataJSON = JSON.parse(data.toString())
+      if (this.doughnutChart != undefined)
+        this.doughnutChart.destroy();
+      else {
+        for (var i = 0; i < this.apps.length; i++) {
+          if (this.apps[i].isChecked) {
+            this.selectiveItems.push(this.apps[i].val)
+          }
+        }
+      }
       var camera = 0
       var kTCCServicePhotosAdd = 0
       var location = 0
       var mediaLibrary = 0
       var microphone = 0
       var photos = 0
+      var sel = 0
       for (var i = 0; i < dataJSON.length; i++) {
         var frame = dataJSON[i];
+        if (this.selectiveItems.includes(frame['iden'])) {
           camera += frame['camera']
           kTCCServicePhotosAdd += frame['kTCCServicePhotosAdd'];
           location += frame['location']
           mediaLibrary += frame['mediaLibrary']
           microphone += frame['microphone']
           photos += frame['photos']
+          sel ++
+        }
       };
       var dataval = [camera, kTCCServicePhotosAdd, location, mediaLibrary, microphone, photos]
-
+      this.doughnutLabel="Pie chart of "+(camera+kTCCServicePhotosAdd+location+mediaLibrary+microphone+photos)+" requests"
+      this.barLabel="Bar chart of "+(camera+kTCCServicePhotosAdd+location+mediaLibrary+microphone+photos)+" requests"
       this.doughnutChart = new Chart(this.doughnutCanvas.nativeElement, {
         type: 'doughnut',
         data: {
           labels: ['cam', 'PhotosAdd', 'gps', 'media', 'mic', 'photos'],
           datasets: [{
-            label: '# of Votes',
+            label: '# of Requests',
             data: dataval,
             backgroundColor: [
               'rgba(255, 159, 64, 0.2)',
@@ -142,43 +205,21 @@ export class HomePage {
           }]
         }
       });
-    });
+      this.checkLabel = this.apps.length+" entries found, "+sel+" selected."
-
+      if(sel==0){
-  }
+        this.hideBarCharts=true
-
+        this.hidePieCharts=true
-  lineChartMethod() {
+        this.hideNotice=false
-    var that = this
+      } else if(sel==1){
-    var dataSet
+        this.hidePieCharts=false
-
+        this.hideBarCharts=true
-    this.lineChart = new Chart(this.lineCanvas.nativeElement, {
+        this.hideNotice=true
-      type: 'line',
+      } else {
-      data: {
+        this.hidePieCharts=false
-        labels: ['January', 'February', 'March', 'April'],
+        this.hideBarCharts=false
-        datasets: [
+        this.hideNotice=true
-          {
-            label: 'Sell per week',
-            fill: false,
-
-            backgroundColor: 'rgba(75,192,192,0.4)',
-            borderColor: 'rgba(75,192,192,1)',
-            borderCapStyle: 'butt',
-            borderDash: [],
-            borderDashOffset: 0.0,
-            borderJoinStyle: 'miter',
-            pointBorderColor: 'rgba(75,192,192,1)',
-            pointBackgroundColor: '#fff',
-            pointBorderWidth: 1,
-            pointHoverRadius: 5,
-            pointHoverBackgroundColor: 'rgba(75,192,192,1)',
-            pointHoverBorderColor: 'rgba(220,220,220,1)',
-            pointHoverBorderWidth: 2,
-            pointRadius: 1,
-            pointHitRadius: 10,
-            data: this.showData,
-            spanGaps: false,
-          }
-        ]
       }
     });
   }
+
 }

src/app/tab1/tab1.page.html

@@ -1,9 +1,11 @@
 <ion-header>
   <ion-toolbar>
-    <ion-title>tab1</ion-title>
+    <ion-title>Search</ion-title>
   </ion-toolbar>
 </ion-header>
 
 <ion-content>
-
+  <ion-toolbar>
+    <ion-searchbar></ion-searchbar>
+  </ion-toolbar>
 </ion-content>

src/app/tab2/tab2.module.ts

@@ -17,4 +17,6 @@ import { Tab2Page } from './tab2.page';
   ],
   declarations: [Tab2Page]
 })
-export class Tab2PageModule {}
+export class Tab2PageModule {
+  
+}

src/app/tab2/tab2.page.html

@@ -1,9 +1,22 @@
 <ion-header>
   <ion-toolbar>
-    <ion-title>tab2</ion-title>
+    <ion-title>Insert</ion-title>
   </ion-toolbar>
 </ion-header>
-
 <ion-content>
-
+  <ion-card>
+  <ion-item>
+    <ion-label>Web</ion-label>
+    <br/>
+    <ion-input [(ngModel)]="web"></ion-input>
+  </ion-item>
+  <ion-item>
+    <ion-label>Category</ion-label>
+    <br/>
+    <ion-input [(ngModel)]="category"></ion-input>
+  </ion-item>
+  <ion-button expand='full' (click)="submit()">
+    Submit
+  </ion-button>
+</ion-card>
 </ion-content>

src/app/tab2/tab2.page.ts

@@ -1,15 +1,23 @@
 import { Component, OnInit } from '@angular/core';
-
+import { DataProviderService } from '../data-provider.service';
 @Component({
   selector: 'app-tab2',
   templateUrl: './tab2.page.html',
   styleUrls: ['./tab2.page.scss'],
 })
 export class Tab2Page implements OnInit {
-
+  public web: String
-  constructor() { }
+  public category: String
+  constructor(private DataProviderService: DataProviderService) {}
 
   ngOnInit() {
+    
+  }
+  submit() {
+    var dbname = "data"
+    var colname = "testdata"
+    this.DataProviderService.insert(dbname,colname,this.web,this.category)
   }
 
+
 }