Skip to content

Commit 7dd4caf

Browse files
micahfleemicahflee
authored
Merge pull request #599 from lockdown-systems/refactor-vue-components
Refactor vue components
2 parents ff84cfe + 0cb4978 commit 7dd4caf

8 files changed

Lines changed: 277 additions & 370 deletions

File tree

‎src/renderer/src/App.vue‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -613,13 +613,9 @@ body {
613613
}
614614
615615
.wizard-sidebar .stats .card-body {
616-
padding: 0.2rem;
617-
}
618-
619-
.wizard-sidebar .stats .card-body h1 {
616+
padding: 0.7rem 0.2rem;
620617
font-size: 1.5em;
621618
margin-bottom: 0;
622-
padding: 0.5rem 0 0.5rem 0;
623619
}
624620
625621
.wizard-review ul {

‎src/renderer/src/views/facebook/components/FacebookJobStatusComponent.vue‎

Lines changed: 13 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script setup lang="ts">
22
import type { FacebookJob } from "../../../../../shared_types";
3-
import RunningIcon from "../../shared_components/RunningIcon.vue";
3+
import StatusComponent from "../../shared_components/StatusComponent.vue";
44
55
defineProps<{
66
jobs: FacebookJob[];
@@ -17,15 +17,6 @@ const emit = defineEmits([
1717
"onClickingEnabled",
1818
]);
1919
20-
const getStatusIcon = (status: string) => {
21-
const statusIcons: { [key: string]: string } = {
22-
pending: "fa-solid fa-ellipsis text-primary",
23-
finished: "fa-solid fa-square-check text-success",
24-
canceled: "fa-solid fa-circle-exclamation text-danger",
25-
};
26-
return statusIcons[status] || "";
27-
};
28-
2920
const getJobTypeText = (jobType: string) => {
3021
const jobTypeTexts: { [key: string]: string } = {
3122
login: "Logging in",
@@ -38,86 +29,16 @@ const getJobTypeText = (jobType: string) => {
3829
</script>
3930

4031
<template>
41-
<div class="job-status-list">
42-
<div
43-
v-for="job in jobs"
44-
:key="job.id ?? 0"
45-
class="job-status-item d-flex align-items-center"
46-
>
47-
<div class="status-icon me-2">
48-
<i v-if="job.status !== 'running'" :class="getStatusIcon(job.status)" />
49-
<i v-else-if="isPaused" class="fa-solid fa-pause" />
50-
<RunningIcon v-else />
51-
</div>
52-
<div class="job-type">
53-
{{ getJobTypeText(job.jobType) }}
54-
</div>
55-
</div>
56-
<div class="d-flex justify-content-center mt-2">
57-
<button
58-
v-if="!isPaused"
59-
class="btn btn-outline-secondary btn-sm"
60-
@click="emit('onPause')"
61-
>
62-
<i class="fa-solid fa-pause" /> Pause
63-
</button>
64-
<button
65-
v-if="isPaused"
66-
class="btn btn-primary btn-sm"
67-
@click="emit('onResume')"
68-
>
69-
<i class="fa-solid fa-play" /> Resume
70-
</button>
71-
<button
72-
class="btn btn-outline-danger btn-sm btn-cancel"
73-
@click="emit('onCancel')"
74-
>
75-
<i class="fa-regular fa-circle-xmark" /> Cancel
76-
</button>
77-
</div>
78-
<div class="d-flex justify-content-center">
79-
<button class="btn btn-link btn-sm" @click="emit('onReportBug')">
80-
Report a Bug
81-
</button>
82-
</div>
83-
<div class="d-flex justify-content-center">
84-
<button
85-
class="btn btn-link btn-sm"
86-
@click="
87-
clickingEnabled
88-
? emit('onClickingDisabled')
89-
: emit('onClickingEnabled')
90-
"
91-
>
92-
{{ clickingEnabled ? "Disable" : "Enable" }} Clicking in Browser
93-
</button>
94-
</div>
95-
</div>
32+
<StatusComponent
33+
:jobs="jobs"
34+
:get-job-type-text="getJobTypeText"
35+
:is-paused="isPaused"
36+
:clicking-enabled="clickingEnabled"
37+
@on-pause="emit('onPause')"
38+
@on-resume="emit('onResume')"
39+
@on-cancel="emit('onCancel')"
40+
@on-report-bug="emit('onReportBug')"
41+
@on-clicking-enabled="emit('onClickingEnabled')"
42+
@on-clicking-disabled="emit('onClickingDisabled')"
43+
/>
9644
</template>
97-
98-
<style scoped>
99-
.job-status-list {
100-
padding: 10px;
101-
}
102-
103-
.job-status-item {
104-
display: flex;
105-
align-items: center;
106-
}
107-
108-
.status-icon {
109-
width: 24px;
110-
height: 24px;
111-
display: flex;
112-
align-items: center;
113-
justify-content: center;
114-
}
115-
116-
.job-type {
117-
font-size: 16px;
118-
}
119-
120-
.btn-cancel {
121-
margin-left: 5px;
122-
}
123-
</style>

‎src/renderer/src/views/facebook/wizard/FacebookWizardSidebar.vue‎

Lines changed: 2 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<script setup lang="ts">
2-
import { ref, onMounted } from "vue";
32
import {
43
State,
54
FacebookViewModel,
65
} from "../../../view_models/FacebookViewModel";
76
import SidebarArchive from "../../shared_components/SidebarArchive.vue";
7+
import DebugModeComponent from "../../shared_components/DebugModeComponent.vue";
88
99
// Props
1010
defineProps<{
@@ -16,22 +16,6 @@ const emit = defineEmits<{
1616
setState: [value: State];
1717
setDebugAutopauseEndOfStep: [value: boolean];
1818
}>();
19-
20-
// Debug
21-
const shouldOpenDevtools = ref(false);
22-
const debugAutopauseEndOfStep = ref(false);
23-
24-
const debugAutopauseEndOfStepChanged = async () => {
25-
emit("setDebugAutopauseEndOfStep", debugAutopauseEndOfStep.value);
26-
};
27-
28-
const enableDebugMode = async () => {
29-
emit("setState", State.Debug);
30-
};
31-
32-
onMounted(async () => {
33-
shouldOpenDevtools.value = await window.electron.shouldOpenDevtools();
34-
});
3519
</script>
3620

3721
<template>
@@ -62,29 +46,7 @@ onMounted(async () => {
6246
:account-type="model.account.type"
6347
/>
6448

65-
<!-- Debug mode -->
66-
<div v-if="shouldOpenDevtools" class="p-3 small">
67-
<hr />
68-
69-
<div class="mb-3">
70-
<button class="btn btn-sm btn-danger" @click="enableDebugMode">
71-
Debug Mode
72-
</button>
73-
</div>
74-
75-
<div class="form-check">
76-
<input
77-
id="debugAutopauseEndOfStep"
78-
v-model="debugAutopauseEndOfStep"
79-
type="checkbox"
80-
class="form-check-input"
81-
@change="debugAutopauseEndOfStepChanged"
82-
/>
83-
<label class="form-check-label" for="debugAutopauseEndOfStep">
84-
Automatically pause before finishing each step
85-
</label>
86-
</div>
87-
</div>
49+
<DebugModeComponent :emit="emit" :debug-state="State.Debug" />
8850
</div>
8951
</template>
9052

‎src/renderer/src/views/shared_components/DebugModeComponent.vue‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<script setup lang="ts">
2+
import { ref, onMounted } from "vue";
3+
// Props
4+
const props = defineProps<{
5+
emit: Function;
6+
debugState: string;
7+
}>();
8+
9+
// Debug
10+
const shouldOpenDevtools = ref(false);
11+
const debugAutopauseEndOfStep = ref(false);
12+
13+
const debugAutopauseEndOfStepChanged = async () => {
14+
props.emit("setDebugAutopauseEndOfStep", debugAutopauseEndOfStep.value);
15+
};
16+
17+
const enableDebugMode = async () => {
18+
props.emit("setState", props.debugState);
19+
};
20+
21+
onMounted(async () => {
22+
shouldOpenDevtools.value = await window.electron.shouldOpenDevtools();
23+
});
24+
</script>
25+
26+
<template>
27+
<!-- Debug mode -->
28+
<div v-if="shouldOpenDevtools" class="p-3 small">
29+
<hr />
30+
31+
<div class="mb-3">
32+
<button class="btn btn-sm btn-danger" @click="enableDebugMode">
33+
Debug Mode
34+
</button>
35+
</div>
36+
37+
<div class="form-check">
38+
<input
39+
id="debugAutopauseEndOfStep"
40+
v-model="debugAutopauseEndOfStep"
41+
type="checkbox"
42+
class="form-check-input"
43+
@change="debugAutopauseEndOfStepChanged"
44+
/>
45+
<label class="form-check-label" for="debugAutopauseEndOfStep">
46+
Automatically pause before finishing each step
47+
</label>
48+
</div>
49+
</div>
50+
</template>

‎src/renderer/src/views/shared_components/SidebarCard.vue‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<script setup lang="ts">
2+
// Props
3+
defineProps<{
4+
header: string;
5+
stat: number;
6+
}>();
7+
8+
// Util
9+
function formatStatsNumber(num: number): string {
10+
if (num >= 1000) {
11+
return (num / 1000).toFixed(1) + "k";
12+
}
13+
return num.toString();
14+
}
15+
</script>
16+
17+
<template>
18+
<div class="col-12">
19+
<div class="card text-center">
20+
<!-- eslint-disable-next-line vue/no-v-html -->
21+
<div class="card-header" v-html="header"></div>
22+
<div class="card-body">{{ formatStatsNumber(stat) }}</div>
23+
</div>
24+
</div>
25+
</template>

‎src/renderer/src/views/shared_components/StatusComponent.vue‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
<script setup lang="ts">
2+
import type { FacebookJob } from "../../../../shared_types";
3+
import type { XJob } from "../../../../shared_types";
4+
import RunningIcon from "./RunningIcon.vue";
5+
6+
defineProps<{
7+
jobs: FacebookJob[] | XJob[];
8+
isPaused: boolean;
9+
clickingEnabled: boolean;
10+
getJobTypeText: Function;
11+
}>();
12+
13+
const emit = defineEmits([
14+
"onPause",
15+
"onResume",
16+
"onCancel",
17+
"onReportBug",
18+
"onClickingDisabled",
19+
"onClickingEnabled",
20+
]);
21+
22+
const getStatusIcon = (status: string) => {
23+
const statusIcons: { [key: string]: string } = {
24+
pending: "fa-solid fa-ellipsis text-primary",
25+
finished: "fa-solid fa-square-check text-success",
26+
canceled: "fa-solid fa-circle-exclamation text-danger",
27+
};
28+
return statusIcons[status] || "";
29+
};
30+
</script>
31+
32+
<template>
33+
<div class="job-status-list">
34+
<div
35+
v-for="job in jobs"
36+
:key="job.id ?? 0"
37+
class="job-status-item d-flex align-items-center"
38+
>
39+
<div class="status-icon me-2">
40+
<i v-if="job.status !== 'running'" :class="getStatusIcon(job.status)" />
41+
<i v-else-if="isPaused" class="fa-solid fa-pause" />
42+
<RunningIcon v-else />
43+
</div>
44+
<div class="job-type">
45+
{{ getJobTypeText(job.jobType) }}
46+
</div>
47+
</div>
48+
<div class="d-flex justify-content-center mt-2">
49+
<button
50+
v-if="!isPaused"
51+
class="btn btn-outline-secondary btn-sm"
52+
@click="emit('onPause')"
53+
>
54+
<i class="fa-solid fa-pause" /> Pause
55+
</button>
56+
<button
57+
v-if="isPaused"
58+
class="btn btn-primary btn-sm"
59+
@click="emit('onResume')"
60+
>
61+
<i class="fa-solid fa-play" /> Resume
62+
</button>
63+
<button
64+
class="btn btn-outline-danger btn-sm btn-cancel"
65+
@click="emit('onCancel')"
66+
>
67+
<i class="fa-regular fa-circle-xmark" /> Cancel
68+
</button>
69+
</div>
70+
<div class="d-flex justify-content-center">
71+
<button class="btn btn-link btn-sm" @click="emit('onReportBug')">
72+
Report a Bug
73+
</button>
74+
</div>
75+
<div class="d-flex justify-content-center">
76+
<button
77+
class="btn btn-link btn-sm"
78+
@click="
79+
clickingEnabled
80+
? emit('onClickingDisabled')
81+
: emit('onClickingEnabled')
82+
"
83+
>
84+
{{ clickingEnabled ? "Disable" : "Enable" }} Clicking in Browser
85+
</button>
86+
</div>
87+
</div>
88+
</template>
89+
90+
<style scoped>
91+
.job-status-list {
92+
padding: 10px;
93+
}
94+
95+
.job-status-item {
96+
display: flex;
97+
align-items: center;
98+
}
99+
100+
.status-icon {
101+
width: 24px;
102+
height: 24px;
103+
display: flex;
104+
align-items: center;
105+
justify-content: center;
106+
}
107+
108+
.job-type {
109+
font-size: 16px;
110+
}
111+
112+
.btn-cancel {
113+
margin-left: 5px;
114+
}
115+
</style>

0 commit comments

Comments
 (0)