ionic3 - Didn't set nav root: invalid views to insert - ionic-framework

When I click a button this warning coming out which I running it in my web browser.(ionic serve -l)
I have <ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav> in my app.html file, is it problem?
UPDATE:
button image (button in slide menu - feedback button)
app.html
<ion-list>
<ion-list-header>导航栏</ion-list-header>
<button menuClose ion-item *ngFor="let p of loggedInPages" (click)="openPage(p)">
<ion-icon item-start [name]="p.icon" [color]="isActive(p)"></ion-icon>
{{p.title}}
</button>
</ion-list>
app.components.ts
appPages: PageInterface[] = [
{ title: '新闻', name: 'TabsPage', component: TabsPage, index: 0, icon: 'ios-globe-outline' },
{ title: 'SOS', name: 'TabsPage', component: TabsPage, index: 1, icon: 'call' },
{ title: '服务', name: 'TabsPage', component: TabsPage, index: 2, icon: 'people' },
{ title: '反馈', name: 'FeedbackPage', component: FeedbackPage, icon: 'information-circle' },
// { title: '机场志愿者入口', name: 'TabsPage', component: TabsPage, index: 0, icon: 'minan-sos' }
];
loggedInPages: PageInterface[] = [
{ title: '新闻', name: 'TabsPage', component: TabsPage, index: 0, icon: 'ios-globe-outline' },
{ title: 'SOS', name: 'TabsPage', component: TabsPage, index: 1, icon: 'call' },
{ title: '服务', name: 'TabsPage', component: TabsPage, index: 2, icon: 'people' },
{ title: '反馈', name: 'FeedbackPage', component: FeedbackPage, icon: 'information-circle' },
{ title: '注销', name: 'TabsPage', component: TabsPage, icon: 'log-out', logsOut: true }
];
openPage(page: PageInterface) {
let params = {};
if (page.index) {
params = { tabIndex: page.index };
}
if (this.nav.getActiveChildNavs().length && page.index != undefined) {
this.nav.getActiveChildNavs()[0].select(page.index);
} else {
// Set the root of the nav with params if it's a tab index
this.nav.setRoot(this.nav.setRoot(page.component, params), params).catch((err: any) => {
console.log(`Didn't set nav root: ${err}`);
});
}
if (page.logsOut === true) {
// Give the menu time to close before changing to logged out
this.userData.logout();
}
}

Related

Apache ECharts - scale graphic on window resize

I'm able to add a graphic to an EChart and center it in the canvas. But I can only make it a fixed width - I want it to scale when the chart resizes. Can see an example here:
https://codepen.io/bennyb/pen/qBKPWNM
option = {
tooltip: {
trigger: "item"
},
legend: {
bottom: 20,
left: "center"
},
graphic: [
{
id: 'img',
type: "image",
top: 'center',
left: 'center',
style: {
image: "http://cdn.onlinewebfonts.com/svg/img_155117.png",
width: 200,
height: 200
}
}
],
series: [
{
name: "Let vs Available",
type: "pie",
color: [
"#00ABAB",
"#007680"
],
radius: [
"45%",
"70%"
],
avoidLabelOverlap: false,
label: {
show: false,
position: "center"
},
emphasis: {
label: {
show: true,
fontSize: "15",
fontWeight: "bold"
}
},
labelLine: {
show: true
},
data: [
{
value: 31,
name: "Let"
},
{
value: 69,
name: "Available"
}
]
}
]
}
I'm able to add an id to the graphic, is there a way I can target that to resize the image on update?

Google Actions Builder stops execution when selecting a visual item from a List

I'm pulling my hairs here. I have a Google Assistant application that I build with Jovo 4 and Google Actions Builder.
The goal is to create a HelpScene, which shows some options that explain the possibilities/features of the app on selection.
This is the response I return from my Webhook. (This is Jovo code, but doesn't matter as this returns a JSON when the Assistant calls the webhook.)
#Handle(GoogleAssistantHandles.onScene('HelpScene'))
showHelpList() {
return this.$send({
platforms: {
googleAssistant: {
nativeResponse: {
scene: {
name: this.jovo.$googleAssistant?.$request.scene?.name,
slots: {},
next: {
name: 'MainScene',
},
},
session: {
id: 'session_id',
languageCode: 'nl-BE',
params: {},
typeOverrides: [
{
name: 'prompt_option',
synonym: {
entries: [
{
name: 'ITEM_1',
synonyms: ['Item 1', 'First item'],
display: {
title: 'Item #1',
description: 'Description of Item #1',
image: {
alt: 'Google Assistant logo',
height: 0,
url: 'https://developers.google.com/assistant/assistant_96.png',
width: 0,
},
},
},
{
name: 'ITEM_2',
synonyms: ['Item 2', 'Second item'],
display: {
title: 'Item #2',
description: 'Description of Item #2',
image: {
alt: 'Google Assistant logo',
height: 0,
url: 'https://developers.google.com/assistant/assistant_96.png',
width: 0,
},
},
},
{
name: 'ITEM_3',
synonyms: ['Item 3', 'Third item'],
display: {
title: 'Item #3',
description: 'Description of Item #3',
image: {
alt: 'Google Assistant logo',
height: 0,
url: 'https://developers.google.com/assistant/assistant_96.png',
width: 0,
},
},
},
{
name: 'ITEM_4',
synonyms: ['Item 4', 'Fourth item'],
display: {
title: 'Item #4',
description: 'Description of Item #4',
image: {
alt: 'Google Assistant logo',
height: 0,
url: 'https://developers.google.com/assistant/assistant_96.png',
width: 0,
},
},
},
],
},
typeOverrideMode: 'TYPE_REPLACE',
},
],
},
prompt: {
override: false,
content: {
collection: {
items: [
{
key: 'ITEM_1',
},
{
key: 'ITEM_2',
},
{
key: 'ITEM_3',
},
{
key: 'ITEM_4',
},
],
subtitle: 'List subtitle',
title: 'List title',
},
},
firstSimple: {
speech: 'This is a list.',
text: 'This is a list.',
},
},
},
},
},
});
I created a HelpScene which pulls my options from my webhook.
In my slot filling, this is the configuration.
When I use the simulator, the options from my webhook are shown perfectly.
But when I click an item in the list, the app just stops working. "YourApp is currently not responding".
At first I thought it had something to do with my webhook, so I changed the behaviour of the "on slot is filled" condition, that it should prompt something, directly from Google Actions Builder, but the behaviour is still not desired: the app just stops working.
Any ideas what I'm doing wrong?
Thanks in advance!
Okay, after days of searching, I finally figured it out.
It did have something to do with the Jovo framework/setup and/or the scene parameter in the native response.
This is my component, in which I redirect new users to the HelpScene. This scene should show multiple cards in a list/collection/whatever on which the user can tap to receive more information about the application's features.
#Component()
export class WelcomeComponent extends BaseComponent {
async START(): Promise<void> {
const isNewUser = true;
if (isNewUser && this.$device.supports(Capability.Screen)) {
return this.$send(NextSceneOutput, {
name: 'HelpScene',
message: 'Hi, I noticed you are a new user, let me walk you through some options.',
});
}
return this.$send('Welcome!');
}
#Handle(GoogleAssistantHandles.onScene('HelpScene'))
help() {
const sessionData = this.$request.getSession();
if (sessionData && sessionData.prompt_option) {
return this.$send(NextSceneOutput, {
name: 'MainScene',
message: `You picked option ${sessionData.prompt_option}. This is some info about it ... What do you want to do now?`,
});
}
return this.$send({
platforms: {
googleAssistant: {
nativeResponse: {
session: {
id: 'session_id',
languageCode: '',
params: {},
typeOverrides: [
{
name: 'HelpOptionType',
typeOverrideMode: 'TYPE_REPLACE',
synonym: {
entries: [
{
name: 'ITEM_1',
synonyms: ['Item 1', 'First item'],
display: {
title: 'Item #1',
description: 'Description of Item #1',
image: {
alt: 'Google Assistant logo',
height: 0,
url: 'https://developers.google.com/assistant/assistant_96.png',
width: 0,
},
},
},
{
name: 'ITEM_2',
synonyms: ['Item 2', 'Second item'],
display: {
title: 'Item #2',
description: 'Description of Item #2',
image: {
alt: 'Google Assistant logo',
height: 0,
url: 'https://developers.google.com/assistant/assistant_96.png',
width: 0,
},
},
},
{
name: 'ITEM_3',
synonyms: ['Item 3', 'Third item'],
display: {
title: 'Item #3',
description: 'Description of Item #3',
image: {
alt: 'Google Assistant logo',
height: 0,
url: 'https://developers.google.com/assistant/assistant_96.png',
width: 0,
},
},
},
{
name: 'ITEM_4',
synonyms: ['Item 4', 'Fourth item'],
display: {
title: 'Item #4',
description: 'Description of Item #4',
image: {
alt: 'Google Assistant logo',
height: 0,
url: 'https://developers.google.com/assistant/assistant_96.png',
width: 0,
},
},
},
],
},
},
],
},
prompt: {
override: false,
content: {
list: {
items: [
{
key: 'ITEM_1',
},
{
key: 'ITEM_2',
},
{
key: 'ITEM_3',
},
{
key: 'ITEM_4',
},
],
subtitle: 'List subtitle',
title: 'List title',
},
},
firstSimple: {
speech: 'This is a list.',
text: 'This is a list.',
},
},
},
},
},
});
}
// ...other intents...
In AoG I made 2 scenes, 1 MainScene on which a user enters the app and one HelpScene, which looks like this (yaml config). The goal of the HelpScene is only to be used for slot filling on the different options, then a user should go back to the MainScene.
"conditionalEvents":
- "condition": "scene.slots.status == \"FINAL\""
"handler":
"webhookHandler": "Jovo"
"slots":
- "commitBehavior":
"writeSessionParam": "prompt_option"
"name": "prompt_option"
"promptSettings":
"initialPrompt":
"webhookHandler": "Jovo"
"required": true
"type":
"name": "HelpOptionType"
As you can see in my help() method, I just check if the session param is filled out. If it is, I redirect the user to the MainScene, but first give a response about the chosen option.

How to add custom Icons in each item in side-menu?

How can I add custom icons for each item in side-menu. The image to use is from my 'assets/imgs/' directory and not from ionic icons.
app.html
<ion-list no-lines class="ion-list" style="max-width: 100%;">
<button style="color:rgb(65, 65, 65);" class="title" menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
<ion-icon style="font-size:30px;color: #B2B2B2;" class="icon" name="{{p.icon}}"> </ion-icon> <b>{{p.title}} </b>
<!-- <ion-icon style="float:right;" name="arrow-forward" *ngIf="p.title != 'Logout'"></ion-icon> -->
</button>
</ion-list>
app.component.ts
this.pages = [
{ title: 'Dashboard', component: HomePage, icon: 'home'} ,
{ title: 'Profile', component: ProfilePage, icon: 'contact' },
{ title: 'About Us', component: AboutUsPage, icon: 'help-circle' },
{ title: 'ContactUs', component: ContactUsPage, icon: 'call' },
{ title: 'SOA', component: SoaPage, icon: 'document' },
{ title: 'Feedback', component: FeedbackPage, icon: 'chatbubbles' },
{ title: 'Logout', component: SignInPage, icon: 'log-out' }
];
You can Replace icons with Images:
for Example:
component.ts
this.pages = [
{ title: 'Dashboard', component: HomePage, img: 'assets/imgs/image1.png'} ,
{ title: 'Profile', component: ProfilePage, img: 'assets/imgs/image2.png' },
];
component.html
<ion-list no-lines class="ion-list" style="max-width: 100%;">
<button style="color:rgb(65, 65, 65);" class="title" menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
<img style="width: 25px; height: 25px;" [src]="p.img"> <b>{{p.title}} </b>
<!-- <ion-icon style="float:right;" name="arrow-forward" *ngIf="p.title != 'Logout'"></ion-icon> -->
</button>
</ion-list>
just Replace your icon tag with img tag.

Highcharts areaspline, charts crosshair

Hi all i have this chart
http://i.prntscr.com/U1ho1cqRTVq-ifoMquWKAw.png
and i need to get in result
http://i.prntscr.com/Lj_PqmNWSxiIBJmK3tS44Q.png
I think solution of this task in crosshair< but i start use highcharts one week ago. Can u help me or give some links that help solve problem.
Because i refactored a lots of code all day and had not find solution of task.
My settings
chart: {
type: 'areaspline',
backgroundColor: 'transparent',
height: '500px',
spacingRight: -1,
spacingLeft: -1
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
categories: [],
x: {
min: 0,
max: 0
},
allowDecimalse: false,
gridLineWidth: 1,
gridLineColor: '#393546',
labels: {
y: -20,
},
tickWidth: 0,
lineColor: "#fff",
zIndex: 0,
**crosshair:** {
color: 'rgba(73,168,222,0.5)',
zIndex: 0
}
},
yAxis: {
gridLineWidth: 0,
minorGridLineWidth: 0,
visible: false,
title: {
text: ''
},
labels: {
enabled: false
}
},
plotOptions: {
areaspline: {
marker: {
enabled: false,
states: {
hover: {
symbol: 'circle',
fillColor: '#fff',
lineColor: '#2196f3',
lineWidth: 2,
radius: 7,
enabled: true,
}
},
},
}
},
series: [
{
data: [
],
name: 'V/IRTUS',
showInLegend: false,
color: '#2196f3',
}
],
credits: {
enabled: false
}
};
data [] i get from api and categories too and min max option

Search Field on a Dialog - SAPUI5

Good Morning!
I an start working with SAPUI5
How can I set a Search field(sap.m.SearchField) on a Dialog?
Thank You
I suggest:
new Dialog({
title: 'Available Products',
content: new List({
items: {
path: '/ProductCollection',
template: new StandardListItem({
title: "{Name}",
counter: "{Quantity}"
})
}
}),
beginButton: new Button({
text: 'Close',
press: function() {
that.pressDialog.close();
}
}),
subHeader: [
new sap.m.Bar({
contentMiddle: [
new sap.m.SearchField({
width: "100%",
value: "Search Term"
})
]
})
]
});