Merge pull request #35 from cloud-barista/feature/update-web-gui

Feature/update web gui
cloud-barista · Aug 26, 2024 · e53ab87 · e53ab87
2 parents 90cb38e + e30b7b7
commit e53ab87
Show file tree

Hide file tree

Showing 13 changed files with 619 additions and 45 deletions.
diff --git a/web/css/styles.css b/web/css/styles.css
@@ -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
@@ -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;
@@ -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;
@@ -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;
 }
 
 *,
@@ -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) {
@@ -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;
@@ -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 {
@@ -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%;
@@ -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,
@@ -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;
 }
@@ -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 {
@@ -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;
@@ -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);
@@ -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);
@@ -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 {
@@ -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;
@@ -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;
@@ -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 {
@@ -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);
 }
diff --git a/web/js/scripts.js b/web/js/scripts.js
@@ -29,6 +29,9 @@ window.addEventListener('DOMContentLoaded', event => {
     if (document.getElementById('migForm')) {
         migrationFormSubmit();
     }
+    if (document.getElementById('backForm')) {
+        backUpFormSubmit();
+    }
 
 });
 
@@ -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;

diff --git a/web/templates/back-backup.html b/web/templates/back-backup.html
@@ -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>
diff --git a/web/templates/content.html b/web/templates/content.html
@@ -42,7 +42,11 @@
             {{ if eq .Content "Generate-MongoDB" }}
                 {{ template "gen-mongodb.html" . }}
             {{ end }}
+            <!-- 백업 템플릿 -->
 
+            {{ if eq .Content "Backup" }}
+                {{ template "back-backup.html" . }}
+            {{ end }}
 
             <!-- 마이그레이션 템플릿 -->
 
@@ -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" . }}

diff --git a/web/templates/gen-data.html b/web/templates/gen-data.html
@@ -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>