|
@@ -1,3 +1,66 @@
|
|
|
+<script setup lang="ts">
|
|
|
+import { useStore } from "vuex";
|
|
|
+import { ref, computed, onMounted } from "vue";
|
|
|
+
|
|
|
+import FloatingBox from "@/components/FloatingBox.vue";
|
|
|
+
|
|
|
+const store = useStore();
|
|
|
+
|
|
|
+const minimise = ref(true);
|
|
|
+const body = ref(document.body);
|
|
|
+
|
|
|
+const activeJobs = computed(() => store.state.longJobs.activeJobs);
|
|
|
+
|
|
|
+const { socket } = store.state.websockets;
|
|
|
+
|
|
|
+const setJob = payload => store.dispatch("longJobs/setJob", payload);
|
|
|
+
|
|
|
+const setJobs = payload => store.dispatch("longJobs/setJobs", payload);
|
|
|
+
|
|
|
+const removeJob = payload => store.dispatch("longJobs/removeJob", payload);
|
|
|
+
|
|
|
+const remove = job => {
|
|
|
+ if (job.status === "success" || job.status === "error") {
|
|
|
+ socket.dispatch("users.removeLongJob", job.id, res => {
|
|
|
+ if (res.status === "success") {
|
|
|
+ removeJob(job.id);
|
|
|
+ } else console.log(res.message);
|
|
|
+ });
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ socket.dispatch("users.getLongJobs", {
|
|
|
+ cb: res => {
|
|
|
+ if (res.status === "success") {
|
|
|
+ setJobs(res.data.longJobs);
|
|
|
+ } else console.log(res.message);
|
|
|
+ },
|
|
|
+ onProgress: res => {
|
|
|
+ setJob(res);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ socket.on("keep.event:longJob.removed", ({ data }) => {
|
|
|
+ removeJob(data.jobId);
|
|
|
+ });
|
|
|
+
|
|
|
+ socket.on("keep.event:longJob.added", ({ data }) => {
|
|
|
+ if (!activeJobs.value.find(activeJob => activeJob.id === data.jobId))
|
|
|
+ socket.dispatch("users.getLongJob", data.jobId, {
|
|
|
+ cb: res => {
|
|
|
+ if (res.status === "success") {
|
|
|
+ setJob(res.data.longJob);
|
|
|
+ } else console.log(res.message);
|
|
|
+ },
|
|
|
+ onProgress: res => {
|
|
|
+ setJob(res);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+});
|
|
|
+</script>
|
|
|
+
|
|
|
<template>
|
|
|
<floating-box
|
|
|
v-if="activeJobs.length > 0"
|
|
@@ -84,74 +147,6 @@
|
|
|
</floating-box>
|
|
|
</template>
|
|
|
|
|
|
-<script>
|
|
|
-import { mapState, mapActions, mapGetters } from "vuex";
|
|
|
-
|
|
|
-import FloatingBox from "@/components/FloatingBox.vue";
|
|
|
-
|
|
|
-export default {
|
|
|
- components: {
|
|
|
- FloatingBox
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- minimise: true,
|
|
|
- body: document.body
|
|
|
- };
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapState("longJobs", {
|
|
|
- activeJobs: state => state.activeJobs
|
|
|
- }),
|
|
|
- ...mapGetters({
|
|
|
- socket: "websockets/getSocket"
|
|
|
- })
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.socket.dispatch("users.getLongJobs", {
|
|
|
- cb: res => {
|
|
|
- if (res.status === "success") {
|
|
|
- this.setJobs(res.data.longJobs);
|
|
|
- } else console.log(res.message);
|
|
|
- },
|
|
|
- onProgress: res => {
|
|
|
- this.setJob(res);
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- this.socket.on("keep.event:longJob.removed", ({ data }) => {
|
|
|
- this.removeJob(data.jobId);
|
|
|
- });
|
|
|
-
|
|
|
- this.socket.on("keep.event:longJob.added", ({ data }) => {
|
|
|
- if (!this.activeJobs.find(activeJob => activeJob.id === data.jobId))
|
|
|
- this.socket.dispatch("users.getLongJob", data.jobId, {
|
|
|
- cb: res => {
|
|
|
- if (res.status === "success") {
|
|
|
- this.setJob(res.data.longJob);
|
|
|
- } else console.log(res.message);
|
|
|
- },
|
|
|
- onProgress: res => {
|
|
|
- this.setJob(res);
|
|
|
- }
|
|
|
- });
|
|
|
- });
|
|
|
- },
|
|
|
- methods: {
|
|
|
- remove(job) {
|
|
|
- if (job.status === "success" || job.status === "error") {
|
|
|
- this.socket.dispatch("users.removeLongJob", job.id, res => {
|
|
|
- if (res.status === "success") {
|
|
|
- this.removeJob(job.id);
|
|
|
- } else console.log(res.message);
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- ...mapActions("longJobs", ["setJob", "setJobs", "removeJob"])
|
|
|
- }
|
|
|
-};
|
|
|
-</script>
|
|
|
-
|
|
|
<style lang="less" scoped>
|
|
|
.night-mode {
|
|
|
#longJobs {
|