Skip to content
Permalink
Browse files

UI updates: Added time controls to or-attribute-history closes #9

  • Loading branch information...
richturner committed Nov 7, 2019
1 parent bfe86e3 commit 3b3a53ba843feec5ec1829ce553881883752f219
@@ -1,6 +1,7 @@
{
"asset": "asset",
"asset_plural": "assets",
"asset": "Asset",
"asset_plural": "Assets",
"attribute": "Attribute",
"scenes": "Scenes",
"settings": "Settings",
"selectLanguage": "Select Language",
@@ -72,12 +73,19 @@
"confirmDeleteAssets": "Remove assets?",
"ok": "OK",
"cancel": "Cancel",
"createdOn": "Created on",
"createdOn": "Created on: {{-date, LLLL}}",
"accessPublicRead": "Public read",
"type": "Type",
"path": "Path",
"showOnMap": "Show on map",
"noAssetSelected": "Please select an asset on the left",
"loading": "Loading...",
"location": "Location"
"location": "Location",
"hour": "Hour",
"day": "Day",
"week": "Week",
"month": "Month",
"year": "Year",
"period": "Period",
"ending": "Ending"
}
@@ -1,6 +1,7 @@
{
"asset": "asset",
"asset_plural": "assets",
"asset": "Asset",
"asset_plural": "Assets",
"attribute": "Attribute",
"scenes": "Scenes",
"settings": "Instellingen",
"selectLanguage": "Taal kiezen",
@@ -72,12 +73,19 @@
"confirmDeleteAssets": "Asset verwijderen?",
"ok": "OK",
"cancel": "Annuleren",
"createdOn": "Aangemaakt op",
"createdOn": "Aangemaakt op: {{-date, LLLL}}",
"accessPublicRead": "Publiek",
"type": "Type",
"path": "Pad",
"showOnMap": "Tonen op kaart",
"noAssetSelected": "Kies aan de linkerkant een asset uit de lijst",
"loading": "Aan het laden...",
"location": "Locatie"
"location": "Locatie",
"hour": "Hour",
"day": "Day",
"week": "Week",
"month": "Month",
"year": "Year",
"period": "Period",
"ending": "Ending"
}
@@ -20,6 +20,7 @@
"@openremote/rest": "^1.1.0",
"i18next": "^15.0.9",
"i18next-xhr-backend": "^2.0.1",
"moment": "^2.24.0",
"platform": "^1.3.5",
"url-search-params-polyfill": "^5.0.0"
},
@@ -80,16 +80,16 @@ export class OrAssetViewer extends subscribe(manager)(translate(i18next)(LitElem
public static DEFAULT_CONFIG: AssetViewerConfig = {
viewerStyles: {
gridTemplateColumns: "repeat(12, 1fr)",
gridTemplateRows: "30px max-content"
gridTemplateRows: "auto minmax(0, 1fr) minmax(0, 50%)"
},
panels: {
"info": {
type: "property",
panelStyles: {
gridColumnStart: "1",
gridColumnEnd: "7",
gridRowStart: "2",
gridRowEnd: "3",
gridRowStart: "1",
gridRowEnd: "2",
},
fieldStyles: {
name: {
@@ -109,8 +109,8 @@ export class OrAssetViewer extends subscribe(manager)(translate(i18next)(LitElem
panelStyles: {
gridColumnStart: "7",
gridColumnEnd: "13",
gridRowStart: "2",
gridRowEnd: "4",
gridRowStart: "1",
gridRowEnd: "3",
minHeight: "400px"
},
fieldStyles: {
@@ -125,17 +125,17 @@ export class OrAssetViewer extends subscribe(manager)(translate(i18next)(LitElem
panelStyles: {
gridColumnStart: "1",
gridColumnEnd: "7",
gridRowStart: "3",
gridRowEnd: "5"
gridRowStart: "2",
gridRowEnd: "4"
}
},
"history": {
type: "history",
panelStyles: {
gridColumnStart: "7",
gridColumnEnd: "13",
gridRowStart: "4",
gridRowEnd: "5",
gridRowStart: "3",
gridRowEnd: "4"
},
scrollable: false
}
@@ -211,22 +211,24 @@ export class OrAssetViewer extends subscribe(manager)(translate(i18next)(LitElem
}

const descriptor = AssetModelUtil.getAssetDescriptor(this.asset!.type!);
var assetDate = new Date(this.asset!.createdOn!);
var formattedDate = assetDate.toLocaleString('nl-NL');

return html`
<div id="container" style="${this._viewerConfig.viewerStyles ? styleMap(this._viewerConfig.viewerStyles) : ""}">
<div id="wrapper">
<div id="asset-header">
<div class="title">
<div id="title">
<or-icon title="${descriptor && descriptor.type ? descriptor.type : "unset"}" style="--or-icon-fill: ${descriptor && descriptor.color ? "#" + descriptor.color : "unset"}" icon="${descriptor && descriptor.icon ? descriptor.icon : AssetType.THING.icon}"></or-icon>${this.asset.name}
</div>
<div class="created mobileHidden">Aangemaakt op: ${formattedDate}</div>
<div id="created"><or-translate value="createdOn" .options="${{date: new Date(this.asset!.createdOn!)} as i18next.TOptions<i18next.InitOptions>}"></or-translate></div>
</div>
<div id="container" style="${this._viewerConfig.viewerStyles ? styleMap(this._viewerConfig.viewerStyles) : ""}">
${html`${Object.entries(this._viewerConfig.panels).map(([name, panelConfig]) => {
const panelTemplate = OrAssetViewer.getPanel(name, this.asset!, this._attributes!, this._viewerConfig!, panelConfig, this.shadowRoot);
return panelTemplate || ``;
})}`
}
</div>
${html`${Object.entries(this._viewerConfig.panels).map(([name, panelConfig]) => {
const panelTemplate = OrAssetViewer.getPanel(name, this.asset!, this._attributes!, this._viewerConfig!, panelConfig, this.shadowRoot);
return panelTemplate || ``;
})}`
}`;
</div>
`;
}

protected updated(_changedProperties: PropertyValues) {
@@ -347,23 +349,29 @@ export class OrAssetViewer extends subscribe(manager)(translate(i18next)(LitElem
width: 100%;
display: flex;
flex-direction: column;
position: relative;
}
#history-controls {
flex: 0;
margin-bottom: 10px;
position: absolute;
}
#history-attribute-picker {
flex: 0;
width: 200px;
}
or-attribute-history {
height: 100%;
flex: 1 1 auto;
--or-attribute-history-controls-margin: 0 0 0 204px;
}
</style>
<div id="history-container">
<div id="history-controls">
<or-input id="history-attribute-picker" @or-input-changed="${(evt: OrInputChangedEvent) => attributeChanged(evt.detail.value)}" .type="${InputType.SELECT}" .options="${historyAttrs.map((attr) => [attr.name, getAttributeLabel(attr, undefined)])}"></or-input>
<or-input id="history-attribute-picker" .label="${i18next.t("attribute")}" @or-input-changed="${(evt: OrInputChangedEvent) => attributeChanged(evt.detail.value)}" .type="${InputType.SELECT}" .options="${historyAttrs.map((attr) => [attr.name, getAttributeLabel(attr, undefined)])}"></or-input>
</div>
<or-attribute-history id="attribute-history" .config="${viewerConfig.historyConfig}" .assetType="${asset.type}"></or-attribute-history>
</div>
@@ -22,14 +22,21 @@ export const style = css`
display: none;
}
#wrapper {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
}
#container {
box-sizing: border-box;
padding: 20px 30px;
column-gap: var(--internal-or-asset-viewer-panel-margin);
row-gap: var(--internal-or-asset-viewer-panel-margin);
height: 100%;
flex: 1 1 auto;
display: grid;
overflow-y: auto;
width: 100%;
-webkit-animation: fadein 0.3s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 0.3s; /* Firefox < 16 */
-ms-animation: fadein 0.3s; /* Internet Explorer */
@@ -67,26 +74,23 @@ export const style = css`
}
#asset-header {
padding: 20px 30px 0 30px;
display: flex;
align-items: center;
justify-content: space-between;
grid-column-start: 1;
grid-column-end: 13;
grid-row-start: 1;
grid-row-end: 2;
}
#asset-header > .title {
#title {
flex: 1 0 auto;
font-size: 18px;
font-weight: bold;
}
#asset-header .title > or-icon {
#title > or-icon {
margin-right: 10px;
}
#asset-header > .created {
#created {
text-align: right;
flex: 1 0 auto;
font-size: 12px;

0 comments on commit 3b3a53b

Please sign in to comment.
You can’t perform that action at this time.