Quantcast
Channel: Ionic Framework - Ionic Forum
Viewing all 49526 articles
Browse latest View live

Where to store large and permanent offline data

$
0
0

@stevedoyin wrote:

I am currently developing an app that help students to practice past exam questions for a matriculation exam. The catch here is to beat other apps already doing this by making questions and solutions of the app totally available offline.

My challenge now is the data is large. About #12,000 questions/solutions approximately. Where do I put this data?

Can I save it as a JSON file in the front end?.. And would it not affect performance? Apart from having to upload an heavy app file to app store.

Are there other possible solutions for making these questions/solutions available offline on ionic app. Thanks

Posts: 1

Participants: 1

Read full topic


Error: EISDIR: illegal operation on a directory, read at Error (native)

$
0
0

@sajalsuraj wrote:

I am getting a very strange but very common error while creating an Ionic2 project.

When I enter this particular command to create a project

$ ionic start MyProject tutorial

Then, I am getting this error

√ Creating directory .\MyProject - done!
× Downloading and extracting tutorial starter - failed!
  Error: EISDIR: illegal operation on a directory, read
  at Error (native)

I tried many things to resolve this issue, but couldn’t find a suitable solution. Please help me to resolve this. Thanks.

Posts: 1

Participants: 1

Read full topic

Dynamic CSS-Styles from API for dynamic Content

$
0
0

@mysecondworld wrote:

Hey Folks!
I’m stuck with following problem:

I recieve an dynamic HTML-Content-Snippet from an API with certain classes and ids applied.
Additionally there a dynamic and individual CSS-Stylesheet I can access through this API, too.

What i got so far:

encapsulation: ViewEncapsulation.None, is important, otherwise the classnames etc. would be changed.

What i can’t get to work is to apply the styles received from the API to the component.

The first idea was to put the style-promise-result directly here:

@Component({
  selector: 'page-dynamic',
  templateUrl: 'dynamic.html',
  encapsulation: ViewEncapsulation.None,
  style: mycssapi
})

or somehow inject it afterwards. Didn’t get it working.

The second idea was to add <style type="text/css" [innerHTML]="mycss?.styles"> or this:

<style type="text/css">{{mycss?.styles}}
  </style>

Someone an idea how to solve this?

Thank you in advance!
Markus

Posts: 1

Participants: 1

Read full topic

How to debug "Uncaught (in promise)" error

$
0
0

@pxdev wrote:

Hi,

in my app I’m getting this error:

Uncaught (in promise): [object Object]
at c (http://localhost:8100/build/polyfills.js:3:19132)
at http://localhost:8100/build/polyfills.js:3:18554
at http://localhost:8100/build/polyfills.js:3:20622
at t.invoke (http://localhost:8100/build/polyfills.js:3:14356)
at Object.onInvoke (http://localhost:8100/build/vendor.js:4247:33)
at t.invoke (http://localhost:8100/build/polyfills.js:3:14296)
at r.run (http://localhost:8100/build/polyfills.js:3:9523)
at http://localhost:8100/build/polyfills.js:3:19622
at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15040)
at Object.onInvokeTask (http://localhost:8100/build/vendor.js:4238:33)

I’ve been looking for the source of the error for 2 hours, and I can’t find it. I have thousands of lines of code, with some processes running in background, so it’s really hard to find the exact promise that is uncaught. Because of polyfills, the stacktrace is completely useless.

Is there any way to debug this so I can find where is that promise that isn’t caught?

Thanks!

Posts: 1

Participants: 1

Read full topic

Angular 5 / Ionic 3 - HTTP Cache Behaviour

$
0
0

@maxtest1234 wrote:

My app fetches JSON data from a backend (Google Cloud Storage) using the new Angular 5 HttpClient (from @angular/common/http). I used to add a ‘If-Modified-Since’ header to only transfer new data and get a 304 response if nothing changed, caching the data myself using @ionic/storage.

Now I noticed that, compared to older versions (Ionic 2), the caching behaviour seems to have changed. Even when I remove my caching code and do not set the header explicitly, it is still being set (verified using Chrome dev tools) and I get 304 responses! Something underneath seems to have done the caching, but I can not figure out where.

I have seen that both on Android and in Chrome (MacOS using ‘ionic serve’).

I am wondering now if Ionic / Angular uses some default built-in cache and how to configure it?

My environment (ionic info):

cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.19.0
ionic (Ionic CLI) : 3.19.0

global packages:

cordova (Cordova CLI) : 7.1.0

local packages:

@ionic/app-scripts : 3.1.2
Cordova Platforms  : android 6.3.0 ios 4.4.0
Ionic Framework    : ionic-angular 3.9.2

System:

Android SDK Tools : 26.1.1
Node              : v8.9.1
npm               : 2.15.12
OS                : macOS Sierra
Xcode             : Xcode 9.1 Build version 9B55

Environment Variables:

ANDROID_HOME : /Users/max/Library/Android/sdk

Misc:

backend : legacy

Posts: 1

Participants: 1

Read full topic

Insert data with rest api

$
0
0

@eejazishaq wrote:

Hi
I’m using laravel for back-end all api is work on postman tool,
i want to insert some data using ionic form but i face kind of errors , i don;t understand what is it,
can anybody help me…

(upload://wwadSwjESBnkZtTCqs9DnlrIpGn.PNG)

this is my provider code

addUser(data) {
return new Promise((resolve, reject) => {

  var headers = new Headers();
  headers.append("Accept", "application/json");
  headers.append("Content-Type", "application/json");
  // let options = {headers: headers};

  this.http.post('http://127.0.0.1:8000/api/posts', JSON.stringify(data), {headers: headers})
    .subscribe(res => {
      // resolve(res.data);
      console.log(res);
    }, (err) => {
      reject(err);
    });
});

}

this is my typescript code

post = { title: ‘’, body: ‘’};
data: any;

constructor(public navCtrl: NavController, public myhttp: PostProvider, public http:HttpClient) {}

dosubmit() {
this.myhttp.addUser(this.post)
.then((result) => {
console.log(result);
}, (err) => {
console.log(err);
});
}

this is my html code

<form (ngSubmit)="dosubmit()">

    <ion-item>
      <ion-label floating>Title</ion-label>
      <ion-input type="text" [(ngModel)]="post.title" name="title"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label floating>Description</ion-label>
      <ion-input type="text" [(ngModel)]="post.body" name="body"></ion-input>
    </ion-item>

    <ion-item>
      <button ion-button type="submit" block>Add User</button>
    </ion-item>

</form>

==============

plz help me

Posts: 1

Participants: 1

Read full topic

Sharing data using provider not working

$
0
0

@CemCelik55 wrote:

I’m still fairly new to Ionic. I’m using a provider which is registered in the app.module as a provider for authentication as I’m going to need users id and type throughout the app. In the login page I can see the account.email etc, which are bound to the interface with [(ngModel)]. The provider is also injected in the constructor as a parameter. I.e. constructor(public accountSrv: AccountService) All good.
The provider has set and get methods as well as login & logout. But cannot access any of the data instantiated by the login page, so cannot do login. Console.log logs data as unidentified.
I’m using lazy loading of pages with a blank starter.

Login page is home.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, ToastController } from 'ionic-angular';
import { Account } from './../../models/account.interface';
import { AccountService } from './../../providers/account.service';

@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  account = {} as Account;

  constructor(private toastCtrl: ToastController,
              private navCtrl: NavController,
              public accSrv: AccountService
            ) {
    this.accSrv.setEmail(this.account.email);
    this.accSrv.setPassword(this.account.password);
  }

  doLogin() {
    // For some reason accSrv is not seeing it otherwise
    let result = this.accSrv.login();
    let resultingMessage = this.accSrv.getLoginfo();

    this.toastCtrl.create({
      message: resultingMessage,
      duration: 3000,
      position: 'top'
    }).present();

    // Login successfull so send them off to Profile page
    if(result) this.navCtrl.setRoot("ProfilePage");

  }

account.service.ts

import { Account } from './../models/account.interface';
import { Injectable } from '@angular/core';
import { AngularFireAuth } from 'angularfire2/auth';

@Injectable()
export class AccountService {

  account = {} as Account;

  constructor(private afAuth: AngularFireAuth) {
  }

  async login() {
    console.log(this.account.email);
    try {
      const result = await
        this.afAuth.auth.signInWithEmailAndPassword(this.account.email,this.account.password)

      this.account.uid = result.uid;
      this.account.logInfo = "Welcome back!"
      return true;
    } catch(e){
      this.account.logInfo = e;
      return false;
    }
  }

  setID(val) {
    this.account.uid = val;
  }

  setEmail(val) {
    this.account.email = val;
  }

Posts: 1

Participants: 1

Read full topic

How to stylize input height?


Can't find imported item

$
0
0

@devsm wrote:

Import is correct, name also… But Ionic won’t find him…

heroes-list.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

import { Hero } from '../../model/hero';
import { Heroes } from '../../model/mock-heroes';


@IonicPage()
@Component({
  selector: 'page-heroes-list',
  templateUrl: 'heroes-list.html',
})
export class HeroesListPage {

  heroes: Heroes;

  selectedHero: Hero;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad HeroesListPage');
  }

}

mock-heroes.ts

import { Hero } from './hero';

export const Heroes: Hero[] = [
  { name: 'Mr. Nice' },
  { name: 'Narco' },
  { name: 'Bombasto' },
  { name: 'Celeritas' },
  { name: 'Magneta' },
  { name: 'RubberMan' },
  { name: 'Dynama' },
  { name: 'Dr IQ' },
  { name: 'Magma' },
  { name: 'Tornado' }
];

Posts: 1

Participants: 1

Read full topic

Test for a 404 on a remote server

$
0
0

@timk wrote:

I want to display a certain image if it exists on a remote server. Otherwise, I want to show a different image. So I need a way of testing if an image exists on a remote server. I’m trying the following code, but it fails every time, even if the image is really there.

let observable = this.http.head(imageURL);
observable.subscribe(()=>{
  console.log("Success! :)");
}, (error)=>{
  console.log("Error :(");
}

The error message is something like “No ‘Access-Control-Allow-Origin’ header is present on the requested resource.” But this doesn’t make sense, because I can display the image just fine in my Ionic app if I choose to.

Any ideas?

Posts: 1

Participants: 1

Read full topic

How to solve version conflict problem?

$
0
0

@cooldp007 wrote:

i got error when i build my app to perform signing with google

Execution failed for task ‘:processDebugGoogleServices’.

Please fix the version conflict either by updating the version of the google-services plugin (information about the latest version is available at https://bintray.com/android/android-tools/com.google.gms.google-services/) or updating the version of com.google.android.gms to 11.0.1.

I really don’t know how to fix this?

Posts: 1

Participants: 1

Read full topic

Almost all Gesture not recognised

$
0
0

@Biboozz wrote:

Hello, i’m in trouble with the native ionic3 gesture.

For testing purpose i use the following function :

import {Gesture} from "ionic-angular";

touchDown() {
  console.log("Touch");
}

I have the following XHTML line:

  <button ion-button icon-end solid color="secondary" (tap)="touchDown()">Show me !</button>

But if i use the following line the console log is not triggered :

  <button ion-button icon-end solid color="secondary" (hold)="touchDown()">Show me !</button>

The amount of information is maybe cheap, don’t hesitate to ask for detail :slight_smile:

Thanks for reading

Posts: 2

Participants: 2

Read full topic

Can not Apk build folder help me?

$
0
0

@burakalaca wrote:

Can not Apk build folder help me?
The codes I use are

npm install -g cordova
npm install -g ionic
ionic start myproject blank
cd resistance
ionic cordova platform add android
ionic cordova build --release android

Error code

[ERROR] An error occurred while running cordova build android --release (exit code 1).

Help me pls?

Posts: 4

Participants: 2

Read full topic

Gray blank page on starting Ionic app on android

$
0
0

@jamesharvey wrote:

Hello guys,

I’m sure all of you guys have observed this short gray blank screen which shows up when starting an ionic app on android.
It looks like this gray screen can’t be removed? is there a way to permanently remove this gray screen?

I finally figured out a way to completely remove splash screen and white blank loading page.
I replaced them with a custom made HTML page with css animations.

Now it’s only left to remove this gray screen to make my ionic app start like any other app built on Java or C#.

Please let me know if you guys know how to get rid of this useless gray blank screen on start up.

Thanks,

Posts: 1

Participants: 1

Read full topic

SearchBar, same search function for everypage

$
0
0

@david_bc wrote:

Hi everyone,

I have a search-bar present in 10 pages of my app.

<ion-content  shrink-header>

  <ion-searchbar></ion-searchbar> ...

I want to do a searchFunction, that will launch a new Page with the “SearchTerm” param => no pb for this.

But i dont want to write / copy this function in the 10 page where I need It …

What do you suggest me to use for this implementation ? Is it possible to use something like global function? Or should I encapsulate this in a component ? or something else ?

Thnaks for advice

Posts: 1

Participants: 1

Read full topic


ChartsJS issues

$
0
0

@PhilAichinger wrote:

Im having some random issues in Ionic 3 with charts JS, they are not dynamically updating data on select box selection, I’m having to double click the legend for it to be drawn, I’m also getting a Skip issue once hovered over or clicked. please see my markup and TS code below.

 <ion-item class="select">
          <ion-label class="tankName">Choose Tank</ion-label>
            <ion-select #T (ionChange)="updateValues(T.value)" [(ngModel)]="Converter.tankSelect">
            <ion-option *ngFor="let item of Converter.tankOptionList" value="{{item.value}}">{{item.text}}</ion-option>
            </ion-select>
        </ion-item>
  </ion-list>


  <canvas #lineCanvas class="paramsCharts" width="400" height="400" style="background-color:aliceblue"></canvas>

import { Component, ViewChild } from ‘@angular/core’;
import { NavController, NavParams, ToastController } from ‘ionic-angular’;
//import { Storage } from ‘@ionic/storage’;
//import { AlertController } from ‘ionic-angular’;
import { Chart } from ‘chart.js’;
import ‘chartjs-plugin-annotation’;
import { PopoverController } from ‘ionic-angular’;
//import { TkpAmmoniaPage } from ‘…/tkp-ammonia/tkp-ammonia’;
import { FormGroup, Validators, FormBuilder } from ‘@angular/forms’;
import { Slides } from ‘ionic-angular’;

//pages…///
import { HomePage } from ‘…/…/pages/home/home’;
import { PopoverPage } from ‘…/…/pages/popover/popover’;
import { QrScannerPage } from ‘…/…/pages/qr-scanner/qr-scanner’;
import { SettingsPage } from ‘…/…/pages/settings/settings’;

//Providers//
import { ApiProvider } from ‘…/…/providers/api/api’;
import { Measurement } from ‘…/…/models/measurement’;
import { MeasurementType } from ‘…/…/models/measurementtype’;
import { ConverterProvider } from ‘…/…/providers/converter/converter’;
import { GlobalvarsProvider } from ‘…/…/providers/globalvars/globalvars’;
import { Tank } from ‘…/…/models/tank’;

//Models…//
//import { User } from ‘…/…/models/user’;
//import { Tank } from ‘…/…/models/tank’;

@Component({
selector: ‘page-measurements’,
templateUrl: ‘wap-measurements.html’,

})

export class WapMeasurementsPage {

@ViewChild(‘lineCanvas’) lineCanvas;
@ViewChild(Slides) slides: Slides;

lineChart: any;
chartLabel: any;
statusImg: any;
statusText: any;
dateTimeNow: any;
userID: any;
tanks: Tank[];

public labelArray: string[] = [];
public dataArray: any[] = [];
public upperArray: any[] = [];
public lowerArray: any[] = [];
public desiredArray: any[] = [];

//API Measurements
add_measurement_form: FormGroup;
measurements: Measurement[];
measurementsLimited: Measurement[];
tankID: string;
typeID: string;
latestMeasurement: any;
measurementDifference: any;
measurementType: MeasurementType[];
pageTitle: string;

constructor(
public navCtrl: NavController,
public navParams: NavParams,
//private storage: Storage,
//private alertCtrl: AlertController,
public popoverCtrl: PopoverController,
public apiProvider: ApiProvider,
public Converter: ConverterProvider,
public formBuilder: FormBuilder,
public globalVars: GlobalvarsProvider,
private toast: ToastController)
{

this.statusImg = '';
this.statusText = '';
this.chartLabel = '';
this.tankID = globalVars.getTankID();
this.typeID = globalVars.getCurrentWAPTypeID();
this.dateTimeNow = new Date()
this.dateTimeNow = this.dateTimeNow.toISOString();

this.apiProvider.getMeasurementTypeByID(this.typeID).subscribe(type => {
  this.pageTitle = type[0].Name;
})

//add measurement form builder
// UPDATE THIS WITH TANK DATA MODEL
this.userID = this.globalVars.getUserID();

this.add_measurement_form = formBuilder.group({
    tankID: [this.tankID.toString()],
    reading: ["", Validators.required],
    dateTimeTaken: [this.dateTimeNow.toString()],
    typeID: [this.typeID.toString()]
});

this.apiProvider.getUserTanks(this.userID).subscribe(tank => {
  this.tanks = tank;
  //Tank Select Data
  this.Converter.tankOptionList.length = 0;
  for (var i = 0; i < this.tanks.length; i++)
  {
    this.Converter.tankOptionList.push ({ value: i, text: this.tanks[i].Name, checked: false });
  }
})

};

updateValues(value: number){
this.tankID = this.tanks[this.Converter.tankSelect].ID;
this.globalVars.setTankID(this.tanks[this.Converter.tankSelect].ID);
this.updateChart();
}

submitValue(){
//submit value to API…
this.apiProvider.createMeasurement(this.add_measurement_form.value)
.subscribe(
measurement => {
console.log(measurement);
this.updateChart();
},
error => console.log(error)
);
}

ValueSubmitted(){
this.toast.create({
message: ‘You have submitted a value!’ ,
duration: 3000
}).present();
this.navCtrl.push(WapMeasurementsPage);
}

ionViewDidLoad() {
//Measurement API Call code…//

/*
this.storage.get('CurrentTankID').then((val) => {
  this.tankID = val;
})

this.storage.get('CurrentWAPTypeID').then((val) => {
  console.log(val);
  currentType = val;
})
*/

// should we add a default tanbk field to db to sync when online.

this.updateChart();

}

updateChart(){

this.apiProvider.getMeasurementTypeByID(this.typeID).subscribe(measurementtype => {
  this.measurementType = measurementtype;
})

this.apiProvider.getMeasurements(this.tankID, this.typeID).subscribe(measurement => {
  this.measurements = measurement;
  this.latestMeasurement = this.measurements[0].Reading;
  this.measurementDifference = parseFloat(this.measurements[0].Reading) - parseFloat(this.measurements[1].Reading);
  if (this.measurementDifference > 0){
    this.measurementDifference = '+' + this.measurementDifference.toString();
  }
})

this.lineChart = new Chart(this.lineCanvas.nativeElement, {

  type: 'line',
  data: {
    labels: this.labelArray,
    datasets: [
      {
        label: 'Actual',
        data: this.dataArray,
        duration: 2000,
        easing: 'easeInQuart',
        fill: false,
        borderWidth: 2,
        borderColor: '#46add4'
      },
    /*  {
        label: 'Upper',
        data: [0,0,0,0,0],
        duration: 2000,
        easing: 'easeInQuart',
        fill: false,
        borderWidth: 2,
        borderColor: 'red',
        radius: 0,

      },
      {
        label: 'Lower',
        data: [0,0,0,0,0],
        duration: 2000,
        easing: 'easeInQuart',
        fill: false,
        borderWidth: 2,
        borderColor: 'red',
        radius: 0,
      },
      {
        label: 'Desired',
        data: [0,0,0,0,0],
        duration: 2000,
        easing: 'easeInQuart',
        fill: false,
        borderWidth: 2,
        borderColor: 'blue',
        radius: 0,
      }*/
  ]
},
options: {
  annotation: {
    drawTime: 'afterDatasetsDraw',
    annotations: [{
      type: 'box',
      id: 'upperDangerLevel',
      xScaleID: 'x-axis-0',
      yScaleID:'y-axis-0',
      yMax:1500,
      yMin:1400,
      borderWidth:1,
      backgroundColor:'rgba(244, 72, 66,0.7)',
      onMouseenter: function(e) {},
      onMouseover: function(e) {},
      onMouseleave: function(e) {},
      onMouseout: function(e) {},
      onMousemove: function(e) {},
      onMousedown: function(e) {},
      onMouseup: function(e) {},
      onClick: function(e) {},
      onDblclick: function(e) {},
      onContextmenu: function(e) {},
      onWheel: function(e) {}
    },{
      type: 'box',
      id: 'lowerDangerLevel',
      xScaleID: 'x-axis-0',
      yScaleID:'y-axis-0',
      yMax:1100,
      yMin:1000,
      borderWidth:1,
      backgroundColor:'rgba(244, 72, 66,0.7)',
      onMouseenter: function(e) {},
      onMouseover: function(e) {},
      onMouseleave: function(e) {},
      onMouseout: function(e) {},
      onMousemove: function(e) {},
      onMousedown: function(e) {},
      onMouseup: function(e) {},
      onClick: function(e) {},
      onDblclick: function(e) {},
      onContextmenu: function(e) {},
      onWheel: function(e) {}
    },
    {
      type: 'line',
      id: 'desiredLevel',
      mode: 'horizontal',
      scaleID: 'y-axis-0',
      value: 1350,
      borderWidth: 2,
      borderDash: [2,2],
      borderColor: "green",
      onMouseenter: function(e) {},
      onMouseover: function(e) {},
      onMouseleave: function(e) {},
      onMouseout: function(e) {},
      onMousemove: function(e) {},
      onMousedown: function(e) {},
      onMouseup: function(e) {},
      onClick: function(e) {},
      onDblclick: function(e) {},
      onContextmenu: function(e) {},
      onWheel: function(e) {}
    }]
  },
   title:{
    display: true,
    text:'Level',
  },
  maintainAspectRatio: true,
  legend: {
    display: true,
    labels:{
    useLineStyle: true
    },
    fontSize: 15,
    padding: 0
  },
  scales: {
    yAxes: [{
      ticks:{
        beginAtZero:false,
        stepSize: "auto",
        display: true,
      },
      gridLines: {
        color: 'grey',

        display: false
      },
      scaleLabel: {
        display: true,
        labelString: 'Measurement Value (ppt)',
      }
    }],
    xAxes: [{
      ticks:{
        display: true,
        beginAtZero:true,
        stepSize: "auto",
      },
      gridLines: {
        color: 'grey',
        display: false
      },
      scaleLabel: {
        display: true,
        labelString: 'Time',
      }
    }]
  }
}

})

this.apiProvider.getMeasurementsLimited(this.tankID, this.typeID, '5').subscribe(measurementLimited => {

  this.measurementsLimited = measurementLimited;

  // ###### ADD ERROR HANDLING HERE ####
  this.dataArray.length = 0;
  this.upperArray.length = 0;
  this.lowerArray.length = 0;
  this.desiredArray.length = 0;
  this.labelArray.length = 0;

  this.dataArray.push(parseFloat(this.measurementsLimited[0].Reading));
  this.dataArray.push(parseFloat(this.measurementsLimited[1].Reading));
  this.dataArray.push(parseFloat(this.measurementsLimited[2].Reading));
  this.dataArray.push(parseFloat(this.measurementsLimited[3].Reading));
  this.dataArray.push(parseFloat(this.measurementsLimited[4].Reading));

  // Pull in measurement Upper
  /*
  this.dataArray.push(parseFloat(this.measurementsLimited[0].Reading));
  this.dataArray.push(parseFloat(this.measurementsLimited[1].Reading));
  this.dataArray.push(parseFloat(this.measurementsLimited[2].Reading));
  this.dataArray.push(parseFloat(this.measurementsLimited[3].Reading));
  this.dataArray.push(parseFloat(this.measurementsLimited[4].Reading));
  */

  // Pull in measurement Lower
  /*
  this.dataArray.push(parseFloat(this.measurementsLimited[0].Reading));
  this.dataArray.push(parseFloat(this.measurementsLimited[1].Reading));
  this.dataArray.push(parseFloat(this.measurementsLimited[2].Reading));
  this.dataArray.push(parseFloat(this.measurementsLimited[3].Reading));
  this.dataArray.push(parseFloat(this.measurementsLimited[4].Reading));
  */

  this.upperArray.push(parseFloat(this.measurementType[0].Upper));
  this.upperArray.push(parseFloat(this.measurementType[0].Upper));
  this.upperArray.push(parseFloat(this.measurementType[0].Upper));
  this.upperArray.push(parseFloat(this.measurementType[0].Upper));
  this.upperArray.push(parseFloat(this.measurementType[0].Upper));

  this.lowerArray.push(parseFloat(this.measurementType[0].Lower));
  this.lowerArray.push(parseFloat(this.measurementType[0].Lower));
  this.lowerArray.push(parseFloat(this.measurementType[0].Lower));
  this.lowerArray.push(parseFloat(this.measurementType[0].Lower));
  this.lowerArray.push(parseFloat(this.measurementType[0].Lower));

  this.desiredArray.push(parseFloat(this.measurementType[0].Desired));
  this.desiredArray.push(parseFloat(this.measurementType[0].Desired));
  this.desiredArray.push(parseFloat(this.measurementType[0].Desired));
  this.desiredArray.push(parseFloat(this.measurementType[0].Desired));
  this.desiredArray.push(parseFloat(this.measurementType[0].Desired));

  // if length of lower limit array = 0, rename upper limit to target, otherwise display lower and upper boundaries.

  this.labelArray.push('');
  this.labelArray.push('');
  this.labelArray.push('');
  this.labelArray.push('');
  this.labelArray.push('');

  if(parseFloat(this.latestMeasurement) === parseFloat(this.measurementType[0].Desired))
  {
    this.statusText = this.measurementType[0].OK;
    this.statusImg = 'https://aquamate.pro/images/app/content/statusOK.ico';
  }
  else if(parseFloat(this.latestMeasurement) < parseFloat(this.measurementType[0].Upper)
      && parseFloat(this.latestMeasurement) > parseFloat(this.measurementType[0].Lower))
  {
    this.statusText = this.measurementType[0].Warning;
    this.statusImg = 'https://aquamate.pro/images/app/content/statusWarning.ico';
  }
  else if(parseFloat(this.latestMeasurement) > parseFloat(this.measurementType[0].Upper)
      || parseFloat(this.latestMeasurement) < parseFloat(this.measurementType[0].Lower))
  {
    this.statusText = this.measurementType[0].Danger;
    this.statusImg = 'https://aquamate.pro/images/app/content/statusDanger.ico';
  }

  this.lineChart.data.datasets[0].data = this.dataArray;
  this.lineChart.data.datasets[1].data = this.upperArray;
  this.lineChart.data.datasets[2].data = this.lowerArray;
  this.lineChart.data.datasets[3].data = this.desiredArray;
  this.lineChart.data.labels = this.labelArray;
  this.lineChart.update();

})

}
//Navigation stack…///
slideToHistory(){
this.slides.slideTo(1, 500);
}
slideToStatus(){
this.slides.slideTo(0,500);
}
slideToAddVal(){
this.slides.slideTo(2,500);
}
seneyeConnected(){
this.toast.create({
message: ‘Seneye Connection Comming Soon!’ ,
duration: 3000
}).present();
}

returnHome(){
this.navCtrl.push(HomePage);
}

qrScanner(){
this.navCtrl.push(QrScannerPage);
}

showSettingsPage() {
this.navCtrl.push(SettingsPage);
}
presentPopover(myEvent) {
let popover = this.popoverCtrl.create(PopoverPage);
popover.present({
ev: myEvent
});
}

}

Posts: 1

Participants: 1

Read full topic

Ionic rounting jumps

$
0
0

@VMVwebagency wrote:

Hi all,
i’m developing an App (Android and IOS) with pages info taken from Remote API.
I have this tree navigation:

    1. Page 1
    1. Page 2
    1. Page 3
  • 3.1 Page 3.1
  • 3.2 Page 3.2
  •   3.2.1 Page 3.2.1
    

etc…

In my nav i have only pages of first level so my navigation between pages work correctly.

Now i’m using OneSignal and in my push navigation i can set a page ID to show that page on APP.
But if i’m in “HomePage” and jump directly to, for example, page 3.2.1 how i can mantain navigation tree directive so my back button show me page 3.2 and not page “HomePage” ?

Thanks for all answers

Posts: 1

Participants: 1

Read full topic

Style gone if using ionic ui components inside the custom component

$
0
0

@ozexpert wrote:

Hi, I made a custom component and using the ionic ui components inside it. It renders but the styles are gone. Here’s my accordion custom component.

accordion.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'accordion',
  templateUrl: 'accordion.html'
})
export class AccordionComponent {
  @Input('title') title: string;

  text: string;

  constructor() {
  }

}

accordion.html

<ion-item>
  {{ title }}
</ion-item>
<ion-item text-wrap>
  <ng-content></ng-content>
</ion-item>

and in my page, I’m using it like this.

<ion-list>
   <ng-template ngFor [ngForOf]="getBooks()" let-book>
      <cif-accordion
        [title]="book.name">

        <button ion-button clear *ngFor="let c of book.chapters">
          {{ c }}
        </button>

      </cif-accordion>
  </ng-template>
</ion-list>

components.module.ts

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { AccordionComponent } from './accordion/accordion';
@NgModule({
	declarations: [AccordionComponent],
	imports: [],
	exports: [AccordionComponent],
	schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class ComponentsModule {}

and this components module is added to the app.module.ts.

but seems the ion-item styles are not applied at all. any tips?

Posts: 1

Participants: 1

Read full topic

Css not working

Create a side menu on specific pages

$
0
0

@romulus64 wrote:

Hello everyone,

Is it possible to create a side menu on specific pages, is that possible?
My goal is to display a side menu when the user isn’t on the homepage, ie, when he is on the main page, and each page would be open with parameters. Moreover, according to the user who is connected to the application, I would need to display a new button in the side menu.
Thanks

Posts: 2

Participants: 2

Read full topic

Viewing all 49526 articles
Browse latest View live


<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>