From 3f108d139305194ee21a56ecb5522d6e383a8e2d Mon Sep 17 00:00:00 2001 From: Manuel Date: Wed, 29 May 2024 09:47:35 +0200 Subject: [PATCH] Last commit refactor settings to use shuttle and added cancel button --- .../receiver/receiver.component.css | 17 ++++- .../receiver/receiver.component.html | 12 ++-- .../components/receiver/receiver.component.ts | 15 ++-- .../components/sender/sender.component.css | 15 ++++ .../components/sender/sender.component.html | 7 +- .../app/components/sender/sender.component.ts | 31 +++++---- .../settings-menu/settings-menu.component.css | 69 ++++++++----------- .../settings-menu.component.html | 16 +++-- .../settings-menu/settings-menu.component.ts | 9 +++ 9 files changed, 119 insertions(+), 72 deletions(-) diff --git a/caesar-tauri-angular/src/app/components/receiver/receiver.component.css b/caesar-tauri-angular/src/app/components/receiver/receiver.component.css index a4d41f3..02c21c4 100644 --- a/caesar-tauri-angular/src/app/components/receiver/receiver.component.css +++ b/caesar-tauri-angular/src/app/components/receiver/receiver.component.css @@ -39,11 +39,26 @@ h2 { border-radius: 4px; cursor: pointer; } - + button:hover { background-color: #0056b3; } + .cancel-button { + padding: 10px 20px; + margin: 10px; + font-size: 1em; + color: #fff; + background-color: #ff0000; + border: none; + border-radius: 4px; + cursor: pointer; + } + + .cancel-button:hover { + background-color: #d40000; + } + ul { list-style-type: none; diff --git a/caesar-tauri-angular/src/app/components/receiver/receiver.component.html b/caesar-tauri-angular/src/app/components/receiver/receiver.component.html index 1113ec7..89c7600 100644 --- a/caesar-tauri-angular/src/app/components/receiver/receiver.component.html +++ b/caesar-tauri-angular/src/app/components/receiver/receiver.component.html @@ -2,10 +2,10 @@

Here you can receive Data

- +
-
+
@@ -16,10 +16,14 @@
- +
- + +
+ +
+
diff --git a/caesar-tauri-angular/src/app/components/receiver/receiver.component.ts b/caesar-tauri-angular/src/app/components/receiver/receiver.component.ts index a0b7710..4ce52f1 100644 --- a/caesar-tauri-angular/src/app/components/receiver/receiver.component.ts +++ b/caesar-tauri-angular/src/app/components/receiver/receiver.component.ts @@ -17,7 +17,7 @@ export class ReceiverComponent implements OnInit { relayPort?: number; transferName: string = ''; isRelayServerSet = false; - isPortSet = false; + isUsingShuttle = false; isReceiving = false; receiveSuccess = false; constructor(private tauriService: TauriService, private router: Router, private storage: StorageService) {} @@ -25,12 +25,13 @@ export class ReceiverComponent implements OnInit { if(this.storage.getLocalEntry('relayServer')) { this.isRelayServerSet = true; this.relayAddress = this.storage.getLocalEntry('relayServer') - } if(this.storage.getLocalEntry('port')) { - this.isPortSet = true; - this.relayPort = this.storage.getLocalEntry('port') + this.relayPort = this.storage.getLocalEntry('port') + } + if(this.storage.getLocalEntry('relayServer') === 'wss://caesar-transfer-iu.shuttleapp.rs') { + this.isUsingShuttle = true; + } } - console.log("Moin") } redirectToHome() { this.router.navigate(['']) @@ -41,7 +42,11 @@ export class ReceiverComponent implements OnInit { this.transferName = ''; } getRelayURL(): string { + if(!this.isUsingShuttle) { return `ws://${this.relayAddress}:${this.relayPort}`; + } else { + return `${this.relayAddress}` + } } receiveData() { const relay = this.getRelayURL(); diff --git a/caesar-tauri-angular/src/app/components/sender/sender.component.css b/caesar-tauri-angular/src/app/components/sender/sender.component.css index a4d41f3..69dcf03 100644 --- a/caesar-tauri-angular/src/app/components/sender/sender.component.css +++ b/caesar-tauri-angular/src/app/components/sender/sender.component.css @@ -44,6 +44,21 @@ h2 { background-color: #0056b3; } + .cancel-button { + padding: 10px 20px; + margin: 10px; + font-size: 1em; + color: #fff; + background-color: #ff0000; + border: none; + border-radius: 4px; + cursor: pointer; + } + + .cancel-button:hover { + background-color: #d40000; + } + ul { list-style-type: none; diff --git a/caesar-tauri-angular/src/app/components/sender/sender.component.html b/caesar-tauri-angular/src/app/components/sender/sender.component.html index 9010824..edb1fd5 100644 --- a/caesar-tauri-angular/src/app/components/sender/sender.component.html +++ b/caesar-tauri-angular/src/app/components/sender/sender.component.html @@ -6,7 +6,7 @@
-
+
@@ -25,6 +25,11 @@
+ +
+ +
+

Sending files... Transfer Name: {{ transferName }}

diff --git a/caesar-tauri-angular/src/app/components/sender/sender.component.ts b/caesar-tauri-angular/src/app/components/sender/sender.component.ts index 3bae1b2..e660c07 100644 --- a/caesar-tauri-angular/src/app/components/sender/sender.component.ts +++ b/caesar-tauri-angular/src/app/components/sender/sender.component.ts @@ -22,23 +22,24 @@ export class SenderComponent implements OnInit { sendingInProgress = false; sendingSuccess = false; isRelayServerSet = false; - isPortSet = false; + isUsingShuttle = false; transferName: string = ""; constructor(private tauriService: TauriService, private router: Router, private cdr: ChangeDetectorRef, private storage: StorageService) { this.listenToTransferEvents(); } ngOnInit(): void { - if(this.storage.getLocalEntry('relayServer')) { - this.isRelayServerSet = true; - this.relayAddress = this.storage.getLocalEntry('relayServer') + if(this.storage.getLocalEntry('relayServer')) { + this.isRelayServerSet = true; + this.relayAddress = this.storage.getLocalEntry('relayServer') + if(this.storage.getLocalEntry('port')) { + this.relayPort = this.storage.getLocalEntry('port') + } + if(this.storage.getLocalEntry('relayServer') === 'wss://caesar-transfer-iu.shuttleapp.rs') { + this.isUsingShuttle = true; } - if(this.storage.getLocalEntry('port')) { - this.isPortSet = true; - this.relayPort = this.storage.getLocalEntry('port') - } - console.log("Moin") - } + } +} redirectToHome() { this.router.navigate(['']) @@ -69,10 +70,14 @@ export class SenderComponent implements OnInit { } - getRelayURL(): string { - return `ws://${this.relayAddress}:${this.relayPort}`; - } + getRelayURL(): string { + if(!this.isUsingShuttle) { + return `ws://${this.relayAddress}:${this.relayPort}`; + } else { + return `${this.relayAddress}` + } + } sendData() { const relay = this.getRelayURL(); if (this.files.length > 0) { diff --git a/caesar-tauri-angular/src/app/components/settings-menu/settings-menu.component.css b/caesar-tauri-angular/src/app/components/settings-menu/settings-menu.component.css index cb4052d..abf0cdb 100644 --- a/caesar-tauri-angular/src/app/components/settings-menu/settings-menu.component.css +++ b/caesar-tauri-angular/src/app/components/settings-menu/settings-menu.component.css @@ -43,12 +43,11 @@ body { .burger-menu { position: relative; - width: 100%; } .burger-icon { - font-size: 30px; cursor: pointer; + font-size: 24px; } .burger-menu-menu { @@ -56,66 +55,52 @@ body { position: absolute; top: 40px; left: 0; - background-color: white; - box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); - z-index: 1; - width: 250px; - padding: 16px; - border-radius: 8px; - box-sizing: border-box; + background: rgb(118, 118, 118); + border: 1px solid #8a8989; + padding: 20px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + width: 300px; } .burger-menu-menu.show { display: block; } -.burger-menu-menu h2 { - margin-top: 0; - color: #333; +.checkbox-container { + margin-bottom: 20px; } -.burger-menu-menu label, .burger-menu-menu input, .burger-menu-menu select { +.checkbox-container input { + margin-right: 10px; +} + +label { display: block; - width: 100%; margin-bottom: 10px; +} + +input[type="text"], +input[type="number"] { + width: 100%; + padding: 8px; + margin-bottom: 20px; box-sizing: border-box; } -.burger-menu-menu label { - color: #333; -} - -.burger-menu-menu input, .burger-menu-menu select { - padding: 8px; - border: 1px solid #ccc; - border-radius: 4px; +button { + padding: 10px 15px; + margin-right: 10px; + cursor: pointer; } .save-button { - width: 100%; - padding: 10px; background-color: #4CAF50; - color: #fff; + color: rgb(255, 255, 255); border: none; - border-radius: 4px; - cursor: pointer; -} - -.save-button:hover { - background-color: #45a049; } .reset-button { - padding-top: 2rem; - width: 100%; - padding: 10px; - background-color: #ff0000; - color: #fff; + background-color: #f44336; + color: white; border: none; - border-radius: 4px; - cursor: pointer; -} - -.reset-button:hover { - background-color: #da1e1e; } diff --git a/caesar-tauri-angular/src/app/components/settings-menu/settings-menu.component.html b/caesar-tauri-angular/src/app/components/settings-menu/settings-menu.component.html index d347366..86f35f3 100644 --- a/caesar-tauri-angular/src/app/components/settings-menu/settings-menu.component.html +++ b/caesar-tauri-angular/src/app/components/settings-menu/settings-menu.component.html @@ -4,14 +4,18 @@

Einstellungen

- - - - - +
+ + + + +
+
- + \ No newline at end of file diff --git a/caesar-tauri-angular/src/app/components/settings-menu/settings-menu.component.ts b/caesar-tauri-angular/src/app/components/settings-menu/settings-menu.component.ts index 8576bbe..8d4baf2 100644 --- a/caesar-tauri-angular/src/app/components/settings-menu/settings-menu.component.ts +++ b/caesar-tauri-angular/src/app/components/settings-menu/settings-menu.component.ts @@ -17,6 +17,7 @@ export class SettingsMenuComponent implements OnInit { settings = { relayServer: '', port: 0, + useShuttleServer: false }; ngOnInit(): void { @@ -26,6 +27,9 @@ export class SettingsMenuComponent implements OnInit { if(this.storage.getLocalEntry('port')) { this.settings.port = this.storage.getLocalEntry('port'); } + if(this.storage.getLocalEntry('useShuttleServer') === true) { + this.settings.useShuttleServer = true; + } } toggleMenu(): void { @@ -33,8 +37,13 @@ export class SettingsMenuComponent implements OnInit { } saveSettings(): void { + if(this.settings.useShuttleServer === true) { + this.storage.setLocalEntry('relayServer', 'wss://caesar-transfer-iu.shuttleapp.rs') + this.storage.setLocalEntry('useShuttleServer', this.settings.useShuttleServer) + } else { this.storage.setLocalEntry('relayServer', this.settings.relayServer) this.storage.setLocalEntry('port', this.settings.port) + } alert("The settings have been saved!"); this.menuVisible = !this.menuVisible; }