I have a theme where I can select to make the header float when scrolling down a page or the topbar float.
I want to make them both float, can you please tell me what to change?
Here is the code from the settings_schema.json file:
{
"type": "header",
"content": "Header Style"
},
{
"type": "select",
"id": "theme_float_style",
"label": "Float style",
"options": [
{
"value": "",
"label": "Default"
},
{
"value": "keep-topbar",
"label": "Float Topbar"
},
{
"value": "keep-header",
"label": "Float Header"
}
],
"default": ""
},
when you select the header to float, this is what appears in settings_data.json:
"theme_float_style": "keep-header",
css:
/* ---Header--- */
body{
&.keep-header{
.mini-bar{
#include box-shadow(0px 2px 3px 0px rgba(0,0,0,0.2));
#header_logo{
padding:5px 0;
img{
width:449px;
}
}
}
}
}
body{
&.keep-topbar{
}
Related
Current issue : Whenever I am changing toggle, change-effect applying on every ion card.
Expected : I want to achieve a toggle effect individually on ion-card.
HTML :
<ion-grid>
<ion-row>
<ion-col *ngFor="let device of individual_room.devices">
<ion-card>
<ion-col><img src="assets/icon/favicon.png"/></ion-col>
<ion-card-content>
<ion-card-title>
{{ device.name }} <ion-badge item-end>{{ device.company }} </ion-badge>
</ion-card-title>
<ion-toggle [(ngModel)]="deviceStatus" (ionChange)="deviceStatusChange()"></ion-toggle>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
CSS :
ion-card {
--background:#262626;
height: 150px;
width: 80% !important;
}
ion-toggle[aria-checked="false"]{
position: relative;
width: 60px;
&::before {
position: absolute;
content: "";
font-size: 10px;
line-height: 10px;
}
&::after {
position: absolute;
content: "";
}
}
ion-toggle[aria-checked="true"]{
position: relative;
width: 60px;
&::before {
position: absolute;
content: "";
}
&::after {
position: absolute;
content: "";
font-size: 10px;
line-height: 10px;
top: 0;
left: 3px;
color: #fff;
}
}
TS file :
const TOKEN_KEY = 'CapacitorStorage.user-token'
#Component({
selector: 'app-tabhome',
templateUrl: './tabhome.page.html',
styleUrls: ['./tabhome.page.scss'],
})
export class TabhomePage implements OnInit, AfterViewInit {
public deviceStatus:boolean = true;
ngOnInit() {
// locally provided json file
fetch('./assets/data/tabHomeData.json').then(res => res.json())
.then(res => {
this.data = res
});
const headerHeight = isPlatform('ios') ? 44 : 56
this.document.documentElement.style.setProperty(
'--header-position',
`calc(env(safe-area-inset-top) + ${headerHeight}px)`
)
}
deviceStatusChange(){
console.log("device toggle switch : "+this.deviceStatus);
}
ngAfterViewInit() {
this.lists.changes.subscribe((_) => {
this.listElements = this.lists.toArray()
})
}
tabHomeData.json :
{
"user": "Ram",
"rooms": [
{
"name": "LIVING ROOM",
"devices": [
{
"name": "fan",
"type": "FAN",
"company": "Philips",
"state": "ON",
"speed": 100
},
{
"name": "bulb",
"type": "BULB",
"company": "Philips",
"state": "ON",
"colour": "WHITE"
},
{
"name": "Hall TV",
"type": "TV",
"company": "Redmi",
"state": "OFF"
},
{
"name": "AC",
"type": "AC",
"company": "Philips",
"state": "ON",
"colour": "WHITE"
},
{
"name": "bulb",
"type": "BULB",
"company": "Philips",
"state": "ON",
"colour": "WHITE"
},
{
"name": "bulb",
"type": "BULB",
"company": "Philips",
"state": "ON",
"colour": "WHITE"
}
]
},
{
"name": "Kitchen",
"devices": [
{
"name": "fan",
"type": "FAN",
"company": "Philips",
"state": "OFF",
"speed": 50
},
{
"name": "bulb",
"type": "BULB",
"company": "Philips",
"state": "OFF",
"colour": "YELLOW"
}
]
},
{
"name": "BED ROOM",
"devices": [
{
"name": "fan",
"type": "FAN",
"company": "Philips",
"state": "OFF",
"speed": 50
}
]
},
{
"name": "WASH ROOM",
"devices": [
{
"name": "exast",
"type": "FAN",
"company": "Philips",
"state": "OFF"
},
{
"name": "bulb",
"type": "BULB",
"company": "Philips",
"state": "OFF",
"colour": "YELLOW"
},
{
"name": "bulb",
"type": "BULB",
"company": "Philips",
"state": "ON",
"colour": "WHITE"
}
]
}
]
}
In HTML file through json file in a loop , I am trying to set every device in a cardView. And want to use toggle for each card separately.
Please find below attached screenshot :
There are many different ways to achieve the toggle on the ion-card, below is one way to achieve it:
use the state property on your json to manage the toggle state of the toggle component on the card
modify your toggle component like so:
<ion-toggle (click)="deviceStatusChange(device)"
[checked]="device.state =='ON'">
Add toggle state change to the deviceStatusChangeMethod
public deviceStatusChange(device:any) {
device.state = (device.state === 'ON') ? 'OFF' : 'ON';
}
I has this mapping for the índex on elastic, i was try to get the max value of a day for a specific sensor, but my query get the value of all the sensors.
"sensor": {
"type": "nested",
"properties": {
"type": {
"type": "integer"
},
"name": {
"type": "keyword"
},
"number": {
"type": "integer"
},
"values": {
"type": "nested",
"properties": {
"type": {
"type": "text"
},
"value": {
"type": "float"
},
"unit": {
"type": "text"
},
"Lmin": {
"type": "float"
},
"Lmax": {
"type": "float"
}
}
}
}
An this is the map of objects,
I need only the max and the min value of the las day from the sensor number 13, i try it but ever i get the max of all sensors.
{"query": {
"nested": {
"path": "sensor",
"query": {
"nested": {
"path": "sensor.values",
"query": {
"bool": {
"must": [
{
"match": {
"sensor.values.type": "TEMPERATURE"
}
}
]
}
}
}
}
}
},
"aggs": {
"agg_by_type": {
"nested": {
"path": "sensor.values"
},
"aggs": {
"max_value": {
"max": {
"field": "sensor.values.value"
}
}
}
}
}
}
I'm new in elasticsearch, can someone help whit this please?, thanks.
You need to also add the nested filter in the aggregation part to only aggregate the relevant nested documents, i.e. the ones related to TEMPERATURE, like this:
{
"query": {
"nested": {
"path": "sensor",
"query": {
"nested": {
"path": "sensor.values",
"query": {
"bool": {
"must": [
{
"match": {
"sensor.values.type": "TEMPERATURE"
}
}
]
}
}
}
}
}
},
"aggs": {
"agg_by_type": {
"nested": {
"path": "sensor.values"
},
"aggs": {
"temperature_only": {
"filter": {
"match": {
"sensor.values.type": "TEMPERATURE"
}
},
"aggs": {
"max_value": {
"max": {
"field": "sensor.values.value"
}
}
}
}
}
}
}
}
After a few days of work in another projects, i back to try make this query and finally i can do it, now i can get the data per day, hours, and by type of sensor, thanks for your help.
This is my code if somebody are trying the same.
{
"query": {
"bool": {
"filter": [
{
"bool": {
"must": [
{
"match": {
"mac": "34:ab:95:8f:84:c0"
}
}
],
"filter": [
{
"range": {
"timestamp": {
"gte": "2021-08-10",
"lt": "2021-08-25"
}
}
}
]
}
},
{
"nested": {
"path": "sensor",
"query": {
"bool": {
"must": [
{
"match": {
"sensor.type": 1
}
}
],
"should": [
{
"nested": {
"path": "sensor.values",
"query": {
"bool": {
"must": [
{
"match": {
"sensor.values.type": "HUMIDITY"
}
},
{
"match": {
"sensor.values.type": "TEMPERATURE"
}
}
]
}
}
}
}
]
}
}
}
}
]
}
},
"aggs": {
"values_per_day": {
"date_histogram": {
"field": "timestamp",
"fixed_interval": "1d",
"format" : "yyyy-MM-dd HH:mm:ss"
},
"aggs": {
"agg_type": {
"nested": {
"path": "sensor"
},
"aggs": {
"type_only": {
"filter": {
"match": {
"sensor.type": 1
}
},
"aggs": {
"agg_by_type": {
"nested": {
"path": "sensor.values"
},
"aggs": {
"temperature_only": {
"filter": {
"match": {
"sensor.values.type": "TEMPERATURE"
}
},
"aggs": {
"max_value": {
"max": {
"field": "sensor.values.value"
}
},
"min_value": {
"min": {
"field": "sensor.values.value"
}
}
}
},
"humedity_only": {
"filter": {
"match": {
"sensor.values.type": "HUMIDITY"
}
},
"aggs": {
"max_value": {
"max": {
"field": "sensor.values.value"
}
},
"min_value": {
"min": {
"field": "sensor.values.value"
}
}
}
}
}
}
}
}
}
}
}
}
},
"from": 0,
"sort": [
{
"timestamp": {
"order": "desc"
}
}
]
}
There is an example of a switch-like condition in the JSON Schema documentation.
https://json-schema.org/understanding-json-schema/reference/conditionals.html
I have added two more countries to the example, which both should have the same postal code patterns as Netherlands. I can get this example to work with two additional if/then structures, but it becomes messy when more items are to be added.
Is there DRYer version, e.g. like the hypothetical one below?
"properties": { "country": { "const": ["Netherlands", "Upperlands", "Lowerlands" } }
{
"type": "object",
"properties": {
"street_address": {
"type": "string"
},
"country": {
"enum": ["United States of America", "Canada", "Netherlands",
"Upperlands","Lowerlands"]
}
},
"allOf": [
{
"if": {
"properties": { "country": { "const": "United States of America" } }
},
"then": {
"properties": { "postal_code": { "pattern": "[0-9]{5}(-[0-9]{4})?" } }
}
},
{
"if": {
"properties": { "country": { "const": "Canada" } }
},
"then": {
"properties": { "postal_code": { "pattern": "[A-Z][0-9][A-Z] [0-9][A-Z][0-9]" } }
}
},
{
"if": {
"properties": { "country": { "const": "Netherlands" } }
},
"then": {
"properties": { "postal_code": { "pattern": "[0-9]{4} [A-Z]{2}" } }
}
}
]
}
You could use the enum pattern instead. It's less verbose and easier to read, but the error messages you get are terrible, so I suggest you stick with the if/then pattern. Here's what using the enum pattern would look like.
{
"type": "object",
"properties": {
"street_address": {
"type": "string"
},
"country": {
"enum": ["United States of America", "Canada", "Netherlands",
"Upperlands","Lowerlands"]
}
},
"anyOf": [
{
"properties": {
"country": { "const": "United States of America" },
"postal_code": { "pattern": "[0-9]{5}(-[0-9]{4})?" }
}
},
{
"properties": {
"country": { "const": "Canada" },
"postal_code": { "pattern": "[A-Z][0-9][A-Z] [0-9][A-Z][0-9]" }
}
},
{
"properties": {
"country": { "const": "Netherlands" },
"postal_code": { "pattern": "[0-9]{4} [A-Z]{2}" }
}
}
]
}
Although there isn't good way around the verbosity, there is something you can do to improve readability/maintainability. You can use definitions to hide the verbose parts.
{
"type": "object",
"properties": {
"street_address": {
"type": "string"
},
"country": {
"enum": ["United States of America", "Canada", "Netherlands",
"Upperlands","Lowerlands"]
}
},
"allOf": [
{ "$ref": "#/definitions/validate-us-postal-code" },
{ "$ref": "#/definitions/validate-ca-postal-code" },
{ "$ref": "#/definitions/validate-nl-postal-code" }
]
"definitions": {
"validate-us-postal-code": {
"if": {
"properties": { "country": { "const": "United States of America" } }
},
"then": {
"properties": { "postal_code": { "pattern": "[0-9]{5}(-[0-9]{4})?" } }
}
},
"validate-ca-postal-code": {
"if": {
"properties": { "country": { "const": "Canada" } }
},
"then": {
"properties": { "postal_code": { "pattern": "[A-Z][0-9][A-Z] [0-9][A-Z][0-9]" } }
}
},
"validate-nl-postal-code": {
"if": {
"properties": { "country": { "const": "Netherlands" } }
},
"then": {
"properties": { "postal_code": { "pattern": "[0-9]{4} [A-Z]{2}" } }
}
}
}
}
This allows someone to be able to understand everything this schema does just by reading the first few lines. The verbose/complicated stuff is pushed to the bottom where you don't have to deal with it if you don't need to.
I have several products with variations like the one below
{
"title": "100% Cotton Unstitched Suit For Men",
"slug": "100-cotton-unstitched-suit-for-men",
"price": 200,
"sale_price": 0,
"vendor_id": 32,
"featured": 0,
"viewed": 20,
"stock": 4,
"sku": "XXX-B",
"rating": 0,
"active": 1,
"vendor_name": "vendor_name",
"category": [
"men_fashion",
"traditional_clothing",
"unstitched_fabric"
],
"image": "imagename.jpg",
"variations": [
{
"variation_id": "34",
"stock": 5,
"price": 200,
"variation_image": "",
"sku": "XXX-C",
"size": "m",
"color": "red"
},
{
"variation_id": "35",
"stock": 5,
"price": 200,
"variation_image": "",
"sku": "XXX-D",
"size": "l",
"color": "red"
}
]
}
I am looking for a query that would have all of the below parameters
Get all products in a certain category
Get all products that are black
Get sizes l and m
My current Query:
{
"size": 15,
"from": 0,
"query": {
"filtered": {
"filter": {
"bool": {
"must": [
{
"match": {
"category": "women_fashion"
}
},
{
"nested": {
"path": "variations",
"query": {
"bool": {
"must": [{
"match": {
"variations.color": "red"
}
},
{
"match": {
"variations.size": "l"
}
},
{
"match": {
"variations.size": "m"
}
}
]
}
}
}
}
]
}
}
}
}
}
It works fine if i only search for 1 size. But once i search for 2 sizes it gives no records. My guess is that it looks for all 3 parameters in every nested variation, which obviously it cant find. How would i modify the query to search for
size: m, color: black
size: l, color: black
I have also tried using a nested filter, but the issue with this is that it works like "SHOULD" query while i am looking for a "MUST" query. ie. it shows all the products have large variations while i just want to show products that are large and red.
My Second Query:
{
"size": 15,
"from": 0,
"query": {
"filtered": {
"filter": {
"bool": {
"must": [
{
"match": {
"category": "women_fashion"
}
},
{
"nested": {
"path": "variations",
"query": {
"bool":{
"filter": [
{
"term": {
"variations.color": "red"
}
},
{
"term": {
"variations.size": "l"
}
}
]
}
}
}
}
]
}
}
}
}
}
You can put the size variations into a clause of it's own so at least one of the sizes will match
{
"query": {
"filtered": {
"filter": {
"bool": {
"must": [
{
"match": {
"category": "women_fashion"
}
},
{
"nested": {
"path": "variations",
"query": {
"bool": {
"must": [
{
"match": {
"variations.color": "red"
}
},
{
"query": {
"bool": {
"should": [
{
"match": {
"variations.size": "l"
}
},
{
"match": {
"variations.size": "m"
}
}
]
}
}
}
]
}
}
}
}
]
}
}
}
}
}
I'm trying to apply different filters for different nested aggregations. Is there a way to do this?
"filter": {
"nested": {
"path": "hierarchy.productGroup",
"filter": {
"terms": {
"hierarchy.productGroup.name": ["iPhone"]
}
}
}
},
"aggs": {
"category": {
"nested": {
"path": "hierarchy.productGroup"
},
"aggs": {
"category": {
"terms": {
"field": "hierarchy.productGroup.name"
}
}
}
},
"color": {
"filter": {
"nested": {
"path": "hierarchy.productGroup",
"filter": {
"terms": {
"hierarchy.productGroup.name": ["iPhone"]
}
}
}
},
"nested": {
"path": "specs.measurementsProduct.colorName"
},
"aggs": {
"color": {
"terms": {
"field": "specs.measurementsProduct.colorName.name"
}
}
}
}
}
When I run this query I get the following error:
Error: Parse Failure [Found two aggregation type definitions in [color]: [filter] and [nested]]];
I would like to make my color aggregation dependent on the category filter.
You forgot a key starting and ending.
Try with this json:
{
"filter": {
"nested": {
"path": "hierarchy.productGroup",
"filter": {
"terms": {
"hierarchy.productGroup.name": ["iPhone"]
}
}
}
},
"aggs": {
"category": {
"nested": {
"path": "hierarchy.productGroup"
},
"aggs": {
"category": {
"terms": {
"field": "hierarchy.productGroup.name"
}
}
}
},
"color": {
"filter": {
"nested": {
"path": "hierarchy.productGroup",
"filter": {
"terms": {
"hierarchy.productGroup.name": ["iPhone"]
}
}
}
},
"nested": {
"path": "specs.measurementsProduct.colorName"
},
"aggs": {
"color": {
"terms": {
"field": "specs.measurementsProduct.colorName.name"
}
}
}
}
}
}