Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/update web gui #35

Merged
merged 2 commits into from
Aug 26, 2024
Merged

Feature/update web gui #35

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
716f240
merge : 통합과정
heedaeshin Aug 26, 2024
e30b7b7
Merge branch 'main' of https://github.com/cloud-barista/mc-data-manag…
heedaeshin Aug 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
85 changes: 47 additions & 38 deletions web/css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@charset "UTF-8";

/*!
* Start Bootstrap - SB Admin v7.0.7 (https://startbootstrap.com/template/sb-admin)
* Copyright 2013-2023 Start Bootstrap
Expand All @@ -10,6 +11,10 @@
* Copyright 2011-2022 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/
/* @import url('./font.css'); */
@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css);


:root {
--bs-blue: #0d6efd;
--bs-indigo: #6610f2;
Expand Down Expand Up @@ -49,15 +54,15 @@
--bs-warning-rgb: 255, 193, 7;
--bs-danger-rgb: 220, 53, 69;
--bs-light-rgb: 248, 249, 250;
--bs-dark-rgb: 33, 37, 41;
--bs-dark-rgb: 228, 143, 0;
--bs-white-rgb: 255, 255, 255;
--bs-black-rgb: 0, 0, 0;
--bs-body-color-rgb: 33, 37, 41;
--bs-body-bg-rgb: 255, 255, 255;
--bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--bs-font-monospace: 'Spoqa Han Sans Neo', sans-serif, 'MeiryoUI', 'YaHei', Arial;
--bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
--bs-body-font-family: var(--bs-font-sans-serif);
--bs-body-font-family: var(--bs-font-monospace);
--bs-body-font-size: 1rem;
--bs-body-font-weight: 400;
--bs-body-line-height: 1.5;
Expand All @@ -77,6 +82,8 @@
--bs-link-hover-color: #0a58ca;
--bs-code-color: #d63384;
--bs-highlight-bg: #fff3cd;
--bs-nav-bg: #E48F00;
--bs-nav-footer-bg: #F9AA25;
}

*,
Expand Down Expand Up @@ -2004,7 +2011,6 @@ progress {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 0.375rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
Expand Down Expand Up @@ -2156,7 +2162,7 @@ textarea.form-control-lg {
background-position: right 0.75rem center;
background-size: 16px 12px;
border: 1px solid #ced4da;
border-radius: 0.375rem;
/* border-radius: 0.375rem; */
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-webkit-appearance: none;
-moz-appearance: none;
Expand Down Expand Up @@ -2189,7 +2195,7 @@ textarea.form-control-lg {
padding-bottom: 0.25rem;
padding-left: 0.5rem;
font-size: 0.875rem;
border-radius: 0.25rem;
/* border-radius: 0.25rem; */
}

.form-select-lg {
Expand Down Expand Up @@ -2239,7 +2245,7 @@ textarea.form-control-lg {
print-color-adjust: exact;
}
.form-check-input[type=checkbox] {
border-radius: 0.25em;
/* border-radius: 0.25em; */
}
.form-check-input[type=radio] {
border-radius: 50%;
Expand Down Expand Up @@ -2539,7 +2545,6 @@ textarea.form-control-lg {
white-space: nowrap;
background-color: #e9ecef;
border: 1px solid #ced4da;
border-radius: 0.375rem;
}

.input-group-lg > .form-control, .input-group-lg > .datatable-input,
Expand Down Expand Up @@ -2813,7 +2818,7 @@ textarea.form-control-lg {
-moz-user-select: none;
user-select: none;
border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
border-radius: var(--bs-btn-border-radius);
/* border-radius: var(--bs-btn-border-radius); */
background-color: var(--bs-btn-bg);
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
Expand Down Expand Up @@ -2862,19 +2867,19 @@ textarea.form-control-lg {

.btn-primary {
--bs-btn-color: #fff;
--bs-btn-bg: #0d6efd;
--bs-btn-border-color: #0d6efd;
--bs-btn-bg: #E48F00;
--bs-btn-border-color: #E48F00;
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #0b5ed7;
--bs-btn-hover-border-color: #0a58ca;
--bs-btn-hover-bg: #B97400;
--bs-btn-hover-border-color: #985F00;
--bs-btn-focus-shadow-rgb: 49, 132, 253;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: #0a58ca;
--bs-btn-active-border-color: #0a53be;
--bs-btn-active-bg: #985F00;
--bs-btn-active-border-color: #B97400;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #fff;
--bs-btn-disabled-bg: #0d6efd;
--bs-btn-disabled-border-color: #0d6efd;
--bs-btn-disabled-bg: #E48F00;
--bs-btn-disabled-border-color: #E48F00;
}

.btn-secondary {
Expand Down Expand Up @@ -4192,7 +4197,6 @@ textarea.form-control-lg {
background-color: var(--bs-card-bg);
background-clip: border-box;
border: var(--bs-card-border-width) solid var(--bs-card-border-color);
border-radius: var(--bs-card-border-radius);
}
.card > hr {
margin-right: 0;
Expand Down Expand Up @@ -4247,9 +4251,6 @@ textarea.form-control-lg {
background-color: var(--bs-card-cap-bg);
border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color);
}
.card-header:first-child {
border-radius: var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0;
}

.card-footer {
padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
Expand Down Expand Up @@ -4437,23 +4438,23 @@ textarea.form-control-lg {
border: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color);
}
.accordion-item:first-of-type {
border-top-left-radius: var(--bs-accordion-border-radius);
border-top-right-radius: var(--bs-accordion-border-radius);
/* border-top-left-radius: var(--bs-accordion-border-radius);
border-top-right-radius: var(--bs-accordion-border-radius); */
}
.accordion-item:first-of-type .accordion-button {
border-top-left-radius: var(--bs-accordion-inner-border-radius);
border-top-right-radius: var(--bs-accordion-inner-border-radius);
/* border-top-left-radius: var(--bs-accordion-inner-border-radius);
border-top-right-radius: var(--bs-accordion-inner-border-radius); */
}
.accordion-item:not(:first-of-type) {
border-top: 0;
}
.accordion-item:last-of-type {
border-bottom-right-radius: var(--bs-accordion-border-radius);
border-bottom-left-radius: var(--bs-accordion-border-radius);
/* border-bottom-right-radius: var(--bs-accordion-border-radius);
border-bottom-left-radius: var(--bs-accordion-border-radius); */
}
.accordion-item:last-of-type .accordion-button.collapsed {
border-bottom-right-radius: var(--bs-accordion-inner-border-radius);
border-bottom-left-radius: var(--bs-accordion-inner-border-radius);
/* border-bottom-right-radius: var(--bs-accordion-inner-border-radius);
border-bottom-left-radius: var(--bs-accordion-inner-border-radius); */
}
.accordion-item:last-of-type .accordion-collapse {
border-bottom-right-radius: var(--bs-accordion-border-radius);
Expand Down Expand Up @@ -4650,7 +4651,6 @@ textarea.form-control-lg {
color: var(--bs-alert-color);
background-color: var(--bs-alert-bg);
border: var(--bs-alert-border);
border-radius: var(--bs-alert-border-radius);
}

.alert-heading {
Expand Down Expand Up @@ -10927,7 +10927,11 @@ body {
padding-top: 56px;
}
.sb-nav-fixed #layoutSidenav #layoutSidenav_nav .sb-sidenav .sb-sidenav-menu {
overflow-y: auto;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.sb-nav-fixed #layoutSidenav #layoutSidenav_nav .sb-sidenav .sb-sidenav-menu::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera*/
}
.sb-nav-fixed #layoutSidenav #layoutSidenav_content {
padding-left: 225px;
Expand Down Expand Up @@ -11016,23 +11020,24 @@ body {
.sb-sidenav .sb-sidenav-footer {
padding: 0.75rem;
flex-shrink: 0;
white-space: nowrap;
}

.sb-sidenav-dark {
background-color: #212529;
color: rgba(255, 255, 255, 0.5);
background-color: var(--bs-nav-bg);
color: rgba(255, 255, 255, 0.7);
}
.sb-sidenav-dark .sb-sidenav-menu .sb-sidenav-menu-heading {
color: rgba(255, 255, 255, 0.25);
color: rgba(255, 255, 255, 0.5);
}
.sb-sidenav-dark .sb-sidenav-menu .nav-link {
color: rgba(255, 255, 255, 0.5);
color: rgba(255, 255, 255, 0.7);
}
.sb-sidenav-dark .sb-sidenav-menu .nav-link .sb-nav-link-icon {
color: rgba(255, 255, 255, 0.25);
color: rgba(255, 255, 255, 0.5);
}
.sb-sidenav-dark .sb-sidenav-menu .nav-link .sb-sidenav-collapse-arrow {
color: rgba(255, 255, 255, 0.25);
color: rgba(255, 255, 255, 0.5);
}
.sb-sidenav-dark .sb-sidenav-menu .nav-link:hover {
color: #fff;
Expand All @@ -11044,7 +11049,7 @@ body {
color: #fff;
}
.sb-sidenav-dark .sb-sidenav-footer {
background-color: #343a40;
background-color: var(--bs-nav-footer-bg);
}

.sb-sidenav-light {
Expand Down Expand Up @@ -11240,4 +11245,8 @@ body {
width: 20px !important;
font-size: 0.75rem;
border-radius: 0.375rem !important;
}

.data-txt {
background-color: var(--bs-gray-800);
}
43 changes: 43 additions & 0 deletions web/js/scripts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,9 @@ window.addEventListener('DOMContentLoaded', event => {
if (document.getElementById('migForm')) {
migrationFormSubmit();
}
if (document.getElementById('backForm')) {
backUpFormSubmit();
}

});

Expand Down Expand Up @@ -123,6 +126,46 @@ function migrationFormSubmit() {
});
}

function backUpFormSubmit() {
const form = document.getElementById('backForm');

form.addEventListener('submit', (e) => {
e.preventDefault();
loadingButtonOn();
resultCollpase();

const payload = new FormData(form);
const dest = document.getElementById('backDest').value;
const source = document.getElementById('backSource').value;
let url = "/backup/" + source;

console.log(url);

fetch(url, {
method: 'POST',
body: payload
})
.then(response => {
return response.json();
})
.then(json => {
const resultText = document.getElementById('resultText');
resultText.value = json.Result;
console.log(json);
console.log("backup done.");
})
.catch(reason => {
console.log(reason);
alert(reason);
})
.finally(() => {
loadingButtonOff();
});

console.log("backup progressing...");
});
}

function loadingButtonOn() {
let btn = document.getElementById('submitBtn');
btn.disabled = true;
Expand Down
57 changes: 57 additions & 0 deletions web/templates/back-backup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
<h1 class="mt-4">백업</h1>
<ol class="breadcrumb mb-4">
<li class="breadcrumb-item">백업</li>
<li class="breadcrumb-item active">Back Up</li>
</ol>

<div class="card mb-4 col-auto">
<div class="card-header">
<i class="fa-solid fa-clone"></i>
Back Up
</div>
<div class="card-body">
<!-- <form action="/backup" method="POST"> -->
<form id="backForm">
<input type="hidden" id="backSource" value="backup">
<input type="hidden" id="backDest" value="backup">

<label for="back-mysql-srcHost" class="form-label">Back Up</label>

<div class="input-group mb-3">
<span class="input-group-text"><i class="fa-solid fa-cloud"></i></span>
<select class="form-select" id="srcProvider" name="srcProvider">
<option value="aws">AWS</option>
<option value="gcp">GCP</option>
<option value="ncp">NCP</option>
<option value="on-premise">On-premise</option>
</select>
</div>

<div class="input-group mb-3">
<span class="input-group-text"><i class="fa-solid fa-house"></i></span>
<div class="form-floating">
<input type="text" class="form-control" id="back-mysql-srcHost" name="srcHost" placeholder="호스트명 / IP" required>
<label for="back-mysql-host">호스트명 / IP</label>
</div>
</div>

<div class="input-group mb-3">
<span class="input-group-text"><i class="fa-solid fa-flag"></i></span>
<div class="form-floating">
<input type="text" class="form-control" id="back-mysql-srcPort" name="srcPort" placeholder="포트" required>
<label for="back-mysql-port">포트</label>
</div>
</div>

<div class="input-group mb-3">
<span class="input-group-text"><i class="fa-solid fa-user"></i></span>
<div class="form-floating">
<input type="text" class="form-control" id="back-mysql-srcUsername" name="srcUsername" placeholder="사용자" required>
<label for="back-mysql-username">사용자</label>
</div>
</div>

<button type="submit" class="btn btn-primary" id="submitBtn">실행</button>
</form>
</div>
</div>
9 changes: 9 additions & 0 deletions web/templates/content.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,11 @@
{{ if eq .Content "Generate-MongoDB" }}
{{ template "gen-mongodb.html" . }}
{{ end }}
<!-- 백업 템플릿 -->

{{ if eq .Content "Backup" }}
{{ template "back-backup.html" . }}
{{ end }}

<!-- 마이그레이션 템플릿 -->

Expand Down Expand Up @@ -153,6 +157,11 @@
{{ if eq .Content "Migration-MongoDB-Firestore" }}
{{ template "mig-mongodbToFirestore.html" . }}
{{ end }}

<!-- 백업 템플릿 -->
{{ if eq .Content "BackUp" }}
{{ template "back-backup.html" . }}
{{ end }}

{{ if ne .Content "main" }}
{{ template "result.html" . }}
Expand Down
2 changes: 1 addition & 1 deletion web/templates/gen-data.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
<input class="form-check-input" type="checkbox" id="checkTXT" name="checkTXT">
<!-- <label class="form-check-label" for="checkTXT">TXT</label> -->
<div class="input-group mb-3">
<span class="input-group-text bg-dark text-light">TXT</span>
<span class="input-group-text data-txt text-light">TXT</span>
<input type="number" class="form-control" id="sizeTXT" name="sizeTXT" value="10" min="1" style="width: 60px;">
<span class="input-group-text bg-light">GB</span>
</div>
Expand Down
Loading