forked from platypush/platypush
CronEditor
should contain the raw cron expression and a copy button.
This commit is contained in:
parent
00694f4e10
commit
6e7c5def2f
1 changed files with 32 additions and 9 deletions
|
@ -13,18 +13,28 @@
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="cron-description">
|
<div class="cron-description-container">
|
||||||
<div class="error" v-if="error" v-text="error" />
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import cronstrue from 'cronstrue'
|
import cronstrue from 'cronstrue'
|
||||||
|
import CopyButton from "@/components/elements/CopyButton"
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
emits: ['input'],
|
emits: ['input'],
|
||||||
|
components: {
|
||||||
|
CopyButton,
|
||||||
|
},
|
||||||
props: {
|
props: {
|
||||||
value: {
|
value: {
|
||||||
type: String,
|
type: String,
|
||||||
|
@ -38,6 +48,7 @@ export default {
|
||||||
cronDescription: null,
|
cronDescription: null,
|
||||||
error: null,
|
error: null,
|
||||||
selectedItem: null,
|
selectedItem: null,
|
||||||
|
cronRegex: new RegExp('^[0-9*/,-]*$'),
|
||||||
labels: [
|
labels: [
|
||||||
'Minute',
|
'Minute',
|
||||||
'Hour',
|
'Hour',
|
||||||
|
@ -59,7 +70,7 @@ export default {
|
||||||
handler(newValue, oldValue) {
|
handler(newValue, oldValue) {
|
||||||
newValue.forEach((v, i) => {
|
newValue.forEach((v, i) => {
|
||||||
v = v.trim()
|
v = v.trim()
|
||||||
if (!v.match(/^[0-9\*\/\-,]*$/)) {
|
if (!v.match(this.cronRegex)) {
|
||||||
this.cronExpr[i] = oldValue[i]
|
this.cronExpr[i] = oldValue[i]
|
||||||
} else {
|
} else {
|
||||||
this.cronExpr[i] = v
|
this.cronExpr[i] = v
|
||||||
|
@ -94,7 +105,7 @@ export default {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
if (key.match(/^[0-9\*\/\-,]$/)) {
|
if (key.match(this.cronRegex)) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -160,17 +171,29 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.cron-description {
|
.cron-description-container {
|
||||||
margin-top: 0.5em;
|
margin-top: 0.5em;
|
||||||
padding: 0.25em;
|
padding: 0.5em;
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
background: $code-light-bg;
|
background: $code-dark-bg;
|
||||||
color: $default-fg-2;
|
color: $code-dark-fg;
|
||||||
border-radius: 1em;
|
border-radius: 1em;
|
||||||
border: $default-border-3;
|
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-weight: normal;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue