revil-O/platypush
1
0
Fork 0
forked from platypush/platypush
Code Pull requests Activity

CronEditor should contain the raw cron expression and a copy button.

Browse source
This commit is contained in:
Fabio Manganiello 2023-12-11 22:18:57 +01:00
parent 00694f4e10
commit 6e7c5def2f
Signed by untrusted user: blacklight
GPG key ID: D90FBA7F76362774
1 changed files with 32 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
platypush/backend/http/webapp/src/components/elements/CronEditor.vue
View file

@ -13,18 +13,28 @@
</label>
</div>
<div class="cron-description">
<div class="cron-description-container">
<div class="error" v-if="error" v-text="error" />
<div v-else>Runs: <span v-text="cronDescription" /></div>
<div class="cron-description" v-else>
<CopyButton :text="cronString" />
<div class="cron-string" v-text="cronString" />
<div class="cron-next-run" v-if="!error">
Runs: <span class="cron-text" v-text="cronDescription" />
</div>
</div>
</div>
</div>
</template>
<script>
import cronstrue from 'cronstrue'
import CopyButton from "@/components/elements/CopyButton"
export default {
emits: ['input'],
components: {
CopyButton,
},
props: {
value: {
type: String,
@ -38,6 +48,7 @@ export default {
cronDescription: null,
error: null,
selectedItem: null,
cronRegex: new RegExp('^[0-9*/,-]*$'),
labels: [
'Minute',
'Hour',
@ -59,7 +70,7 @@ export default {
handler(newValue, oldValue) {
newValue.forEach((v, i) => {
v = v.trim()
if (!v.match(/^[0-9\*\/\-,]*$/)) {
if (!v.match(this.cronRegex)) {
this.cronExpr[i] = oldValue[i]
} else {
this.cronExpr[i] = v
@ -94,7 +105,7 @@ export default {
return
}
if (key.match(/^[0-9\*\/\-,]$/)) {
if (key.match(this.cronRegex)) {
return
}
@ -160,17 +171,29 @@ export default {
}
}
.cron-description {
.cron-description-container {
margin-top: 0.5em;
padding: 0.25em;
padding: 0.5em;
font-size: 0.9em;
font-weight: bold;
background: $code-light-bg;
color: $default-fg-2;
background: $code-dark-bg;
color: $code-dark-fg;
border-radius: 1em;
border: $default-border-3;
span {
.cron-description {
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
}
.cron-string {
font-family: monospace;
font-size: 1.1em;
}
.cron-text {
font-weight: normal;
font-style: italic;
}