Lines 106-118
Link Here
|
106 |
<label for="overdue_delay" |
106 |
<label for="overdue_delay" |
107 |
>{{ $__("Delay") }}: |
107 |
>{{ $__("Delay") }}: |
108 |
</label> |
108 |
</label> |
109 |
<input |
109 |
<div class="numeric-input-wrapper"> |
110 |
id="overdue_delay" |
110 |
<div class="input-with-clear"> |
111 |
v-model="newRule.delay" |
111 |
<input |
112 |
type="number" |
112 |
id="overdue_delay" |
113 |
:placeholder="fallbackRule.delay" |
113 |
v-model="newRule.delay" |
114 |
:min="minDelay" |
114 |
type="number" |
115 |
/> |
115 |
:placeholder="fallbackRule.delay" |
|
|
116 |
:min="minDelay" |
117 |
:max="maxDelay" |
118 |
class="numeric-input" |
119 |
/> |
120 |
<button |
121 |
v-if=" |
122 |
newRule.delay !== null && |
123 |
newRule.delay !== undefined |
124 |
" |
125 |
type="button" |
126 |
class="clear-btn" |
127 |
@click="newRule.delay = null" |
128 |
> |
129 |
<svg |
130 |
xmlns="http://www.w3.org/2000/svg" |
131 |
width="10" |
132 |
height="10" |
133 |
> |
134 |
<path |
135 |
d="M6.895455 5l2.842897-2.842898c.348864-.348863.348864-.914488 0-1.263636L9.106534.261648c-.348864-.348864-.914489-.348864-1.263636 0L5 3.104545 2.157102.261648c-.348863-.348864-.914488-.348864-1.263636 0L.261648.893466c-.348864.348864-.348864.914489 0 1.263636L3.104545 5 .261648 7.842898c-.348864.348863-.348864.914488 0 1.263636l.631818.631818c.348864.348864.914773.348864 1.263636 0L5 6.895455l2.842898 2.842897c.348863.348864.914772.348864 1.263636 0l.631818-.631818c.348864-.348864.348864-.914489 0-1.263636L6.895455 5z" |
136 |
></path> |
137 |
</svg> |
138 |
</button> |
139 |
<div class="chevron-buttons"> |
140 |
<button |
141 |
type="button" |
142 |
class="increment-btn" |
143 |
@click="incrementDelay" |
144 |
> |
145 |
▴ |
146 |
</button> |
147 |
<button |
148 |
type="button" |
149 |
class="decrement-btn" |
150 |
@click="decrementDelay" |
151 |
> |
152 |
▾ |
153 |
</button> |
154 |
</div> |
155 |
</div> |
156 |
</div> |
116 |
</li> |
157 |
</li> |
117 |
<li> |
158 |
<li> |
118 |
<label for="letter_code" |
159 |
<label for="letter_code" |
Lines 131-141
Link Here
|
131 |
v-bind="attributes" |
172 |
v-bind="attributes" |
132 |
v-on="events" |
173 |
v-on="events" |
133 |
:placeholder=" |
174 |
:placeholder=" |
134 |
letters.find( |
175 |
newRule.notice === null || |
135 |
letter => |
176 |
newRule.notice === undefined |
136 |
letter.code === |
177 |
? letters.find( |
137 |
fallbackRule.notice |
178 |
letter => |
138 |
)?.name || fallbackRule.notice |
179 |
letter.code === |
|
|
180 |
fallbackRule.notice |
181 |
)?.name || fallbackRule.notice |
182 |
: '' |
139 |
" |
183 |
" |
140 |
/> |
184 |
/> |
141 |
</template> |
185 |
</template> |
Lines 293-298
export default {
Link Here
|
293 |
editMode: false, |
337 |
editMode: false, |
294 |
ruleBeingEdited: null, |
338 |
ruleBeingEdited: null, |
295 |
triggerBeingEdited: null, |
339 |
triggerBeingEdited: null, |
|
|
340 |
minDelay: 0, |
341 |
maxDelay: Infinity, |
296 |
}; |
342 |
}; |
297 |
}, |
343 |
}, |
298 |
beforeRouteEnter(to, from, next) { |
344 |
beforeRouteEnter(to, from, next) { |
Lines 311-326
export default {
Link Here
|
311 |
); |
357 |
); |
312 |
}); |
358 |
}); |
313 |
}, |
359 |
}, |
314 |
computed: { |
|
|
315 |
minDelay() { |
316 |
const lastRule = this.circRules[this.newTriggerNumber - 2]; |
317 |
return lastRule |
318 |
? parseInt( |
319 |
lastRule[`overdue_${this.newTriggerNumber - 1}_delay`] |
320 |
) + 1 |
321 |
: 0; |
322 |
}, |
323 |
}, |
324 |
methods: { |
360 |
methods: { |
325 |
async addCircRule(e) { |
361 |
async addCircRule(e) { |
326 |
e.preventDefault(); |
362 |
e.preventDefault(); |
Lines 468-473
export default {
Link Here
|
468 |
lengthunit: rules[0].lengthunit, |
504 |
lengthunit: rules[0].lengthunit, |
469 |
numberOfTriggers: numberOfTriggers, |
505 |
numberOfTriggers: numberOfTriggers, |
470 |
}; |
506 |
}; |
|
|
507 |
|
508 |
this.setMinDelay(); |
509 |
this.setMaxDelay(); |
471 |
}, |
510 |
}, |
472 |
error => {} |
511 |
error => {} |
473 |
); |
512 |
); |
Lines 627-632
export default {
Link Here
|
627 |
), |
666 |
), |
628 |
}; |
667 |
}; |
629 |
}, |
668 |
}, |
|
|
669 |
setMinDelay() { |
670 |
const priorTriggerNumber = parseInt(this.newTriggerNumber) - 1; |
671 |
this.minDelay = this.ruleBeingEdited[ |
672 |
`overdue_${priorTriggerNumber}_delay` |
673 |
] |
674 |
? parseInt( |
675 |
this.ruleBeingEdited[ |
676 |
`overdue_${priorTriggerNumber}_delay` |
677 |
] |
678 |
) + 1 |
679 |
: 0; |
680 |
}, |
681 |
setMaxDelay() { |
682 |
const nextTriggerNumber = parseInt(this.newTriggerNumber) + 1; |
683 |
this.maxDelay = this.ruleBeingEdited[ |
684 |
`overdue_${nextTriggerNumber}_delay` |
685 |
] |
686 |
? parseInt( |
687 |
this.ruleBeingEdited[`overdue_${nextTriggerNumber}_delay`] |
688 |
) - 1 |
689 |
: Infinity; |
690 |
}, |
691 |
incrementDelay() { |
692 |
// Check for minDelay and maxDelay |
693 |
const min = this.minDelay !== undefined ? this.minDelay : 1; |
694 |
const max = this.maxDelay !== undefined ? this.maxDelay : Infinity; |
695 |
|
696 |
// Set to minDelay if it's null or undefined |
697 |
if ( |
698 |
this.newRule.delay === undefined || |
699 |
this.newRule.delay === null |
700 |
) { |
701 |
this.newRule.delay = min; |
702 |
} |
703 |
|
704 |
// Increment within the valid range |
705 |
else { |
706 |
this.newRule["delay"] = Math.min(this.newRule.delay + 1, max); |
707 |
} |
708 |
}, |
709 |
decrementDelay() { |
710 |
// Check for minDelay |
711 |
const min = this.minDelay !== undefined ? this.minDelay : 1; |
712 |
|
713 |
// Decrement only if greater than minDelay |
714 |
if (this.newRule.delay > min) { |
715 |
this.newRule.delay--; |
716 |
} |
717 |
}, |
630 |
}, |
718 |
}, |
631 |
watch: { |
719 |
watch: { |
632 |
$route: { |
720 |
$route: { |
Lines 659-664
form li {
Link Here
|
659 |
align-items: center; |
747 |
align-items: center; |
660 |
} |
748 |
} |
661 |
|
749 |
|
|
|
750 |
.numeric-input-wrapper { |
751 |
position: relative; |
752 |
display: inline-block; |
753 |
width: 30%; |
754 |
} |
755 |
|
756 |
.input-with-clear { |
757 |
position: relative; |
758 |
display: flex; |
759 |
align-items: center; |
760 |
width: 100%; |
761 |
} |
762 |
|
763 |
.numeric-input { |
764 |
padding-right: 40px; /* Adjust to leave space for clear button */ |
765 |
padding-left: 0.25em; |
766 |
padding-top: 2px; |
767 |
padding-bottom: 2px; |
768 |
width: 100%; |
769 |
border-radius: 4px; |
770 |
border: 1px solid #ccc; |
771 |
font-size: 16px; |
772 |
box-sizing: border-box; |
773 |
transition: border-color 0.2s ease; |
774 |
} |
775 |
|
776 |
.clear-btn { |
777 |
position: absolute; |
778 |
right: 22px; /* Adjust positioning */ |
779 |
fill: var(--vs-controls-color); |
780 |
background-color: transparent; |
781 |
border: 0; |
782 |
font-size: 1.2em; |
783 |
color: #333; |
784 |
cursor: pointer; |
785 |
z-index: 2; /* Ensure it is above the input */ |
786 |
} |
787 |
|
788 |
.button:active:hover, |
789 |
.clear-btn:active:hover { |
790 |
background-color: #d4d4d4; |
791 |
border-color: #8c8c8c; |
792 |
} |
793 |
|
794 |
/* Chevron buttons container */ |
795 |
.chevron-buttons { |
796 |
display: flex; |
797 |
flex-direction: column; |
798 |
position: absolute; |
799 |
right: 0px; |
800 |
top: 0; |
801 |
bottom: 0; |
802 |
width: 16px; |
803 |
padding: 0px 5px 0px 2px; |
804 |
justify-content: center; |
805 |
z-index: 2; |
806 |
} |
807 |
|
808 |
/* Chevron button styles */ |
809 |
.increment-btn, |
810 |
.decrement-btn { |
811 |
background-color: transparent; |
812 |
border: 0px solid #ccc; |
813 |
font-size: 10px; |
814 |
padding: 0px; |
815 |
cursor: pointer; |
816 |
color: rgba(60, 60, 60, 0.5); |
817 |
border-radius: 2px; |
818 |
} |
819 |
|
820 |
.increment-btn:hover, |
821 |
.decrement-btn:hover { |
822 |
background-color: #ddd; |
823 |
} |
824 |
|
825 |
/* Hide the native increment/decrement buttons */ |
826 |
input[type="number"]::-webkit-inner-spin-button, |
827 |
input[type="number"]::-webkit-outer-spin-button { |
828 |
-webkit-appearance: none; |
829 |
margin: 0; |
830 |
} |
831 |
|
832 |
input[type="number"] { |
833 |
-moz-appearance: textfield; /* For Firefox */ |
834 |
} |
835 |
|
836 |
.numeric-input:focus, |
837 |
.numeric-input:hover { |
838 |
border-color: #007bff; /* Match focus color of v-select */ |
839 |
outline: none; |
840 |
} |
841 |
|
662 |
.dialog.alert |
842 |
.dialog.alert |
663 |
fieldset:not(.bg-danger):not(.bg-warning):not(.bg-info):not( |
843 |
fieldset:not(.bg-danger):not(.bg-warning):not(.bg-info):not( |
664 |
.bg-success |
844 |
.bg-success |