1+ < div class ="modal-header ">
2+ < h5 class ="modal-title "> Configuration Backup Settings</ h5 >
3+ < button type ="button " class ="btn-close " data-bs-dismiss ="modal "> </ button >
4+ </ div >
5+
6+ < form method ="post "
7+ hx-post ="{% url 'config_backup_save' %} "
8+ hx-target ="#configBackupModal .modal-content "
9+ hx-swap ="outerHTML ">
10+ {% csrf_token %}
11+ < div class ="modal-body ">
12+
13+ < div class ="form-check form-switch mb-3 ">
14+ < input class ="form-check-input " type ="checkbox " name ="enabled " id ="id_enabled "
15+ {% if cfg.enabled %}checked{% endif %} >
16+ < label class ="form-check-label " for ="id_enabled "> Enable Config Backups</ label >
17+ </ div >
18+
19+ < div class ="row g-2 ">
20+ < div class ="col-md-6 ">
21+ < label class ="form-label "> Frequency</ label >
22+ < select name ="frequency " class ="form-select " id ="id_frequency ">
23+ < option value ="daily " {% if cfg.frequency == 'daily ' %}selected{% endif %} > Daily</ option >
24+ < option value ="weekly " {% if cfg.frequency == 'weekly ' %}selected{% endif %} > Weekly</ option >
25+ </ select >
26+ </ div >
27+
28+ < div class ="col-md-6 ">
29+ < label class ="form-label "> Time of Day</ label >
30+ < input type ="time " name ="time_of_day " class ="form-control "
31+ value ="{{ cfg.time_of_day|time:'H:i' }} ">
32+ </ div >
33+ </ div >
34+
35+ < div class ="mt-3 ">
36+ < label class ="form-label "> Day of Week (for weekly)</ label >
37+ < select name ="day_of_week " class ="form-select ">
38+ {% for value, label in form.fields.day_of_week.choices %}
39+ < option value ="{{ value }} " {% if form.instance.day_of_week == value %}selected{% endif %} > {{ label }}</ option >
40+ {% endfor %}
41+ </ select >
42+ </ div >
43+
44+ < hr >
45+
46+ < div class ="mb-3 ">
47+ < div class ="form-check form-switch ">
48+ < input class ="form-check-input " type ="checkbox " name ="email_alerts " id ="id_email_alerts "
49+ {% if cfg.email_alerts %}checked{% endif %} >
50+ < label class ="form-check-label " for ="id_email_alerts "> Email Alerts</ label >
51+ </ div >
52+ < input type ="email " class ="form-control mt-2 " name ="alert_email "
53+ value ="{{ cfg.alert_email|default_if_none:'' }} " placeholder ="Email address for alerts ">
54+ </ div >
55+
56+ < hr >
57+
58+ <!-- Multi-select for devices -->
59+ < label class ="form-label "> Devices to Include</ label >
60+ < select name ="devices " multiple class ="form-select " size ="8 ">
61+ {% for device in devices %}
62+ < option value ="{{ device.pk }} " {% if device in cfg.devices.all %}selected{% endif %} >
63+ {{ device.name }}
64+ </ option >
65+ {% endfor %}
66+ </ select >
67+
68+ </ div >
69+
70+ < div class ="modal-footer ">
71+ < button type ="button " class ="btn btn-secondary " data-bs-dismiss ="modal "> Cancel</ button >
72+ < button type ="submit " class ="btn btn-primary "> Save</ button >
73+ </ div >
74+ </ form >
75+
76+ < script >
77+ document . body . addEventListener ( "htmx:afterSwap" , ( evt ) => {
78+ // Only re-run when the config modal was swapped
79+ if ( evt . detail . target . id === "configBackupModal" || evt . detail . target . closest ( "#configBackupModal" ) ) {
80+ const chk = document . querySelector ( '#configBackupModal input[name="email_alerts"]' ) ;
81+ const emailField = document . querySelector ( '#configBackupModal input[name="alert_email"]' ) ;
82+ const freqSelect = document . querySelector ( '#configBackupModal select[name="frequency"]' ) ;
83+ const daySelect = document . querySelector ( '#configBackupModal select[name="day_of_week"]' ) ;
84+
85+ function toggleEmailField ( ) {
86+ if ( ! chk || ! emailField ) return ;
87+ if ( chk . checked ) {
88+ emailField . disabled = false ;
89+ emailField . placeholder = "admin@example.com" ;
90+ } else {
91+ emailField . value = "" ;
92+ emailField . disabled = true ;
93+ emailField . placeholder = "(disabled)" ;
94+ }
95+ }
96+
97+ function toggleDaySelect ( ) {
98+ if ( ! freqSelect || ! daySelect ) return ;
99+ const isWeekly = freqSelect . value === "weekly" ;
100+ daySelect . disabled = ! isWeekly ;
101+ if ( ! isWeekly ) daySelect . value = "" ;
102+ }
103+
104+ toggleEmailField ( ) ;
105+ toggleDaySelect ( ) ;
106+ if ( chk ) chk . addEventListener ( "change" , toggleEmailField ) ;
107+ if ( freqSelect ) freqSelect . addEventListener ( "change" , toggleDaySelect ) ;
108+ }
109+ } ) ;
110+ </ script >
0 commit comments