[Major] Redid tables as divs for IE 11
This commit is contained in:
parent
371f91bad8
commit
2e9df49801
|
|
@ -78,6 +78,17 @@
|
|||
min-height: 300px;
|
||||
}
|
||||
|
||||
.cell {
|
||||
margin-top: 0.5em;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.data-list {
|
||||
max-width: 500px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<paper-material class="g-card g-m-3 g-mt-4" elevation="1">
|
||||
|
|
@ -219,43 +230,34 @@
|
|||
</template>
|
||||
<template is="dom-if" if="[[_isNotEmpty(object.parameterBags)]]">
|
||||
|
||||
<table class="g-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ParameterBag</th>
|
||||
<th>Parameter Id</th>
|
||||
<th>Name</th>
|
||||
<th>Interpretation</th>
|
||||
<th>UOM</th>
|
||||
<th>Type</th>
|
||||
<th>Value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<div class="g-row g-pt-2">
|
||||
<div class="g-2"><b>ParameterBag</b></div>
|
||||
<div class="g-2"><b>Parameter Id</b></div>
|
||||
<div class="g-2"><b>Name</b></div>
|
||||
<div class="g-2"><b>Interpretation</b></div>
|
||||
<div class="g-1"><b>UOM</b></div>
|
||||
<div class="g-1"><b>Type</b></div>
|
||||
<div class="g-2"><b>Value</b></div>
|
||||
</div>
|
||||
|
||||
<template is="dom-repeat" items="{{_asArray(object.parameterBags)}}" as="bag">
|
||||
<template is="dom-repeat"
|
||||
items="{{_asArray(object.parameterBags)}}"
|
||||
as="bag">
|
||||
<template is="dom-repeat"
|
||||
items="{{_asArray(bag.value.parameters)}}"
|
||||
as="param">
|
||||
items="{{_asArray(bag.value.parameters)}}"
|
||||
as="param">
|
||||
|
||||
<tr>
|
||||
<td>[[bag.value.id]]</td>
|
||||
<td>[[param.value.id]]</td>
|
||||
<td>[[param.value.name]]</td>
|
||||
<td>[[param.value.interpretation]]</td>
|
||||
<td>[[param.value.uom]]</td>
|
||||
<td>[[param.value.type]]</td>
|
||||
<td>[[param.value.value]]</td>
|
||||
</tr>
|
||||
<div class="g-row">
|
||||
<div class="g-2 cell">[[bag.value.id]]</div>
|
||||
<div class="g-2 cell">[[param.value.id]]</div>
|
||||
<div class="g-2 cell">[[param.value.name]]</div>
|
||||
<div class="g-2 cell">[[param.value.interpretation]]</div>
|
||||
<div class="g-1 cell">[[param.value.uom]]</div>
|
||||
<div class="g-1 cell">[[param.value.type]]</div>
|
||||
<div class="g-2 cell">[[param.value.value]]</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</template>
|
||||
|
||||
</template>
|
||||
|
|
@ -274,27 +276,18 @@
|
|||
</template>
|
||||
<template is="dom-if" if="[[_isNotEmpty(object.policies)]]">
|
||||
|
||||
<table class="g-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Type</th>
|
||||
<th>Value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<div class="g-row g-pt-2 data-list">
|
||||
<div class="g-6"><b>Type</b></div>
|
||||
<div class="g-6"><b>Value</b></div>
|
||||
</div>
|
||||
|
||||
<tbody>
|
||||
<template is="dom-repeat" items="{{_asArray(object.policies)}}" as="policy">
|
||||
<div class="g-row data-list">
|
||||
<div class="g-6 cell">[[policy.key]]</div>
|
||||
<div class="g-6 g-pl-2 cell">[[policy.value]]</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template is="dom-repeat" items="{{_asArray(object.policies)}}" as="policy">
|
||||
|
||||
<tr>
|
||||
<td>[[policy.key]]</td>
|
||||
<td>[[policy.value]]</td>
|
||||
</tr>
|
||||
|
||||
</template>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</template>
|
||||
|
||||
</template>
|
||||
|
|
@ -317,37 +310,26 @@
|
|||
items="[[_asArray(object.timedStates)]]"
|
||||
as="timedState">
|
||||
|
||||
<paper-material class="g-card" elevation="1">
|
||||
<table class="g-table table-title">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><b>Id</b> [[timedState.value.id]]</td>
|
||||
<td><b>Name</b> [[timedState.value.name]]</td>
|
||||
<td><b>Type</b> [[timedState.value.type]]</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="g-row g-pt-2">
|
||||
<div class="g-4"><b>Id</b> [[timedState.value.id]]</div>
|
||||
<div class="g-4"><b>Name</b> [[timedState.value.name]]</div>
|
||||
<div class="g-4"><b>Type</b> [[timedState.value.type]]</div>
|
||||
</div>
|
||||
|
||||
<table class="g-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Time</th>
|
||||
<th>Value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<template is="dom-repeat"
|
||||
items="[[timedState.value.values]]"
|
||||
as="timedStateValue">
|
||||
<tr>
|
||||
<td>[[timedStateValue.time]]</td>
|
||||
<td>[[timedStateValue.value]]</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="g-row g-pt-4 data-list">
|
||||
<div class="g-6"><b>Time</b></div>
|
||||
<div class="g-6"><b>Value</b></div>
|
||||
</div>
|
||||
|
||||
<template is="dom-repeat"
|
||||
items="[[timedState.value.values]]"
|
||||
as="timedStateValue">
|
||||
<div class="g-row data-list">
|
||||
<div class="g-6 cell">[[timedStateValue.time]]</div>
|
||||
<div class="g-6 g-pl-2 cell">[[timedStateValue.value]]</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</paper-material>
|
||||
|
||||
</template>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -68,109 +68,122 @@
|
|||
};
|
||||
}
|
||||
|
||||
paper-material {
|
||||
background: white;
|
||||
margin-top: 0.3em;
|
||||
margin-bottom: 0.3em;
|
||||
padding: 0.3em;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class="g-row g-pt-4">
|
||||
<paper-material elevation="1" class="g-m-3">
|
||||
|
||||
<div class="g-3">
|
||||
<paper-dropdown-menu no-label-float label="select realm" class="custom">
|
||||
<paper-listbox attr-for-selected="value" class="dropdown-content" selected="{{selectedRealm}}">
|
||||
<div class="g-row g-pt-4">
|
||||
|
||||
<template is="dom-repeat" items="[[realms]]">
|
||||
<paper-item value="[[item.name]]">[[item.name]]</paper-item>
|
||||
</template>
|
||||
<div class="g-3">
|
||||
<paper-dropdown-menu no-label-float label="select realm" class="custom">
|
||||
<paper-listbox attr-for-selected="value" class="dropdown-content" selected="{{selectedRealm}}">
|
||||
|
||||
</paper-listbox>
|
||||
</paper-dropdown-menu>
|
||||
</div>
|
||||
<template is="dom-repeat" items="[[realms]]">
|
||||
<paper-item value="[[item.name]]">[[item.name]]</paper-item>
|
||||
</template>
|
||||
|
||||
<div class="g-3 g-pl-2">
|
||||
<paper-dropdown-menu no-label-float label="select severity" class="custom">
|
||||
<paper-listbox attr-for-selected="value" class="dropdown-content" selected="{{selectedSeverity}}">
|
||||
|
||||
<paper-item value=""></paper-item>
|
||||
<template is="dom-repeat" items="[[severities]]">
|
||||
<paper-item value="[[item]]">[[item]]</paper-item>
|
||||
</template>
|
||||
|
||||
</paper-listbox>
|
||||
</paper-dropdown-menu>
|
||||
</div>
|
||||
|
||||
<div class="g-3 g-pl-2">
|
||||
<paper-input no-label-float value="{{searchTerm}}" class="searchField">
|
||||
<template is="dom-if" if="[[isEmptyString(searchTerm)]]">
|
||||
<iron-icon suffix icon="search"></iron-icon>
|
||||
</template>
|
||||
<template is="dom-if" if="[[!isEmptyString(searchTerm)]]">
|
||||
<iron-icon suffix icon="clear" id="clear" on-tap="onClearTapped"></iron-icon>
|
||||
</template>
|
||||
</paper-input>
|
||||
</div>
|
||||
|
||||
<div class="g-3">
|
||||
<paper-icon-button class="g-pull-right"
|
||||
icon="refresh"
|
||||
title="Refresh"
|
||||
on-tap="reloadOperationsLog"></paper-icon-button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="g-row">
|
||||
<div class="g-2">
|
||||
<vaadin-date-picker label="from" value="{{from}}" i18n="{{i18n}}"></vaadin-date-picker>
|
||||
</div>
|
||||
<div class="g-2 g-pl-2">
|
||||
<vaadin-date-picker label="to" value="{{to}}" i18n="{{i18n}}"></vaadin-date-picker>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="g-row g-pt-4">
|
||||
|
||||
<div class="g-12">
|
||||
|
||||
<div class="g-row">
|
||||
<div class="g-2"><b>ID</b></div>
|
||||
<div class="g-3"><b>Date</b></div>
|
||||
<div class="g-2"><b>Severity</b></div>
|
||||
<div class="g-5"><b>Locator</b></div>
|
||||
</paper-listbox>
|
||||
</paper-dropdown-menu>
|
||||
</div>
|
||||
|
||||
<template is="dom-repeat" items="[[operationsLog.data]]" as="log">
|
||||
<div class="g-3 g-pl-2">
|
||||
<paper-dropdown-menu no-label-float label="select severity" class="custom">
|
||||
<paper-listbox attr-for-selected="value"
|
||||
class="dropdown-content"
|
||||
selected="{{selectedSeverity}}">
|
||||
|
||||
<hr>
|
||||
<paper-item value=""></paper-item>
|
||||
<template is="dom-repeat" items="[[severities]]">
|
||||
<paper-item value="[[item]]">[[item]]</paper-item>
|
||||
</template>
|
||||
|
||||
<div class="g-row ">
|
||||
<div class="g-2">[[log.id]]</div>
|
||||
<div class="g-3">[[log.date]]</div>
|
||||
<div class="g-2">[[log.severity]]</div>
|
||||
<div class="g-5">[[log.locator]]</div>
|
||||
</paper-listbox>
|
||||
</paper-dropdown-menu>
|
||||
</div>
|
||||
|
||||
<div class="g-3 g-pl-2">
|
||||
<paper-input no-label-float value="{{searchTerm}}" class="searchField">
|
||||
<template is="dom-if" if="[[isEmptyString(searchTerm)]]">
|
||||
<iron-icon suffix icon="search"></iron-icon>
|
||||
</template>
|
||||
<template is="dom-if" if="[[!isEmptyString(searchTerm)]]">
|
||||
<iron-icon suffix icon="clear" id="clear" on-tap="onClearTapped"></iron-icon>
|
||||
</template>
|
||||
</paper-input>
|
||||
</div>
|
||||
|
||||
<div class="g-3">
|
||||
<paper-icon-button class="g-pull-right"
|
||||
icon="refresh"
|
||||
title="Refresh"
|
||||
on-tap="reloadOperationsLog"></paper-icon-button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="g-row">
|
||||
<div class="g-2">
|
||||
<vaadin-date-picker label="from" value="{{from}}" i18n="{{i18n}}"></vaadin-date-picker>
|
||||
</div>
|
||||
<div class="g-2 g-pl-2">
|
||||
<vaadin-date-picker label="to" value="{{to}}" i18n="{{i18n}}"></vaadin-date-picker>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="g-row g-pt-4">
|
||||
|
||||
<div class="g-12">
|
||||
|
||||
<div class="g-row">
|
||||
<div class="g-2"><b>ID</b></div>
|
||||
<div class="g-3"><b>Date</b></div>
|
||||
<div class="g-2"><b>Severity</b></div>
|
||||
<div class="g-5"><b>Locator</b></div>
|
||||
</div>
|
||||
|
||||
<template is="dom-repeat" items="[[operationsLog.data]]" as="log">
|
||||
|
||||
<hr />
|
||||
|
||||
<div class="g-row ">
|
||||
<div class="g-2">[[log.id]]</div>
|
||||
<div class="g-3">[[log.date]]</div>
|
||||
<div class="g-2">[[log.severity]]</div>
|
||||
<div class="g-5">[[log.locator]]</div>
|
||||
</div>
|
||||
<div class="g-row">
|
||||
<div class="g-12">
|
||||
<p>[[log.message]]</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<div class="g-row">
|
||||
<div class="g-12">
|
||||
<p>[[log.message]]</p>
|
||||
<div class="g-m-2 g-center">
|
||||
<paper-icon-button icon="first-page" on-tap="_toFirstPage"></paper-icon-button>
|
||||
<paper-icon-button icon="chevron-left" on-tap="_toPreviousPage"></paper-icon-button>
|
||||
<span>[[operationsLog.offset]] to [[_getEnd(operationsLog)]] of [[operationsLog.size]]</span>
|
||||
<paper-icon-button icon="chevron-right" on-tap="_toNextPage"></paper-icon-button>
|
||||
<paper-icon-button icon="last-page" on-tap="_toLastPage"></paper-icon-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<div class="g-row">
|
||||
<div class="g-12">
|
||||
<div class="g-m-2 g-center">
|
||||
<paper-icon-button icon="first-page" on-tap="_toFirstPage"></paper-icon-button>
|
||||
<paper-icon-button icon="chevron-left" on-tap="_toPreviousPage"></paper-icon-button>
|
||||
<span>[[operationsLog.offset]] to [[_getEnd(operationsLog)]] of [[operationsLog.size]]</span>
|
||||
<paper-icon-button icon="chevron-right" on-tap="_toNextPage"></paper-icon-button>
|
||||
<paper-icon-button icon="last-page" on-tap="_toLastPage"></paper-icon-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</paper-material>
|
||||
|
||||
<paper-dialog id="dlg" modal>
|
||||
<h2>[[dlgTitle]]</h2>
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@
|
|||
</div>
|
||||
|
||||
<template is="dom-repeat" items="[[roles]]" as="role">
|
||||
<strolch-wc-role base-path="[[basePath]]"
|
||||
<strolch-wc-role class="g-ml-3 g-mr-3" base-path="[[basePath]]"
|
||||
role="[[role]]"
|
||||
on-strolch-remove-role="onRemoveRole"
|
||||
on-strolch-role-reload-needed="onReload"></strolch-wc-role>
|
||||
|
|
|
|||
|
|
@ -32,65 +32,54 @@
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
.g-table {
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
.g-table th, .g-table td {
|
||||
vertical-align: inherit;
|
||||
paper-material {
|
||||
background: white;
|
||||
margin-top: 0.3em;
|
||||
margin-bottom: 0.3em;
|
||||
padding: 0.3em;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class="g-row g-pt-4">
|
||||
<paper-material elevation="1" class="g-m-3">
|
||||
|
||||
<div class="g-12">
|
||||
<div class="g-row g-pt-4">
|
||||
|
||||
<paper-material elevation="1">
|
||||
<div class="g-12">
|
||||
|
||||
<table class="g-table g-m-0 g-12">
|
||||
<div class="g-row">
|
||||
<div class="g-2"><b>Username</b></div>
|
||||
<div class="g-2"><b>Name</b></div>
|
||||
<div class="g-3"><b>Roles</b></div>
|
||||
<div class="g-2"><b>Login time</b></div>
|
||||
<div class="g-2"><b>Last Access</b></div>
|
||||
<div class="g-1"></div>
|
||||
</div>
|
||||
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Session Id</td>
|
||||
<td>Username</td>
|
||||
<td>Name</td>
|
||||
<td>Roles</td>
|
||||
<td>Login time</td>
|
||||
<td>Last Access</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</thead>
|
||||
<template is="dom-repeat" items="[[sessions]]">
|
||||
|
||||
<tbody>
|
||||
<hr />
|
||||
|
||||
<template is="dom-repeat" items="[[sessions]]">
|
||||
<div class="g-row">
|
||||
<div class="g-2 g-auto-middle">[[item.username]]</div>
|
||||
<div class="g-2 g-auto-middle">[[_getName(item)]]</div>
|
||||
<div class="g-3 g-auto-middle">[[arrayToString(item.roles)]]</div>
|
||||
<div class="g-2 g-auto-middle">[[toLocalDateTime(item.loginTime)]]</div>
|
||||
<div class="g-2 g-auto-middle">[[toLocalDateTime(item.lastAccess)]]</div>
|
||||
<div class="g-1 g-auto-middle">
|
||||
<paper-icon-button icon="delete"
|
||||
title="Remove"
|
||||
on-tap="removeSession"></paper-icon-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<tr>
|
||||
<td>[[item.sessionId]]</td>
|
||||
<td>[[item.username]]</td>
|
||||
<td>[[_getName(item)]]</td>
|
||||
<td>[[arrayToString(item.roles)]]</td>
|
||||
<td>[[toLocalDateTime(item.loginTime)]]</td>
|
||||
<td>[[toLocalDateTime(item.lastAccess)]]</td>
|
||||
<td>
|
||||
<paper-icon-button icon="delete"
|
||||
title="Remove"
|
||||
on-tap="removeSession"></paper-icon-button>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
</template>
|
||||
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
|
||||
</paper-material>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</paper-material>
|
||||
|
||||
<paper-dialog id="dlg" modal>
|
||||
<h2>[[dlgTitle]]</h2>
|
||||
|
|
|
|||
|
|
@ -39,16 +39,11 @@
|
|||
background-color: white;
|
||||
}
|
||||
|
||||
.g-table {
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
.g-table thead {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.g-table th, .g-table td {
|
||||
vertical-align: inherit;
|
||||
paper-material {
|
||||
background: white;
|
||||
margin-top: 0.3em;
|
||||
margin-bottom: 0.3em;
|
||||
padding: 0.3em;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -59,57 +54,47 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="g-row g-pt-4">
|
||||
<paper-material elevation="1" class="g-ml-3 g-mr-3">
|
||||
|
||||
<div class="g-12">
|
||||
<div class="g-row g-pt-4">
|
||||
|
||||
<paper-material elevation="1">
|
||||
<div class="g-12">
|
||||
|
||||
<table class="g-table g-m-0 g-12">
|
||||
<div class="g-row">
|
||||
<div class="g-2">Username</div>
|
||||
<div class="g-3">Name</div>
|
||||
<div class="g-1">State</div>
|
||||
<div class="g-1">Locale</div>
|
||||
<div class="g-3">Roles</div>
|
||||
<div class="g-2"></div>
|
||||
</div>
|
||||
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Username</td>
|
||||
<td>Name</td>
|
||||
<td width="100px">State</td>
|
||||
<td width="80px">Locale</td>
|
||||
<td>Roles</td>
|
||||
<td width="130px"></td>
|
||||
</tr>
|
||||
</thead>
|
||||
<template is="dom-repeat" items="[[users]]">
|
||||
|
||||
<tbody>
|
||||
<hr />
|
||||
|
||||
<template is="dom-repeat" items="[[users]]">
|
||||
<div class="g-row">
|
||||
<div class="g-2">[[item.username]]</div>
|
||||
<div class="g-3">[[_getName(item)]]</div>
|
||||
<div class="g-1">[[item.userState]]</div>
|
||||
<div class="g-1">[[item.locale]]</div>
|
||||
<div class="g-3">[[arrayToString(item.roles)]]</div>
|
||||
<div class="g-2">
|
||||
<paper-icon-button icon="create" title="Edit" on-tap="_editUser"></paper-icon-button>
|
||||
<paper-icon-button icon="lock-outline"
|
||||
title="Set password"
|
||||
on-tap="_openPwDlg"></paper-icon-button>
|
||||
<paper-icon-button icon="delete"
|
||||
title="Remove"
|
||||
on-tap="_removeUser"></paper-icon-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<tr>
|
||||
<td>[[item.username]]</td>
|
||||
<td>[[_getName(item)]]</td>
|
||||
<td>[[item.userState]]</td>
|
||||
<td>[[item.locale]]</td>
|
||||
<td>[[arrayToString(item.roles)]]</td>
|
||||
<td>
|
||||
<paper-icon-button icon="create"
|
||||
title="Edit"
|
||||
on-tap="_editUser"></paper-icon-button>
|
||||
<paper-icon-button icon="lock-outline"
|
||||
title="Set password"
|
||||
on-tap="_openPwDlg"></paper-icon-button>
|
||||
<paper-icon-button icon="delete"
|
||||
title="Remove"
|
||||
on-tap="_removeUser"></paper-icon-button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</template>
|
||||
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
</paper-material>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</paper-material>
|
||||
|
||||
<paper-dialog id="dlg" modal>
|
||||
<h2>[[dlgTitle]]</h2>
|
||||
|
|
|
|||
Loading…
Reference in New Issue