agendash 3.1.0 → 6.0.0

package/public/app/js/confirmRequeue.js

@@ -1,40 +0,0 @@
-const confirmRequeue = Vue.component("confirm-requeue", {
-  props: ["job"],
-  methods: {
-    RequeueOne(id) {
-      const url = `api/jobs/requeue`;
-      let body = { jobIds: [id] };
-      return axios
-        .post(url, body)
-        .then((result) => result.data)
-        .then((data) => {
-          this.$emit("popup-message");
-          this.$emit("refresh-data");
-        })
-        .catch(console.log);
-    },
-  },
-  template: `
-  <div class="modal fade" id="modalRequeueSure" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
-      <!-- Modal -->
-    <div class="modal-dialog" role="document">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h5 class="modal-title" id="exampleModalLabel">Confirm requeue job</h5>
-          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-            <span aria-hidden="true">&times;</span>
-          </button>
-        </div>
-        <div class="modal-body">
-          <p>ID: {{job.job._id}}</p>
-          <p>Name: {{job.job.name}}</p>
-        </div>
-        <div class="modal-footer">
-          <button type="button" class="btn btn-info" data-dismiss="modal" @click="RequeueOne(job.job._id)">Requeue Job</button>
-          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
-        </div>
-      </div>
-    </div>
-  </div>
-  `,
-});

package/public/app/js/confirmRequeueMulti.js

@@ -1,45 +0,0 @@
-const confirmRequeueMulti = Vue.component("confirm-multi-requeue", {
-  props: ["jobs"],
-  methods: {
-    RequeueMulti(ids) {
-      const url = `api/jobs/requeue`;
-      let body = { jobIds: ids };
-      return axios
-        .post(url, body)
-        .then((result) => result.data)
-        .then((data) => {
-          this.$emit("popup-message");
-          this.$emit("refresh-data");
-          this.$emit("ready-clean");
-        })
-        .catch(console.log);
-    },
-  },
-  template: `
-  <div class="modal fade" id="modalRequeueSureMulti" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
-      <!-- Modal -->
-      <h1>MULTI</h1>
-    <div class="modal-dialog" role="document">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h5 class="modal-title" id="exampleModalLabel">Confirm requeue job</h5>
-          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-            <span aria-hidden="true">&times;</span>
-          </button>
-        </div>
-        <div class="modal-body">
-          <div class="row px-3" v-for="job in jobs">
-            <div class="col">
-              <p>Job Id: {{job}}</p>
-            </div>
-          </div>
-        </div>
-        <div class="modal-footer">
-          <button type="button" class="btn btn-info" data-dismiss="modal" @click="RequeueMulti(jobs)">Requeue Job</button>
-          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
-        </div>
-      </div>
-    </div>
-  </div>
-  `,
-});

package/public/app/js/confirms.js

@@ -1,8 +0,0 @@
-const popupmessage = Vue.component("popup-message", {
-  props: ["job", "deletec", "requeuec", "createc"],
-  template: `
-   <div v-if="deletec" class="alert alert-success popupmessage">Job Deleted successfull</div>
-   <div v-else-if="requeuec" class="alert alert-success popupmessage">Job Requeue successfull</div>
-   <div v-else-if="createc" class="alert alert-success popupmessage">Job Created successfull</div>
-  `,
-});

package/public/app/js/jobdetail.js

@@ -1,48 +0,0 @@
-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");
-    },
-  },
-  template: `
-  <div class="modal fade" id="modalData" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
-      <!-- Modal -->
-    <div class="modal-dialog" role="document">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h5 class="modal-title" id="exampleModalLabel">Job Data - {{job.job.name}}</h5>
-          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-            <span aria-hidden="true">&times;</span>
-          </button>
-        </div>
-        <div class="modal-body">
-        <div class="row my-3">
-          <div class="col">
-            <p><strong>Next run starts: </strong>{{ formatDate(job.job.nextRunAt) }}</p>
-            <p><strong>Last run started: </strong>{{ formatDate(job.job.lastRunAt) }}</p>
-          </div>
-        </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>
-      </div>
-    </div>
-  </div>
-  `,
-});

package/public/app/js/joblist.js

@@ -1,239 +0,0 @@
-const jobList = Vue.component("job-list", {
-  data: () => ({
-    multijobs: [],
-    currentSort: "name",
-    currentSortDir: "asc",
-  }),
-  props: ["jobs", "pagesize", "pagenumber", "sendClean", "loading"],
-  computed: {
-    sortedJobs: function () {
-      return this.jobs.sort((a, b) => {
-        let displayA, displayB;
-        if (this.currentSort === "name") {
-          displayA = a.job[this.currentSort]
-            ? a.job[this.currentSort].toLowerCase()
-            : "";
-          displayB = a.job[this.currentSort]
-            ? b.job[this.currentSort].toLowerCase()
-            : "";
-        } else {
-          displayA = moment(a.job[this.currentSort]);
-          displayB = moment(b.job[this.currentSort]);
-        }
-        let modifier = 1;
-        if (this.currentSortDir === "desc") modifier = -1;
-        if (displayA < displayB) return -1 * modifier;
-        if (displayA > displayB) return 1 * modifier;
-        return 0;
-      });
-    },
-  },
-  watch: {
-    jobs() {
-      // reset multijobs when jobs have changed
-      this.multijobs = [];
-    },
-  },
-  methods: {
-    sort(s) {
-      //if s == current sort, reverse
-      if (s === this.currentSort) {
-        this.currentSortDir = this.currentSortDir === "asc" ? "desc" : "asc";
-      }
-      this.currentSort = s;
-    },
-    sendQueued() {
-      this.$emit("confirm-multi-requeue", this.multijobs);
-      // this.multijobs = []
-    },
-    sendDelete() {
-      this.$emit("confirm-multi-delete", this.multijobs);
-      // this.multijobs = []
-    },
-    cleanMulti() {
-      return console.log("received Clean Multi");
-    },
-    formatTitle(date) {
-      if (!date) return;
-      return moment(date).format();
-    },
-    formatDate(date) {
-      if (!date) return;
-      return moment(date).fromNow();
-    },
-    checkAllCheckboxes() {
-      const checkboxes = document.querySelectorAll(".checkbox-triggerable");
-      for (const checkbox of checkboxes) {
-        checkbox.click();
-      }
-    },
-    toggleList(job) {
-      if (this.multijobs.includes(job.job._id)) {
-        this.multijobs.splice(this.multijobs.indexOf(job.job._id), 1);
-      } else {
-        this.multijobs.push(job.job._id);
-      }
-    },
-  },
-  template: `
-  <div v-on:sendClean="cleanMulti">
-        <div >
-          <div class="d-flex justify-content-end mb-2">
-            <span class="mr-2">{{ multijobs.length }} jobs selected</span>
-            <button :disabled="!multijobs.length" data-toggle="modal" data-target="#modalRequeueSureMulti" @click="sendQueued" class="btn btn-primary mr-2" data-placement="top" title="Requeue list of selecteds Jobs"> Multiple Requeue </button>
-            <button :disabled="!multijobs.length" data-toggle="modal" data-target="#modalDeleteSureMulti" @click="sendDelete" class="btn btn-danger" data-placement="top" title="Delete list of selecteds Jobs"> Multiple Delete </button>
-          </div>
-        </div>
-
-        <table class="table table-striped d-none d-xl-table">
-          <thead class="thead-dark">
-            <tr>
-              <th   @click="checkAllCheckboxes()" scope="col"> Multi </th>
-              <th   @click="sort('status')" scope="col"> Status </th>
-              <th   @click="sort('name')" scope="col"> Name <i v-if="currentSort === 'name' && currentSortDir === 'asc'" class="material-icons sortable" title="Sort Z to A">arrow_drop_down</i>
-                                                            <i v-else-if="currentSort === 'name' && currentSortDir === 'desc'" class="material-icons sortable" title="Sort A to Z">arrow_drop_up</i>
-                                                            <i v-else class="material-icons sortableinactive" title="Sort A to Z">arrow_drop_down</i>
-              </th>
-              <th   @click="sort('lastRunAt')" scope="col"> Last run started <i v-if="currentSort === 'lastRunAt' && currentSortDir === 'asc'" class="material-icons sortable" title="Sort Z to A">arrow_drop_up</i>
-                                                            <i v-else-if="currentSort === 'lastRunAt' && currentSortDir === 'desc'" class="material-icons sortable" title="Sort A to Z">arrow_drop_down</i>
-                                                            <i v-else class="material-icons sortableinactive" title="Sort A to Z">arrow_drop_down</i>
-              </th>
-              <th   @click="sort('nextRunAt')" scope="col"> Next run starts
-                  <i v-if="currentSort === 'nextRunAt' && currentSortDir === 'asc'" class="material-icons sortable" title="Sort Z to A">arrow_drop_up</i>
-                  <i v-else-if="currentSort === 'nextRunAt' && currentSortDir === 'desc'" class="material-icons sortable" title="Sort A to Z">arrow_drop_down</i>
-                  <i v-else class="material-icons sortableinactive" title="Sort A to Z">arrow_drop_down</i>
-
-              </th>
-              <th   @click="sort('lastFinishedAt')" scope="col"> Last finished
-                  <i v-if="currentSort === 'lastFinishedAt' && currentSortDir === 'asc'" class="material-icons sortable" title="Sort Z to A">arrow_drop_up</i>
-                  <i v-else-if="currentSort === 'lastFinishedAt' && currentSortDir === 'desc'" class="material-icons sortable" title="Sort A to Z">arrow_drop_down</i>
-                  <i v-else class="material-icons sortableinactive" title="Sort A to Z">arrow_drop_down</i>
-              </th>
-              <th  scope="col"> Locked </th>
-              <th  scope="col"> Actions </th>
-            </tr>
-          </thead>
-          <tbody v-if="loading">
-            <tr>
-              <td colspan='10' scope="row">
-                  <div  class="col-12 my-5 ml-auto text-center">
-                    <div class="text-center my-5 py-5">
-                          <div class="spinner-border" role="status">
-                          </div>
-                          <div>
-                          <span class="">Loading Jobs...</span>
-                          </div>
-                    </div>
-                 </div>
-              </td>
-            </tr>
-          </tbody>
-
-          <tbody v-else>
-            <tr v-for="job in sortedJobs">
-                  <td width="10" class="mult-select">
-                    <input v-model="multijobs" :id='job.job._id' class="checkbox-triggerable" type="checkbox" :value="job.job._id"></input>
-                  </td>
-                  <td th scope="row" class="job-name">
-                    <i v-if="job.repeating" class="oi oi-timer pill-own bg-info"><span>{{job.job.repeatInterval}}</span></i>
-                    <i v-if="job.scheduled" class="pill-own bg-info pill-withoutIcon"><span>Scheduled</span></i>
-                    <i v-if="job.completed" class="pill-own bg-success pill-withoutIcon"><span>Completed</span></i>
-                    <i v-if="job.queued" class="pill-own bg-primary pill-withoutIcon"><span>Queued</span></i>
-                    <i v-if="job.failed" class="pill-own bg-danger pill-withoutIcon"><span>Failed</span></i>
-                    <i v-if="job.running" class="pill-own bg-warning pill-withoutIcon"><span>Running</span></i>
-                  </td>
-                  <td class="job-name"  @click="toggleList(job)"> {{job.job.name}} </td>
-                  <td class="job-lastRunAt" :title="formatTitle(job.job.lastRunAt)" @click="toggleList(job)"> {{ formatDate(job.job.lastRunAt) }} </td>
-                  <td class="job-nextRunAt" :title="formatTitle(job.job.nextRunAt)" @click="toggleList(job)"> {{ formatDate(job.job.nextRunAt) }} </td>
-                  <td class="job-finishedAt" :title="formatTitle(job.job.lastFinishedAt)" @click="toggleList(job)"> {{ formatDate(job.job.lastFinishedAt) }} </td>
-                  <td class="job-lockedAt" :title="formatTitle(job.job.lockedAt)" @click="toggleList(job)"> {{ formatDate(job.job.lockedAt) }} </td>
-                  <td class="job-actions">
-                    <i class="material-icons md-dark md-custom action-btn viewData text-primary" data-toggle="modal" data-target="#modalRequeueSure" @click="$emit('confirm-requeue', job)" data-placement="left" title="Requeue">update</i>
-                    <i class="material-icons md-dark md-custom action-btn viewData text-success" data-toggle="modal" data-target="#modalData" @click="$emit('show-job-detail', job)" data-placement="top" title="Job Data">visibility</i>
-                    <i class="material-icons md-dark md-custom action-btn viewData text-danger" data-toggle="modal" data-target="#modalDeleteSure" @click="$emit('confirm-delete', job)" data-placement="top" title="Delete permanently">delete_forever</i>
-                </td>
-            </tr>
-          </tbody>
-        </table>
-
-
-        <div class="d-xl-none">
-          <div class="row">
-            <div v-for="job in sortedJobs" class="col col-xs-6 order-1 p-1">
-              <div class="card bg-light" >
-                <div class="card-header card-responsive-title-container">
-                  <div class="card-responsive-name"  @click="toggleList(job)">
-                    {{job.job.name}}
-                  </div>
-                  <div class="d-flex align-items-center">
-                    <div class="card-responsive-status-title mr-2" style="font-size: 18px; display: flex; align-items: center">
-                      <input v-model="multijobs" :id='job.job._id' type="checkbox" :value="job.job._id" class="card-responsive-checkbox"></input>
-                    </div>
-                    <i class="material-icons md-dark md-custom action-btn viewData text-primary material-icons-size mr-1" data-toggle="modal" data-target="#modalRequeueSure" @click="$emit('confirm-requeue', job)" data-placement="left" title="Requeue">update</i>
-                    <i class="material-icons md-dark md-custom action-btn viewData text-success material-icons-size mr-1" data-toggle="modal" data-target="#modalData" @click="$emit('show-job-detail', job)" data-placement="top" title="Job Data">visibility</i>
-                    <i class="material-icons md-dark md-custom action-btn viewData text-danger material-icons-size" data-toggle="modal" data-target="#modalDeleteSure" @click="$emit('confirm-delete', job)" data-placement="top" title="Delete permanently">delete_forever</i>
-                  </div>
-                </div>
-                <div class="card-body">
-                  <div class="d-flex justify-content-center mb-2">
-                    <i v-if="job.repeating" class="oi oi-timer pill-own mr-2 bg-info pill-own-card"><span class="pill-own-card-info">{{job.job.repeatInterval}}</span></i>
-                    <i v-if="job.scheduled" class="pill-own mr-2 bg-info pill-withoutIcon pill-own-card"><span class="pill-own-card-info">Scheduled</span></i>
-                    <i v-if="job.completed" class="pill-own mr-2 bg-success pill-withoutIcon pill-own-card"><span class="pill-own-card-info">Completed</span></i>
-                    <i v-if="job.queued" class="pill-own mr-2 bg-primary pill-withoutIcon pill-own-card"><span class="pill-own-card-info">Queued</span></i>
-                    <i v-if="job.failed" class="pill-own mr-2 bg-danger pill-withoutIcon pill-own-card"><span class="pill-own-card-info">Failed</span></i>
-                    <i v-if="job.running" class="pill-own mr-2 bg-warning pill-withoutIcon pill-own-card"><span class="pill-own-card-info">Running</span></i>
-                  </div>
-                  <div class="row">
-                    <div class="col col-md-6 text-center">
-                      <div class="card-responsive-status-title">
-                        Last run started
-                      </div>
-                      <div class="mb-3" :title="formatTitle(job.job.lastRunAt)">
-                        {{ formatDate(job.job.lastRunAt) }}
-                      </div>
-                      <div class="card-responsive-status-title">
-                        Last finished
-                      </div>
-                      <div :title="formatTitle(job.job.lastFinishedAt)">
-                        {{ formatDate(job.job.lastFinishedAt) }}
-                      </div>
-                    </div>
-                    <div class="col col-md-6 text-center">
-                      <div class="card-responsive-status-title">
-                        Next run starts
-                      </div>
-                      <div class="mb-3" :title="formatTitle(job.job.nextRunAt)">
-                        {{ formatDate(job.job.nextRunAt) }}
-                      </div>
-                      <div class="card-responsive-status-title">
-                        Locked
-                      </div>
-                      <div :title="formatTitle(job.job.lockedAt)">
-                        {{ formatDate(job.job.lockedAt) || "-" }}
-                      </div>
-                    </div>
-                  </div>
-                  <div></div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-
-        <div class="row">
-            <div class="col d-flex justify-content-center">
-            <nav aria-label="Page navigation example">
-                <ul class="pagination">
-                  <li class="page-item" :class="pagenumber === 1 ? 'disabled': ''"><a class="page-link" @click="$emit('pagechange', 'prev')">Previous</a></li>
-                  <!-- <li class="page-item" :class="pagenumber === 1 ? 'disabled': ''"><a class="page-link" @click="$emit('pagechange', 'prev')">{{pagenumber -1}}</a></li>
-                  <li class="page-item active"><a class="page-link">{{pagenumber}}</a></li>
-                  <li class="page-item"><a style="cursor:pointer;" class="page-link" @click="$emit('pagechange', 'next')">{{pagenumber +1}}</a></li> -->
-                  <li class="page-item"><a style="cursor:pointer;" class="page-link" @click="$emit('pagechange', 'next')">Next</a></li>
-                </ul>
-              </nav>
-            </div>
-        </div>
-</div>
-  `,
-});

package/public/app/js/main.js

@@ -1,275 +0,0 @@
-const app = Vue.component("app", {
-  data: () => ({
-    jobs: [],
-    overview: [],
-    refresh: 60,
-    showDetail: false,
-    pagenumber: 1,
-    showConfirm: false,
-    showConfirmMulti: false,
-    showConfirmRequeue: false,
-    showConfirmRequeueMulti: false,
-    showNewJob: false,
-    jobData: {},
-    deletec: false,
-    requeuec: false,
-    pagesize: 15,
-    sendClean: false,
-    createc: false,
-    property: "",
-    search: "",
-    object: "",
-    newLimit: null,
-    skip: 0,
-    name: "",
-    state: "",
-    nameprop: "",
-    loading: false,
-    hideSlide: true,
-  }),
-  methods: {
-    openNav() {
-      document.getElementById("mySidebar").style.width = "100%";
-      document.getElementById("main").style.marginLeft = "100%";
-      this.hideSlide = false;
-    },
-    closeNav() {
-      document.getElementById("mySidebar").style.width = "0";
-      document.getElementById("main").style.marginLeft = "0";
-      this.hideSlide = true;
-    },
-    showJobDetail(data) {
-      this.jobData = data;
-      this.showDetail = true;
-    },
-    readyClean() {
-      this.sendClean = true;
-    },
-    confirmDelete(data) {
-      this.jobData = data;
-      this.showConfirm = true;
-    },
-    confirmDeleteMulti(data) {
-      this.jobData = data;
-      this.showConfirmMulti = true;
-    },
-    confirmRequeue(data) {
-      this.jobData = data;
-      this.showConfirmRequeue = true;
-    },
-    confirmRequeueMulti(data) {
-      this.jobData = data;
-      this.showConfirmRequeueMulti = true;
-    },
-    newJob(data) {
-      this.jobData = data;
-      this.showNewJob = true;
-    },
-    searchForm(name, search, property, limit, skip, refresh, state, object) {
-      (this.pagesize = limit ? limit : this.pagesize),
-        (this.name = name),
-        (this.search = search),
-        (this.property = property),
-        (this.skip = skip),
-        (this.refresh = refresh),
-        (this.state = state),
-        (this.object = object ? object : this.object),
-        this.fetchData(
-          this.name,
-          this.search,
-          this.property,
-          this.pagesize,
-          this.skip,
-          this.refresh,
-          this.state,
-          this.object
-        );
-    },
-    refreshData() {
-      this.fetchData(
-        this.name,
-        this.search,
-        this.property,
-        this.pagesize,
-        this.skip,
-        this.refresh,
-        this.state,
-        this.object
-      );
-    },
-    pagechange(action) {
-      if (action === "next") {
-        this.pagenumber++;
-      }
-      if (action === "prev") {
-        this.pagenumber--;
-      }
-      this.skip = (this.pagenumber - 1) * this.pagesize;
-      this.fetchData(
-        this.name,
-        this.search,
-        this.property,
-        this.pagesize,
-        this.skip,
-        this.refresh,
-        this.state,
-        this.object
-      );
-    },
-    fetchData(
-      name = "",
-      search = "",
-      property = "",
-      limit = 15,
-      skip = 0,
-      refresh = 60,
-      state = "",
-      object
-    ) {
-      this.loading = true;
-      this.pagesize = this.pagesize === 0 ? parseInt(limit) : this.pagesize;
-      this.refresh = parseFloat(refresh);
-      const url = `api?limit=${limit}&job=${name}&skip=${skip}&property=${property}${
-        object ? "&isObjectId=true" : ""
-      }${state ? `&state=${state}` : ""}&q=${search}`;
-      return axios
-        .get(url)
-        .then((result) => result.data)
-        .then(
-          (data) => {
-            this.jobs = data.jobs;
-            this.search = search;
-            this.property = property;
-            this.object = object;
-            this.overview = data.overview;
-            this.loading = false;
-          },
-          () => {
-            this.loading = false;
-            this.jobs = [];
-          }
-        )
-        .catch(console.log);
-    },
-
-    popupmessage(data) {
-      if (data === "delete") {
-        this.deletec = true;
-        setTimeout(() => {
-          this.deletec = false;
-        }, 2000);
-      }
-      if (data === "multidelete") {
-        this.deletec = true;
-        setTimeout(() => {
-          this.deletec = false;
-        }, 2000);
-      }
-      if (data === "requeue") {
-        this.requeuec = true;
-        setTimeout(() => {
-          this.requeuec = false;
-        }, 2000);
-      }
-      if (data === "multirequeue") {
-        this.requeuec = true;
-        setTimeout(() => {
-          this.requeuec = false;
-        }, 2000);
-      }
-      if (data === "create") {
-        this.createc = true;
-        setTimeout(() => {
-          this.createc = false;
-        }, 2000);
-      }
-    },
-  },
-  created() {
-    return this.fetchData();
-  },
-  template: `
-
-    <div class="container-fluid">
-      <div class="">
-        <div class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow">
-          <div class="d-flex">
-            <div>
-              <a class="navbar-brand col-sm-10 col-md-10 mr-0 tittle"> Agendash</a>
-            </div>
-            <div class='d-md-none w-50'>
-              <div id="mySidebar" class="sidebar-collapse" @click="closeNav()">
-                <a href="javascript:void(0)" class="closebtn" @click="closeNav()">&times;</a>
-                <div v-if="hideSlide === false" class="bg-light overflow-auto">
-                  <sidebar
-                    v-on:search-sidebar="searchForm"
-                    v-on:new-job="newJob"
-                    :overview="overview"
-                    :pagesize="pagesize"
-                    :loading="loading"
-                    >
-                  </sidebar>
-                </div>
-              </div>
-              <div class="slidebar-container-button" id="main">
-                <button class="openbtn" @click="openNav()">&#9776;</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="row pt-5">
-          <div v-if="hideSlide === true" class="col-md-2 d-none d-md-block bg-light overflow-auto">
-            <sidebar
-              v-on:search-sidebar="searchForm"
-              v-on:new-job="newJob"
-              :overview="overview"
-              :pagesize="pagesize"
-              :loading="loading"
-              >
-            </sidebar>
-          </div>
-          <main role="main" class="col-md-10 ml-sm-auto col-lg-10 px-4">
-            <div class="col-12">
-              <topbar v-on:search-form="searchForm"
-              :name='name'
-              :state='state'
-              :search='search'
-              :property='property'
-              >
-              </topbar>
-            </div>
-            <div class="col-12 ">
-              <job-list
-                  v-on:confirm-delete="confirmDelete"
-                  v-on:confirm-multi-delete="confirmDeleteMulti"
-                  v-on:confirm-requeue="confirmRequeue"
-                  v-on:confirm-multi-requeue="confirmRequeueMulti"
-                  v-on:show-job-detail="showJobDetail"
-                  v-on:pagechange="pagechange"
-                  :pagesize="pagesize"
-                  :pagenumber='pagenumber'
-                  :skip="skip"
-                  :jobs="jobs"
-                  :sendClean='sendClean'
-                  :loading='loading'
-                  >
-              </job-list>
-            </div>
-          </main>
-      </div>
-      <div class="row bg-dark py-3">
-        <div class="col-6 m-auto text-light text-center">
-          <small>UI written by <a class="text-light" href="https://www.softwareontheroad.com/about" target="_BLANK">Sam Quinn</a>. Backend by Agenda team.</small>
-        </div>
-      </div>
-      <job-detail v-if="showDetail" v-bind:job="jobData"></job-detail>
-      <confirm-delete v-if="showConfirm" v-on:popup-message="popupmessage('delete')" v-on:refresh-data="refreshData" v-bind:job="jobData"></confirm-delete>
-      <confirm-multi-delete v-if="showConfirmMulti" v-on:ready-clean="readyClean" v-on:popup-message="popupmessage('multidelete')" v-on:refresh-data="refreshData" v-bind:jobs="jobData"></confirm-multi-delete>
-      <confirm-requeue v-if="showConfirmRequeue"  v-on:popup-message="popupmessage('requeue')" v-on:refresh-data="refreshData" v-bind:job="jobData"></confirm-requeue>
-      <confirm-multi-requeue v-if="showConfirmRequeueMulti" v-on:ready-clean="readyClean" v-on:popup-message="popupmessage('multirequeue')" v-on:refresh-data="refreshData" v-bind:jobs="jobData"></confirm-multi-requeue>
-      <popup-message :deletec="deletec" :requeuec="requeuec" :createc="createc"></popup-message>
-      <new-job v-if="showNewJob" v-on:popup-message="popupmessage('create')" v-on:refresh-data="fetchData"></new-job>
-  </div>
-  `,
-});