-
+
+
+
+
+
+
+
+
+
+
+
@@ -62,26 +98,48 @@ import {
select,
} from 'd3'
import RangeInput from '../shared/RangeInput.vue'
-import ConfigItem from '../shared/ConfigItem.vue'
-import SwitchInput from '../shared/SwitchInput.vue'
+//import ConfigItem from '../shared/ConfigItem.vue'
+//import SwitchInput from '../shared/SwitchInput.vue'
import { chargePoints } from '../chargePointList/model'
+import PricePad from '../shared/PricePad.vue'
const props = defineProps<{
chargePointId: number
globalview?: boolean
}>()
const cp = computed(() => chargePoints[props.chargePointId])
-let mp = ref(cp.value.etMaxPrice)
const maxPriceEdited = ref(false)
-const etActive = computed({
+const displayKeypad = ref(false)
+/* const etActive = computed({
get: () => cp.value.etActive,
set: (value: boolean) => {
cp.value.etActive = value
},
+}) */
+let _maxPrice = cp.value ? ref(cp.value.etMaxPrice) : ref(0)
+const maxPrice = computed({
+ get() {
+ return _maxPrice.value
+ // ref(props.chargepoint.etMaxPrice)
+ },
+ set(newmax) {
+ _maxPrice.value = newmax
+ maxPriceEdited.value = true
+ },
+})
+
+const maxTyped = computed({
+ get() {
+ return (Math.round(_maxPrice.value * 10) / 10).toString()
+ },
+ set(newmax) {
+ maxPrice.value = parseFloat(newmax) ?? maxPrice.value
+ displayKeypad.value = false
+ },
})
function setMaxPrice() {
if (cp.value) {
- cp.value.etMaxPrice = mp.value
+ cp.value.etMaxPrice = maxPrice.value
}
maxPriceEdited.value = false
}
@@ -109,8 +167,15 @@ const barwidth = computed(() => {
}
})
const confirmButtonStyle = computed(() => {
- return { background: 'var(--color-charging)' }
+ if (maxPriceEdited.value) {
+ return { background: 'var(--color-charging)', color: 'var(--color-fg)' }
+ } else {
+ return { background: 'var(--color-menu)' }
+ }
})
+function showKeypad() {
+ displayKeypad.value = !displayKeypad.value
+}
const xScale = computed(() => {
let xdomain = extent(plotdata.value, (d) => d[0]) as [Date, Date]
if (xdomain[1]) {
@@ -135,8 +200,8 @@ const yScale = computed(() => {
const linePath = computed(() => {
const generator = line()
const points = [
- [margin.left, yScale.value(mp.value)],
- [width - margin.right - 1, yScale.value(mp.value)],
+ [margin.left, yScale.value(maxPrice.value)],
+ [width - margin.right - 1, yScale.value(maxPrice.value)],
]
return generator(points as [number, number][])
})
@@ -175,7 +240,7 @@ const draw = computed(() => {
.attr('width', barwidth.value)
.attr('height', (d) => yScale.value(yDomain.value[0]) - yScale.value(d[1]))
.attr('fill', (d) =>
- d[1] <= mp.value ? 'var(--color-charging)' : 'var(--color-axis)',
+ d[1] <= maxPrice.value ? 'var(--color-charging)' : 'var(--color-axis)',
)
// X Axis
const xAxis = svg.append('g').attr('class', 'axis').call(xAxisGenerator.value)
@@ -218,18 +283,70 @@ const chartId = computed(() => {
return 'priceChartCanvasGlobal'
}
})
+const prices = computed(() => {
+ let result: number[] = []
+ etData.etPriceList.forEach((p) => {
+ result.push(p)
+ })
+ return result.sort((a, b) => a - b)
+})
+
+function priceDown() {
+ let lastValue = prices.value[0]
+ for (let p of prices.value) {
+ if (p >= maxPrice.value) {
+ break
+ } else {
+ lastValue = p
+ }
+ }
+ maxPrice.value = lastValue
+}
+function priceUp() {
+ let result = prices.value[0]
+ for (let p of prices.value) {
+ if (p > maxPrice.value) {
+ result = p
+ break
+ } else {
+ result = p
+ }
+ }
+ maxPrice.value = result
+}
+
onMounted(() => {
needsUpdate.value = !needsUpdate.value
})
diff --git a/packages/modules/display_themes/colors/source/src/components/shared/PadButtonSmall.vue b/packages/modules/display_themes/colors/source/src/components/shared/PadButtonSmall.vue
new file mode 100644
index 0000000000..b776da0661
--- /dev/null
+++ b/packages/modules/display_themes/colors/source/src/components/shared/PadButtonSmall.vue
@@ -0,0 +1,51 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/modules/display_themes/colors/source/src/components/shared/PricePad.vue b/packages/modules/display_themes/colors/source/src/components/shared/PricePad.vue
new file mode 100644
index 0000000000..201fdb9ba3
--- /dev/null
+++ b/packages/modules/display_themes/colors/source/src/components/shared/PricePad.vue
@@ -0,0 +1,100 @@
+
+
+
{{ limit }} ct
+
+
{{ val }}
+
+
{{ val }}
+
+
{{ val }}
+
+
+
0
+
,
+
+
+
+
+
diff --git a/packages/modules/display_themes/colors/source/src/components/shared/RangeInput.vue b/packages/modules/display_themes/colors/source/src/components/shared/RangeInput.vue
index d8f6bb0396..e24ce7bcc7 100755
--- a/packages/modules/display_themes/colors/source/src/components/shared/RangeInput.vue
+++ b/packages/modules/display_themes/colors/source/src/components/shared/RangeInput.vue
@@ -6,15 +6,58 @@
-
+
+
+
+
+
+
+
@@ -28,6 +71,7 @@
diff --git a/packages/modules/display_themes/colors/source/src/views/SettingsPage.vue b/packages/modules/display_themes/colors/source/src/views/SettingsPage.vue
index a493470b28..249a910d72 100644
--- a/packages/modules/display_themes/colors/source/src/views/SettingsPage.vue
+++ b/packages/modules/display_themes/colors/source/src/views/SettingsPage.vue
@@ -42,6 +42,7 @@
Zeitpläne