mysqlsyncr 1.0.8 → 1.0.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/socketServer.js +6 -3
- package/ui/dist/spa/assets/{MainLayout-C27l9N4F.js → MainLayout-D0eJ_5sV.js} +1 -1
- package/ui/dist/spa/assets/{axios-Y2H2Igoj.js → axios-CEU4Idnn.js} +1 -1
- package/ui/dist/spa/assets/{index-DKK0oGss.js → index-C4-Ja7SU.js} +11 -11
- package/ui/dist/spa/assets/{index-DME6fUxJ.css → index-DbZFTc3Z.css} +1 -1
- package/ui/dist/spa/index.html +2 -2
- package/ui/src/pages/MainComponent.vue +204 -50
package/ui/dist/spa/index.html
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
<!DOCTYPE html><html><head><title>MySQLsyncr</title><meta charset=utf-8><meta name=description content="A simple ui for the sync features in mysqlsyncr"><meta name=format-detection content="telephone=no"><meta name=msapplication-tap-highlight content=no><meta name=viewport content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width"><link rel=icon type=image/png sizes=128x128 href=/icons/favicon-128x128.png><link rel=icon type=image/png sizes=96x96 href=/icons/favicon-96x96.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=icon type=image/ico href=/favicon.ico> <script type="module" crossorigin src="/assets/index-
|
|
2
|
-
<link rel="stylesheet" crossorigin href="/assets/index-
|
|
1
|
+
<!DOCTYPE html><html><head><title>MySQLsyncr</title><meta charset=utf-8><meta name=description content="A simple ui for the sync features in mysqlsyncr"><meta name=format-detection content="telephone=no"><meta name=msapplication-tap-highlight content=no><meta name=viewport content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width"><link rel=icon type=image/png sizes=128x128 href=/icons/favicon-128x128.png><link rel=icon type=image/png sizes=96x96 href=/icons/favicon-96x96.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=icon type=image/ico href=/favicon.ico> <script type="module" crossorigin src="/assets/index-C4-Ja7SU.js"></script>
|
|
2
|
+
<link rel="stylesheet" crossorigin href="/assets/index-DbZFTc3Z.css">
|
|
3
3
|
</head><body><div id=q-app></div></body></html>
|
|
@@ -1,41 +1,66 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<q-page>
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
<
|
|
6
|
-
@click="
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
2
|
+
<q-page class="q-pa-md">
|
|
3
|
+
<!-- Top Action Bar -->
|
|
4
|
+
<div class="row q-col-gutter-md q-mb-lg">
|
|
5
|
+
<div class="col-auto">
|
|
6
|
+
<q-btn @click="openSettings" icon="settings" label="Settings" color="primary" />
|
|
7
|
+
</div>
|
|
8
|
+
<div class="col-auto">
|
|
9
|
+
<q-btn
|
|
10
|
+
@click="
|
|
11
|
+
Object.keys(existingDatabases).length === 0
|
|
12
|
+
? createNewDump()
|
|
13
|
+
: createNewDump(true)
|
|
14
|
+
"
|
|
15
|
+
:icon="Object.keys(existingDatabases).length === 0 ? 'download' : 'refresh'"
|
|
16
|
+
:label="
|
|
17
|
+
Object.keys(existingDatabases).length === 0 ? 'Get New Dump' : 'Refresh Dump'
|
|
18
|
+
"
|
|
19
|
+
color="secondary"
|
|
20
|
+
/>
|
|
21
|
+
</div>
|
|
16
22
|
</div>
|
|
17
23
|
|
|
18
|
-
|
|
24
|
+
<!-- Database Not Set Up Warning -->
|
|
25
|
+
<q-card v-if="!isDbSetup" class="q-mb-lg bg-warning text-white">
|
|
19
26
|
<q-card-section>
|
|
20
|
-
<div class="text-h6">
|
|
21
|
-
|
|
22
|
-
|
|
27
|
+
<div class="text-h6">
|
|
28
|
+
<q-icon name="warning" class="q-mr-sm" />
|
|
29
|
+
Database Not Set Up
|
|
30
|
+
</div>
|
|
31
|
+
<div class="q-mt-sm">Please configure your database settings to get started.</div>
|
|
32
|
+
<q-btn
|
|
33
|
+
@click="openSettings"
|
|
34
|
+
label="Open Settings"
|
|
35
|
+
color="white"
|
|
36
|
+
text-color="warning"
|
|
37
|
+
class="q-mt-sm"
|
|
38
|
+
unelevated
|
|
39
|
+
/>
|
|
23
40
|
</q-card-section>
|
|
24
41
|
</q-card>
|
|
25
42
|
|
|
26
|
-
|
|
43
|
+
<!-- Database Structure Card -->
|
|
44
|
+
<q-card v-if="Object.keys(existingDatabases).length > 0" class="q-mb-lg">
|
|
45
|
+
<q-card-section class="bg-primary text-white">
|
|
46
|
+
<div class="text-h6">
|
|
47
|
+
<q-icon name="account_tree" class="q-mr-sm" />
|
|
48
|
+
Database Structure
|
|
49
|
+
</div>
|
|
50
|
+
</q-card-section>
|
|
51
|
+
|
|
27
52
|
<q-card-section>
|
|
28
|
-
<div class="text-h6">Database Structure</div>
|
|
29
53
|
<q-tree
|
|
30
54
|
:nodes="databaseTree"
|
|
31
55
|
node-key="id"
|
|
32
56
|
v-model:expanded="expandedNodes"
|
|
33
57
|
@lazy-load="onLazyLoad"
|
|
58
|
+
class="database-tree"
|
|
34
59
|
>
|
|
35
60
|
<template v-slot:default-header="prop">
|
|
36
61
|
<div class="row items-center full-width">
|
|
37
62
|
<div
|
|
38
|
-
class="row items-center flex-grow-1"
|
|
63
|
+
class="row items-center flex-grow-1 cursor-pointer"
|
|
39
64
|
@click.stop="
|
|
40
65
|
!['category', 'database', 'subcategory'].includes(
|
|
41
66
|
prop.node.type,
|
|
@@ -51,7 +76,7 @@
|
|
|
51
76
|
size="sm"
|
|
52
77
|
class="q-mr-sm"
|
|
53
78
|
/>
|
|
54
|
-
<div>{{ prop.node.label }}</div>
|
|
79
|
+
<div class="text-weight-medium">{{ prop.node.label }}</div>
|
|
55
80
|
<q-badge
|
|
56
81
|
v-if="prop.node.diffCount"
|
|
57
82
|
color="negative"
|
|
@@ -61,7 +86,6 @@
|
|
|
61
86
|
</q-badge>
|
|
62
87
|
</div>
|
|
63
88
|
|
|
64
|
-
<!-- Fix button with better spacing -->
|
|
65
89
|
<q-btn
|
|
66
90
|
v-if="
|
|
67
91
|
['issue-group', 'issues', 'category', 'database'].includes(
|
|
@@ -86,25 +110,122 @@
|
|
|
86
110
|
</q-card>
|
|
87
111
|
|
|
88
112
|
<q-dialog v-model="settingsDialog" persistent>
|
|
89
|
-
<q-card>
|
|
90
|
-
<q-card-section>
|
|
91
|
-
<div class="text-
|
|
92
|
-
<
|
|
93
|
-
<q-input v-model="port" label="Database Port" type="number" required />
|
|
94
|
-
<q-input v-model="user" label="Database User" required />
|
|
95
|
-
<q-input
|
|
96
|
-
v-model="password"
|
|
97
|
-
label="Database Password"
|
|
98
|
-
type="password"
|
|
99
|
-
required
|
|
100
|
-
autocomplete="off"
|
|
101
|
-
/>
|
|
102
|
-
<q-input v-model="database" label="Database Name" required />
|
|
103
|
-
<q-input v-model="dbFolder" label="Database Folder" required />
|
|
113
|
+
<q-card style="width: 90vw; max-width: 1200px">
|
|
114
|
+
<q-card-section class="bg-primary text-white">
|
|
115
|
+
<div class="text-h5">Database Settings</div>
|
|
116
|
+
<div class="text-subtitle2">Configure your database connection parameters</div>
|
|
104
117
|
</q-card-section>
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
<
|
|
118
|
+
|
|
119
|
+
<q-card-section class="q-pa-lg col scroll">
|
|
120
|
+
<div class="row q-col-gutter-lg justify-center">
|
|
121
|
+
<div class="col-12 col-sm-10">
|
|
122
|
+
<div class="row q-col-gutter-md">
|
|
123
|
+
<div class="col-12 col-sm-6">
|
|
124
|
+
<q-input
|
|
125
|
+
v-model="host"
|
|
126
|
+
label="Database Host"
|
|
127
|
+
filled
|
|
128
|
+
class="q-mb-md"
|
|
129
|
+
required
|
|
130
|
+
>
|
|
131
|
+
<template v-slot:prepend>
|
|
132
|
+
<q-icon name="dns" />
|
|
133
|
+
</template>
|
|
134
|
+
</q-input>
|
|
135
|
+
</div>
|
|
136
|
+
|
|
137
|
+
<div class="col-12 col-sm-6">
|
|
138
|
+
<q-input
|
|
139
|
+
v-model="port"
|
|
140
|
+
label="Database Port"
|
|
141
|
+
type="number"
|
|
142
|
+
filled
|
|
143
|
+
class="q-mb-md"
|
|
144
|
+
required
|
|
145
|
+
>
|
|
146
|
+
<template v-slot:prepend>
|
|
147
|
+
<q-icon name="settings_ethernet" />
|
|
148
|
+
</template>
|
|
149
|
+
</q-input>
|
|
150
|
+
</div>
|
|
151
|
+
|
|
152
|
+
<div class="col-12 col-sm-6">
|
|
153
|
+
<q-input
|
|
154
|
+
v-model="user"
|
|
155
|
+
label="Database User"
|
|
156
|
+
filled
|
|
157
|
+
class="q-mb-md"
|
|
158
|
+
required
|
|
159
|
+
>
|
|
160
|
+
<template v-slot:prepend>
|
|
161
|
+
<q-icon name="person" />
|
|
162
|
+
</template>
|
|
163
|
+
</q-input>
|
|
164
|
+
</div>
|
|
165
|
+
|
|
166
|
+
<div class="col-12 col-sm-6">
|
|
167
|
+
<q-input
|
|
168
|
+
v-model="password"
|
|
169
|
+
label="Database Password"
|
|
170
|
+
type="password"
|
|
171
|
+
filled
|
|
172
|
+
class="q-mb-md"
|
|
173
|
+
required
|
|
174
|
+
autocomplete="off"
|
|
175
|
+
>
|
|
176
|
+
<template v-slot:prepend>
|
|
177
|
+
<q-icon name="lock" />
|
|
178
|
+
</template>
|
|
179
|
+
</q-input>
|
|
180
|
+
</div>
|
|
181
|
+
|
|
182
|
+
<div class="col-12 col-sm-6">
|
|
183
|
+
<q-input
|
|
184
|
+
v-model="database"
|
|
185
|
+
label="Database Name"
|
|
186
|
+
filled
|
|
187
|
+
class="q-mb-md"
|
|
188
|
+
required
|
|
189
|
+
>
|
|
190
|
+
<template v-slot:prepend>
|
|
191
|
+
<q-icon name="database" />
|
|
192
|
+
</template>
|
|
193
|
+
</q-input>
|
|
194
|
+
</div>
|
|
195
|
+
|
|
196
|
+
<div class="col-12 col-sm-6">
|
|
197
|
+
<q-input
|
|
198
|
+
v-model="dbFolder"
|
|
199
|
+
label="Database Folder"
|
|
200
|
+
filled
|
|
201
|
+
class="q-mb-md"
|
|
202
|
+
required
|
|
203
|
+
>
|
|
204
|
+
<template v-slot:prepend>
|
|
205
|
+
<q-icon name="folder" />
|
|
206
|
+
</template>
|
|
207
|
+
</q-input>
|
|
208
|
+
</div>
|
|
209
|
+
</div>
|
|
210
|
+
</div>
|
|
211
|
+
</div>
|
|
212
|
+
</q-card-section>
|
|
213
|
+
|
|
214
|
+
<q-card-actions align="right" class="bg-white q-pa-md">
|
|
215
|
+
<q-btn
|
|
216
|
+
@click="closeSettings"
|
|
217
|
+
label="Cancel"
|
|
218
|
+
color="grey-7"
|
|
219
|
+
flat
|
|
220
|
+
class="q-px-md"
|
|
221
|
+
/>
|
|
222
|
+
<q-btn
|
|
223
|
+
@click="saveSettings"
|
|
224
|
+
label="Save Settings"
|
|
225
|
+
color="primary"
|
|
226
|
+
unelevated
|
|
227
|
+
class="q-px-md q-ml-sm"
|
|
228
|
+
/>
|
|
108
229
|
</q-card-actions>
|
|
109
230
|
</q-card>
|
|
110
231
|
</q-dialog>
|
|
@@ -881,14 +1002,47 @@ export default {
|
|
|
881
1002
|
}
|
|
882
1003
|
</script>
|
|
883
1004
|
|
|
884
|
-
<style>
|
|
885
|
-
.
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
|
|
1005
|
+
<style lang="scss">
|
|
1006
|
+
.database-tree {
|
|
1007
|
+
.q-tree__node-header {
|
|
1008
|
+
padding: 8px;
|
|
1009
|
+
border-radius: 4px;
|
|
1010
|
+
transition: background-color 0.3s;
|
|
1011
|
+
|
|
1012
|
+
&:hover {
|
|
1013
|
+
background-color: #f5f5f5;
|
|
1014
|
+
}
|
|
1015
|
+
}
|
|
1016
|
+
|
|
1017
|
+
.q-tree__node--selected > .q-tree__node-header {
|
|
1018
|
+
background-color: #e3f2fd;
|
|
1019
|
+
}
|
|
1020
|
+
|
|
1021
|
+
.q-tree__node--child {
|
|
1022
|
+
padding-left: 24px;
|
|
1023
|
+
}
|
|
1024
|
+
|
|
1025
|
+
.q-icon {
|
|
1026
|
+
font-size: 20px;
|
|
1027
|
+
}
|
|
1028
|
+
}
|
|
1029
|
+
|
|
1030
|
+
.q-card {
|
|
1031
|
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
1032
|
+
border-radius: 8px;
|
|
1033
|
+
}
|
|
1034
|
+
|
|
1035
|
+
.q-btn {
|
|
1036
|
+
border-radius: 8px;
|
|
1037
|
+
}
|
|
1038
|
+
|
|
1039
|
+
.text-h6 {
|
|
1040
|
+
font-weight: 500;
|
|
1041
|
+
letter-spacing: 0.25px;
|
|
1042
|
+
}
|
|
1043
|
+
|
|
1044
|
+
.q-page {
|
|
1045
|
+
max-width: 1400px;
|
|
1046
|
+
margin: 0 auto;
|
|
893
1047
|
}
|
|
894
1048
|
</style>
|