Added more SMMDB UI parts

Author: jonbarrow

app.js

@@ -763,12 +763,14 @@ ipcMain.on('smm_upload_course', async (event, data) => {
 			});
 			return;
 		}
+		/*
 		dialog.showMessageBox(ApplicationWindow, {
 			type: 'info',
 			title: 'CemUI SMMDB',
 			message: 'Course uploaded to SMMDB',
 			detail: 'Course uploaded successfully. Course ID: ' + course_data[0].id
 		});
+		*/
 		logger.log({
 			level: 'info',
 			message: 'upload course to SMMDB: ' + JSON.stringify(course_data)

app/wrapper/css/main.css

@@ -1219,4 +1219,70 @@ END OF THINGS RIPPED FROM NINTENDO BOOKMARK SITE
     border-width: 0 2px 2px 0;
     -webkit-transform: rotate(45deg);
             transform: rotate(45deg);
+}
+
+.smm-modal {
+    color: whitesmoke;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.3);
+    z-index: 99999;
+}
+.smm-modal .modal-content {
+    border-radius: 15px;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 80%;
+    height: 35%;
+    min-height: 100px;
+    max-height: 386px;
+    background-color: rgb(47, 145, 25);
+    background-image: -webkit-linear-gradient(110deg, #2F9119 50%, #1B9119 50%);
+    background-color: rgb(47, 145, 25);
+    box-shadow: inset 0 0 0 10px #2F7D2D;
+}
+.smm-modal .modal-content > * {
+    padding-left: 10px;
+}
+.smm-modal .modal-content .smm-header {
+    padding-top: 20px;
+    padding-left: 20px;
+    font-size: 20px;
+    width: 100%;
+}
+.smm-modal .modal-content .smm-header .smm-close {
+    float: left;
+    padding-right: 20px;
+    cursor: pointer;
+}
+.smm-modal .modal-content .smm-body {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+}
+.smm-modal .modal-content .smm-body h1 {
+    margin: 10px 20px;
+}
+.smm-modal .modal-content .smm-body input[type="text"] {
+    color: #33FF00;
+    height: 100%;
+    padding: 18px 40px;
+    background-color: #187402;
+    border: none;
+    border-radius: 5px;
+    margin: 0 20px;
+    box-shadow: 0px 6px 0px 0px rgba(1,1,1,0.1);
+    width: auto;
+}
+.smm-modal .modal-content .smm-body input[type="text"]::-webkit-input-placeholder {
+    color: #33FF00;
+}
+.smm-modal .modal-content .smm-body input[type="text"]:focus, .smm-modal .modal-content .smm-body input[type="text"]:active {
+    outline: none;
+    border-color: #31812E;
+    background-color: #2F7D2D;
 }

app/wrapper/index.html

@@ -189,6 +189,32 @@ <h1 id="smm-toggle-player-courses" class="txt-button txt-s-24 txt-c-yellow txt-f
                         <h1 class="txt-button close txt-s-24 txt-c-yellow txt-font-smm" onclick="toggleSMMDB();">Exit</h1>
                     </div>
                 </div>
+                <div class="smm-modal hidden" id="smm-modal-id-download">
+                    <div class="modal-content">
+                        <div class="smm-header">
+                            <span class="smm-close">
+                                <i class="fa fa-times" aria-hidden="true"></i>
+                            </span>
+                        </div>
+                        <div class="smm-body">
+                            <input type="text" placeholder="Course ID..." class="txt-s-24 txt-c-yellow">
+                            <h1 class="smm-id-download txt-button txt-button txt-button-white txt-s-24 txt-c-black txt-font-smm">Download</h1>            
+                        </div>
+                    </div>
+                </div>
+                <div class="smm-modal hidden" id="smm-modal-course-uploaded">
+                    <div class="modal-content">
+                        <div class="smm-header">
+                            <span>Course Uploaded</span>
+                            <span class="smm-close">
+                                <i class="fa fa-times" aria-hidden="true"></i>
+                            </span>
+                        </div>
+                        <div class="smm-body">
+                            <input size="24" readonly value="5a0651baf9a2186f20764bdf" type="text" placeholder="Course ID..." class="txt-s-24 txt-c-yellow">
+                        </div>
+                    </div>
+                </div>
                 <div id="smm-wrapper" class="wrapper">
                     <div class="colm"></div>
                     <div class="colm"></div>

app/wrapper/js/main.js

@@ -214,6 +214,10 @@ function toggleSMMDB() {
     }
 }
 
+function toggleSMMDBIDDownloadModal() {
+    document.querySelector('#smm-modal-id-download').classList.remove('hidden');
+}
+
 function toggleSMMDBPlayerCourses() {
     var el = document.getElementById('smm-wrapper-player-courses');
     if (el.classList.contains('hidden')) {
@@ -473,6 +477,16 @@ addEvent(document.querySelector('.instance_add.emulator_instances'), 'click', ()
     );
 });
 
+addEvent(document.querySelectorAll('.smm-close')[0], 'click', () => {
+    document.querySelectorAll('.smm-close')[0].parentElement.parentElement.parentElement.classList.add('hidden');
+});
+addEvent(document.querySelectorAll('.smm-close')[1], 'click', () => {
+    document.querySelectorAll('.smm-close')[1].parentElement.parentElement.parentElement.classList.add('hidden');
+});
+addEvent(document.querySelector('.smm-id-download'), 'click', () => {
+    ipcRenderer.send('smm_dl_level', document.querySelector('.smm-id-download').parentElement.querySelector('input').value);
+});
+
 function openScreen(id) {
     var el = document.getElementById(id);
     el.classList.remove('closed');
@@ -830,6 +844,12 @@ function setIPCevents() {
         }
     });
 
+    ipcRenderer.on('smm_course_uploaded', (event, data) => {
+        document.querySelector('#smm-modal-course-uploaded').querySelector('input').value = data.id;
+        document.querySelector('#smm-modal-course-uploaded').querySelector('input').size = data.id.length;
+        document.querySelector('#smm-modal-course-uploaded').classList.remove('hidden');
+    });
+
     ipcRenderer.on('rom_decryption_missing', () => {
         document.querySelector('#popup1').classList.remove('hidden');
     });