Skip to content

Commit 65f6365

Browse files
AchoArnoldAchoArnold
committed
Finish send schedule
1 parent 7ed5909 commit 65f6365

1 file changed

Lines changed: 95 additions & 78 deletions

File tree

‎web/pages/settings/index.vue‎

Lines changed: 95 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -904,14 +904,17 @@
904904
<v-dialog
905905
v-model="showScheduleEdit"
906906
overlay-opacity="0.9"
907-
max-width="700px"
907+
max-width="800px"
908908
>
909909
<v-card>
910910
<v-card-title>
911911
<span v-if="!activeSchedule.id">Create Message Send Schedule</span>
912912
<span v-else>Edit Message Send Schedule</span>
913913
</v-card-title>
914-
<v-card-text class="mt-4">
914+
<v-card-text
915+
class="mt-4"
916+
:class="{ 'px-2': $vuetify.breakpoint.mdAndDown }"
917+
>
915918
<v-row>
916919
<v-col cols="12" md="6">
917920
<v-text-field
@@ -932,91 +935,105 @@
932935
outlined
933936
:items="timezones"
934937
label="Timezone"
938+
:class="{ 'mt-n6 mb-0': $vuetify.breakpoint.mdAndDown }"
935939
:error="errorMessages.has('timezone')"
936940
:error-messages="errorMessages.get('timezone')"
937941
/>
938942
</v-col>
939943
</v-row>
940-
<v-card outlined>
941-
<v-card-text>
942-
<table>
943-
<tbody>
944-
<tr v-for="day in weekDays" :key="day.value">
945-
<td style="vertical-align: top" class="pt-2 pr-4">
946-
<v-switch
947-
:input-value="scheduleDayEnabled(day.value)"
948-
inset
944+
<v-card
945+
:outlined="!$vuetify.breakpoint.mdAndDown"
946+
elevation="0"
947+
class="px-0"
948+
>
949+
<v-card-text
950+
:class="{
951+
'px-2 mt-n8': $vuetify.breakpoint.mdAndDown,
952+
'px-4': !$vuetify.breakpoint.mdAndDown,
953+
}"
954+
>
955+
<div
956+
v-for="day in weekDays"
957+
:key="day.value"
958+
:class="[
959+
$vuetify.breakpoint.smAndUp ? 'd-flex align-start' : '',
960+
'mb-4',
961+
]"
962+
>
963+
<div
964+
:class="[$vuetify.breakpoint.smAndUp ? 'pr-4' : '', 'pt-2']"
965+
:style="$vuetify.breakpoint.smAndUp ? 'min-width: 160px' : ''"
966+
>
967+
<v-switch
968+
:input-value="scheduleDayEnabled(day.value)"
969+
inset
970+
dense
971+
:label="day.label"
972+
class="mt-0 pt-0 text--primary"
973+
@change="scheduleToggleDay(day.value, $event)"
974+
/>
975+
</div>
976+
<div class="pt-2 flex-grow-1">
977+
<div
978+
v-for="(window, index) in scheduleWindowsForDay(day.value)"
979+
:key="`${day.value}-${index}`"
980+
class="d-flex align-center flex-wrap mb-2"
981+
>
982+
<div
983+
class="mr-2 mb-2"
984+
style="width: 110px; max-width: 100%"
985+
>
986+
<v-text-field
987+
v-model="window.start_time"
949988
dense
950-
:label="day.label"
951-
class="mt-0 pt-0 text--primary"
952-
@change="scheduleToggleDay(day.value, $event)"
989+
outlined
990+
:error="scheduleWindowError(day.value)"
991+
type="time"
992+
label="Start"
993+
hide-details="auto"
953994
/>
954-
</td>
955-
<td class="pt-2">
956-
<div
957-
v-for="(window, index) in scheduleWindowsForDay(
958-
day.value,
959-
)"
960-
:key="`${day.value}-${index}`"
961-
class="d-flex align-center flex-wrap mb-2"
995+
</div>
996+
<div class="mb-2 mr-2">–</div>
997+
<div
998+
class="mr-2 mb-2"
999+
style="width: 110px; max-width: 100%"
1000+
>
1001+
<v-text-field
1002+
v-model="window.end_time"
1003+
dense
1004+
outlined
1005+
:error="scheduleWindowError(day.value)"
1006+
type="time"
1007+
label="End"
1008+
hide-details="auto"
1009+
/>
1010+
</div>
1011+
<div class="mb-2">
1012+
<v-btn
1013+
v-if="index == 0"
1014+
icon
1015+
color="primary"
1016+
@click="scheduleAddWindow(day.value)"
9621017
>
963-
<div
964-
class="mr-2 mb-2"
965-
style="width: 150px; max-width: 100%"
966-
>
967-
<v-text-field
968-
v-model="window.start_time"
969-
dense
970-
outlined
971-
:error="scheduleWindowError(day.value)"
972-
type="time"
973-
label="Start"
974-
hide-details="auto"
975-
/>
976-
</div>
977-
<div class="mb-2 mr-2">–</div>
978-
<div
979-
class="mr-2 mb-2"
980-
style="width: 150px; max-width: 100%"
981-
>
982-
<v-text-field
983-
v-model="window.end_time"
984-
dense
985-
outlined
986-
:error="scheduleWindowError(day.value)"
987-
type="time"
988-
label="End"
989-
hide-details="auto"
990-
/>
991-
</div>
992-
<div class="mb-2">
993-
<v-btn
994-
v-if="index == 0"
995-
icon
996-
color="primary"
997-
@click="scheduleAddWindow(day.value)"
998-
>
999-
<v-icon>{{ mdiPlus }}</v-icon>
1000-
</v-btn>
1001-
<v-btn
1002-
icon
1003-
color="error"
1004-
@click="scheduleRemoveWindow(day.value, index)"
1005-
>
1006-
<v-icon>{{ mdiDelete }}</v-icon>
1007-
</v-btn>
1008-
</div>
1009-
</div>
1010-
<div
1011-
v-if="scheduleWindowError(day.value)"
1012-
class="w-full error--text mt-n2 mb-4"
1018+
<v-icon>{{ mdiPlus }}</v-icon>
1019+
</v-btn>
1020+
<v-btn
1021+
icon
1022+
color="error"
1023+
@click="scheduleRemoveWindow(day.value, index)"
10131024
>
1014-
{{ scheduleWindowError(day.value) }}
1015-
</div>
1016-
</td>
1017-
</tr>
1018-
</tbody>
1019-
</table>
1025+
<v-icon>{{ mdiDelete }}</v-icon>
1026+
</v-btn>
1027+
</div>
1028+
</div>
1029+
<div
1030+
v-if="scheduleWindowError(day.value)"
1031+
class="w-full error--text mt-n2 mb-4"
1032+
>
1033+
{{ scheduleWindowError(day.value) }}
1034+
</div>
1035+
</div>
1036+
</div>
10201037
</v-card-text>
10211038
</v-card>
10221039
</v-card-text>

0 commit comments

Comments
 (0)