|
1 | 1 | <template> |
2 | | - <q-card class="rounded-borders-md"> |
| 2 | + <q-card> |
3 | 3 | <q-card-section> |
4 | 4 | <div class="row no-wrap"> |
5 | 5 | <div class="text-h6 ellipsis" :title="planName.value"> |
|
26 | 26 | <q-input |
27 | 27 | v-model="planTime.value" |
28 | 28 | type="time" |
29 | | - label="Ziel-Uhrzeit" |
| 29 | + label="Ziel-Termin" |
30 | 30 | class="col" |
31 | 31 | /> |
32 | 32 | </div> |
| 33 | + <div class="q-mb-sm"> |
| 34 | + <div class="text-subtitle2 q-mb-sm q-mt-sm">Wiederholungen</div> |
| 35 | + <q-btn-group spread> |
| 36 | + <q-btn |
| 37 | + size="sm" |
| 38 | + :color="planFrequency.value === 'once' ? 'primary' : 'grey'" |
| 39 | + @click="planFrequency.value = 'once'" |
| 40 | + label="Einmalig" |
| 41 | + /> |
| 42 | + <q-btn |
| 43 | + size="sm" |
| 44 | + :color="planFrequency.value === 'daily' ? 'primary' : 'grey'" |
| 45 | + @click="planFrequency.value = 'daily'" |
| 46 | + label="Täglich" |
| 47 | + /> |
| 48 | + <q-btn |
| 49 | + size="sm" |
| 50 | + :color="planFrequency.value === 'weekly' ? 'primary' : 'grey'" |
| 51 | + @click="planFrequency.value = 'weekly'" |
| 52 | + label="Wöchentlich" |
| 53 | + /> |
| 54 | + </q-btn-group> |
| 55 | + <div v-if="planFrequency.value === 'once'" class="q-mt-sm"> |
| 56 | + <q-input |
| 57 | + v-model="planOnceDate.value" |
| 58 | + type="date" |
| 59 | + label="Datum" |
| 60 | + :min="new Date().toISOString().split('T')[0]" |
| 61 | + /> |
| 62 | + </div> |
| 63 | + <!-- Weekly buttons --> |
| 64 | + <div |
| 65 | + v-if="planFrequency.value === 'weekly'" |
| 66 | + class="q-mt-sm row items-center q-gutter-sm justify-center no-wrap" |
| 67 | + > |
| 68 | + <div v-for="(day, index) in weekDays" :key="day"> |
| 69 | + <q-btn |
| 70 | + round |
| 71 | + :size="$q.platform.is.mobile ? '0.8rem' : '0.7rem'" |
| 72 | + :flat="!selectedWeekDays[index]" |
| 73 | + :outline="selectedWeekDays[index]" |
| 74 | + color="primary" |
| 75 | + :label="day" |
| 76 | + :class="{ deselected: !selectedWeekDays[index] }" |
| 77 | + @click="selectDay(index)" |
| 78 | + /> |
| 79 | + </div> |
| 80 | + </div> |
| 81 | + </div> |
33 | 82 | <SliderStandard |
34 | 83 | class="q-mb-sm" |
35 | 84 | :title="planDcChargingEnabled ? 'Ladestrom (AC)' : 'Ladestrom'" |
|
48 | 97 | <div class="text-body2">kW</div> |
49 | 98 | </template> |
50 | 99 | </q-input> |
| 100 | + <div class="text-subtitle2 q-mr-sm">Anzahl Phasen Zielladen</div> |
| 101 | + <div class="row items-center justify-center q-ma-none q-pa-none no-wrap"> |
| 102 | + <q-btn-group class="col"> |
| 103 | + <q-btn |
| 104 | + v-for="option in phaseOptions" |
| 105 | + :key="option.value" |
| 106 | + :color="planNumPhases.value === option.value ? 'primary' : 'grey'" |
| 107 | + :label="option.label" |
| 108 | + size="sm" |
| 109 | + class="col" |
| 110 | + @click="planNumPhases.value = option.value" |
| 111 | + /> |
| 112 | + </q-btn-group> |
| 113 | + </div> |
| 114 | + <div class="text-subtitle2 q-mt-md q-mr-sm"> |
| 115 | + Anzahl Phasen bei PV-Überschuss |
| 116 | + </div> |
| 117 | + <div class="row items-center justify-center q-ma-none q-pa-none no-wrap"> |
| 118 | + <q-btn-group class="col"> |
| 119 | + <q-btn |
| 120 | + v-for="option in phaseOptions" |
| 121 | + :key="option.value" |
| 122 | + :color="planNumPhasesPv.value === option.value ? 'primary' : 'grey'" |
| 123 | + :label="option.label" |
| 124 | + size="sm" |
| 125 | + class="col" |
| 126 | + @click="planNumPhasesPv.value = option.value" |
| 127 | + /> |
| 128 | + </q-btn-group> |
| 129 | + </div> |
| 130 | + <div class="text-subtitle2 q-mt-sm q-mr-sm">Ziel</div> |
51 | 131 | <q-btn-group class="full-width"> |
52 | 132 | <q-btn |
53 | 133 | size="sm" |
54 | 134 | class="flex-grow" |
55 | 135 | :color="planLimitSelected.value === 'soc' ? 'primary' : 'grey'" |
56 | 136 | @click="planLimitSelected.value = 'soc'" |
57 | | - label="SoC" |
| 137 | + label="EV-SoC" |
58 | 138 | /> |
59 | 139 | <q-btn |
60 | 140 | size="sm" |
|
93 | 173 | <div class="text-body2">kWh</div> |
94 | 174 | </template> |
95 | 175 | </q-input> |
96 | | - |
97 | 176 | <div |
98 | 177 | v-if=" |
99 | 178 | planLimitSelected.value === 'soc' && |
|
120 | 199 | label="Bidirektionales Ladeleistung (kW)" |
121 | 200 | class="col" |
122 | 201 | /> |
123 | | - <div class="q-mb-md"> |
124 | | - <div class="text-subtitle2 q-mb-sm q-mt-sm">Wiederholungen</div> |
125 | | - <q-btn-group spread> |
126 | | - <q-btn |
127 | | - size="sm" |
128 | | - :color="planFrequency.value === 'once' ? 'primary' : 'grey'" |
129 | | - @click="planFrequency.value = 'once'" |
130 | | - label="Einmalig" |
131 | | - /> |
132 | | - <q-btn |
133 | | - size="sm" |
134 | | - :color="planFrequency.value === 'daily' ? 'primary' : 'grey'" |
135 | | - @click="planFrequency.value = 'daily'" |
136 | | - label="Täglich" |
137 | | - /> |
138 | | - <q-btn |
139 | | - size="sm" |
140 | | - :color="planFrequency.value === 'weekly' ? 'primary' : 'grey'" |
141 | | - @click="planFrequency.value = 'weekly'" |
142 | | - label="Wöchentlich" |
143 | | - /> |
144 | | - </q-btn-group> |
145 | | - <div v-if="planFrequency.value === 'once'" class="q-mt-sm"> |
146 | | - <q-input |
147 | | - v-model="planOnceDate.value" |
148 | | - type="date" |
149 | | - label="Datum" |
150 | | - :min="new Date().toISOString().split('T')[0]" |
151 | | - /> |
152 | | - </div> |
153 | | - <!-- Weekly buttons --> |
154 | | - <div |
155 | | - v-if="planFrequency.value === 'weekly'" |
156 | | - class="q-mt-sm row items-center q-gutter-sm justify-center no-wrap" |
157 | | - > |
158 | | - <div v-for="(day, index) in weekDays" :key="day"> |
159 | | - <q-btn |
160 | | - round |
161 | | - :size="$q.platform.is.mobile ? '0.8rem' : '0.7rem'" |
162 | | - :flat="!selectedWeekDays[index]" |
163 | | - :outline="selectedWeekDays[index]" |
164 | | - color="primary" |
165 | | - :label="day" |
166 | | - :class="{ deselected: !selectedWeekDays[index] }" |
167 | | - @click="selectDay(index)" |
168 | | - /> |
169 | | - </div> |
170 | | - </div> |
171 | | - </div> |
172 | 202 | <div class="row items-center justify-between"> |
173 | 203 | <div class="text-subtitle2 q-mr-sm">Strompreisbasiert laden</div> |
174 | 204 | <ToggleStandard |
|
177 | 207 | color="positive" |
178 | 208 | /> |
179 | 209 | </div> |
180 | | - <div class="text-subtitle2 q-mt-sm q-mr-sm">Anzahl Phasen Zielladen</div> |
181 | | - <div class="row items-center justify-center q-ma-none q-pa-none no-wrap"> |
182 | | - <q-btn-group class="col"> |
183 | | - <q-btn |
184 | | - v-for="option in phaseOptions" |
185 | | - :key="option.value" |
186 | | - :color="planNumPhases.value === option.value ? 'primary' : 'grey'" |
187 | | - :label="option.label" |
188 | | - size="sm" |
189 | | - class="col" |
190 | | - @click="planNumPhases.value = option.value" |
191 | | - /> |
192 | | - </q-btn-group> |
193 | | - </div> |
194 | | - <div class="text-subtitle2 q-mt-md q-mr-sm"> |
195 | | - Anzahl Phasen bei PV-Überschuss |
196 | | - </div> |
197 | | - <div class="row items-center justify-center q-ma-none q-pa-none no-wrap"> |
198 | | - <q-btn-group class="col"> |
199 | | - <q-btn |
200 | | - v-for="option in phaseOptions" |
201 | | - :key="option.value" |
202 | | - :color="planNumPhasesPv.value === option.value ? 'primary' : 'grey'" |
203 | | - :label="option.label" |
204 | | - size="sm" |
205 | | - class="col" |
206 | | - @click="planNumPhasesPv.value = option.value" |
207 | | - /> |
208 | | - </q-btn-group> |
209 | | - </div> |
210 | | - <div class="row q-mt-lg"> |
| 210 | + <div class="row q-mt-md"> |
211 | 211 | <q-btn |
212 | 212 | size="sm" |
213 | 213 | class="col" |
|
0 commit comments