231801_test_to_master #1519
|
@ -15,23 +15,28 @@ export default class Controller extends Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
set value(value) {
|
set value(value) {
|
||||||
|
const wasEmpty = this._value === undefined;
|
||||||
this._value = value;
|
this._value = value;
|
||||||
const span = this.element;
|
|
||||||
const formattedValue = this.formatValue(value);
|
|
||||||
span.textContent = formattedValue;
|
|
||||||
span.title = typeof value == 'string' && value.length > maxStrLen ? value : '';
|
|
||||||
span.className = `js-${value == null ? 'null' : typeof value}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
formatValue(value) {
|
let text;
|
||||||
if (value == null) return '∅';
|
let cssClass;
|
||||||
switch (typeof value) {
|
const type = typeof value;
|
||||||
|
|
||||||
|
if (value == null) {
|
||||||
|
text = '∅';
|
||||||
|
cssClass = 'null';
|
||||||
|
} else {
|
||||||
|
cssClass = type;
|
||||||
|
switch (type) {
|
||||||
case 'boolean':
|
case 'boolean':
|
||||||
return value ? '✓' : '✗';
|
text = value ? '✓' : '✗';
|
||||||
|
cssClass = value ? 'true' : 'false';
|
||||||
|
break;
|
||||||
case 'string':
|
case 'string':
|
||||||
return value.length <= maxStrLen
|
text = value.length <= maxStrLen
|
||||||
? value
|
? value
|
||||||
: value.substring(0, maxStrLen) + '...';
|
: value.substring(0, maxStrLen) + '...';
|
||||||
|
break;
|
||||||
case 'object':
|
case 'object':
|
||||||
if (value instanceof Date) {
|
if (value instanceof Date) {
|
||||||
const hasZeroTime =
|
const hasZeroTime =
|
||||||
|
@ -39,13 +44,25 @@ export default class Controller extends Component {
|
||||||
value.getMinutes() === 0 &&
|
value.getMinutes() === 0 &&
|
||||||
value.getSeconds() === 0;
|
value.getSeconds() === 0;
|
||||||
const format = hasZeroTime ? 'dd/MM/yyyy' : 'dd/MM/yyyy HH:mm:ss';
|
const format = hasZeroTime ? 'dd/MM/yyyy' : 'dd/MM/yyyy HH:mm:ss';
|
||||||
return this.$filter('date')(value, format);
|
text = this.$filter('date')(value, format);
|
||||||
} else
|
} else
|
||||||
return value;
|
text = value;
|
||||||
|
break;
|
||||||
default:
|
default:
|
||||||
return value;
|
text = value;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const el = this.element;
|
||||||
|
el.textContent = text;
|
||||||
|
el.title = type == 'string' && value.length > maxStrLen ? value : '';
|
||||||
|
|
||||||
|
cssClass = `json-${cssClass}`;
|
||||||
|
if (wasEmpty)
|
||||||
|
el.classList.add(cssClass);
|
||||||
|
else
|
||||||
|
el.classList.replace(this.className, cssClass);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
ngModule.vnComponent('vnJsonValue', {
|
ngModule.vnComponent('vnJsonValue', {
|
||||||
|
|
|
@ -1,20 +1,23 @@
|
||||||
vn-json-value {
|
vn-json-value {
|
||||||
display: inline;
|
display: inline;
|
||||||
|
|
||||||
&.js-string {
|
&.json-string {
|
||||||
color: #d172cc;
|
color: #d172cc;
|
||||||
}
|
}
|
||||||
&.js-object {
|
&.json-object {
|
||||||
/*color: #d1a572;*/
|
/*color: #d1a572;*/
|
||||||
color: #d172cc;
|
color: #d172cc;
|
||||||
}
|
}
|
||||||
&.js-number {
|
&.json-number {
|
||||||
color: #85d0ff;
|
color: #85d0ff;
|
||||||
}
|
}
|
||||||
&.js-boolean {
|
&.json-true {
|
||||||
color: #7dc489;
|
color: #7dc489;
|
||||||
}
|
}
|
||||||
&.js-null {
|
&.json-false {
|
||||||
|
color: #c74949;
|
||||||
|
}
|
||||||
|
&.json-null {
|
||||||
color: #cd7c7c;
|
color: #cd7c7c;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
|
@ -97,7 +97,7 @@ export default class Controller extends Section {
|
||||||
format = `'${this.$t('today')}'`;
|
format = `'${this.$t('today')}'`;
|
||||||
else if (diff == 1)
|
else if (diff == 1)
|
||||||
format = `'${this.$t('yesterday')}'`;
|
format = `'${this.$t('yesterday')}'`;
|
||||||
else if (diff < 7)
|
else if (diff > 1 && diff < 7)
|
||||||
format = `'${date.toLocaleDateString(this.lang, {weekday: 'short'})}'`;
|
format = `'${date.toLocaleDateString(this.lang, {weekday: 'short'})}'`;
|
||||||
else if (this.today.getFullYear() == date.getFullYear())
|
else if (this.today.getFullYear() == date.getFullYear())
|
||||||
format = `d '${date.toLocaleDateString(this.lang, {month: 'short'})}'`;
|
format = `d '${date.toLocaleDateString(this.lang, {month: 'short'})}'`;
|
||||||
|
|
Loading…
Reference in New Issue