Skip to content
This repository has been archived by the owner on Feb 1, 2021. It is now read-only.

Commit

Permalink
Merge pull request #16 from Software-On-The-Road/improve-metadata-field
Browse files Browse the repository at this point in the history
Add prism.js to improve metadata syntax highlight
Fixes #14 
Fixes #15
  • Loading branch information
santiq authored May 23, 2020
2 parents c0eb98c + babc1a0 commit 9ca9932
Show file tree
Hide file tree
Showing 5 changed files with 28 additions and 15 deletions.
4 changes: 4 additions & 0 deletions public/app/css/styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -116,3 +116,7 @@ code {
font-size: 13px;
margin: 0 2px;
}

.json-editor {
height: 150px;
}
20 changes: 13 additions & 7 deletions public/app/js/jobdetail.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
const jobDetail = Vue.component('job-detail', {
props: ['job'],
filters: {
formatJSON(jsonstr){
return JSON.stringify(jsonstr, null, 2);
},
},
methods: {
formatDate(date){
return moment(date).format('DD-MM-YYYY HH:mm:ss')
Expand All @@ -23,15 +28,16 @@ const jobDetail = Vue.component('job-detail', {
<p><strong>Last run started: </strong>{{ formatDate(job.job.lastRunAt) }}</p>
</div>
</div>
<code> {{job.job.data}}</code>
<div v-if='job.failed' class="row mt-3">
<div class="col pt-3 bg-danger text-light">
<p><strong>Fail Count:</strong> {{job.job.failCount}}</p>
<p><strong>Failed At:</strong> {{formatDate(job.job.failedAt)}}</p>
<p><strong>Reason:</strong> {{job.job.failReason}}</p>
</div>
<p><strong>Metadata: </strong></p>
<prism-editor class="json-editor" :lineNumbers="true" :readonly="true" :code="job.job.data | formatJSON" language="json"></prism-editor>
<div v-if='job.failed' class="row mt-3">
<div class="col pt-3 bg-danger text-light">
<p><strong>Fail Count:</strong> {{job.job.failCount}}</p>
<p><strong>Failed At:</strong> {{formatDate(job.job.failedAt)}}</p>
<p><strong>Reason:</strong> {{job.job.failReason}}</p>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
Expand Down
2 changes: 1 addition & 1 deletion public/app/js/joblist.js
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,7 @@ const jobList = Vue.component('job-list', {
</tbody>
</table>
<div class="row ">
<div class="row">
<div class="col d-flex justify-content-center">
<nav aria-label="Page navigation example">
<ul class="pagination">
Expand Down
13 changes: 6 additions & 7 deletions public/app/js/newJob.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ const newJob = Vue.component('new-job', {
jobName: '',
jobSchedule: '',
jobRepeatEvery: '',
jobData: '',
jobData: `{ "name": "Your medatada goes here..." }`,
}),
props: ['job'],
methods: {
Expand All @@ -13,13 +13,13 @@ const newJob = Vue.component('new-job', {
this.jobRepeatEvery = '',
this.jobData = ''
},
CreateOne(){
create(){
const url = `api/jobs/create`;
let body = {
jobName: this.jobName,
jobSchedule: this.jobSchedule,
jobRepeatEvery: this.jobRepeatEvery,
jobData: this.jobData,
jobData: JSON.parse(this.jobData),
};
return axios.post(url, body)
.then(result => result.data)
Expand Down Expand Up @@ -60,14 +60,13 @@ const newJob = Vue.component('new-job', {
<small id="jobRepeatEvery" class="form-text text-muted">Receibe Number/Every Unit E.g. 1 months or 3 hours</small>
</div>
<div class="form-group">
<label for="jobData">Job Data</label>
<textarea v-model="jobData" type="text" placeholder="{...data}" class="form-control" id="jobData" aria-describedby="jobData"></textarea>
<small id="jobData" class="form-text text-muted">Json data for the job.</small>
<label for="jobData">Job Metadata</label>
<prism-editor class="json-editor" :lineNumbers="true" v-model="jobData" language="json"></prism-editor>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-info" data-dismiss="modal" @click="CreateOne()">Create Job</button>
<button type="button" class="btn btn-info" data-dismiss="modal" @click="create()">Create Job</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
</div>
</div>
Expand Down
4 changes: 4 additions & 0 deletions public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,15 @@
<link href="https://fonts.googleapis.com/css2?family=Days+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/themes/prism.css" rel="stylesheet" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/VuePrismEditor.css">
<link href="app/css/styles.css" rel="stylesheet">
</head>
<body>
<div id="agendash-v2-root">
<app></app>
</div>
<script src="https://cdn.jsdelivr.net/combine/npm/[email protected],npm/[email protected],npm/[email protected]/plugins/autoloader/prism-autoloader.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/moment.min.js"></script>
Expand All @@ -45,6 +48,7 @@
<script src="app/js/topbar.js"></script>
<script src="app/js/main.js"></script>
<script>
Vue.component('prism-editor', VuePrismEditor)
new Vue({ el: '#agendash-v2-root' })
</script>
</body>
Expand Down

0 comments on commit 9ca9932

Please sign in to comment.