Last commit refactor settings to use shuttle and added cancel button

caesar-tauri-angular/src/app/components/receiver/receiver.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;

caesar-tauri-angular/src/app/components/receiver/receiver.component.html

@@ -2,10 +2,10 @@
 <p>Here you can receive Data</p>
 
 <div *ngIf="!isReceiving&& !receiveSuccess && !isRelayServerSet" class="form-group">
-  <label for="relayAddress">Relay Server Adresse:</label>
+  <label for="relayAddress">Relay Server Address:</label>
   <input type="text" id="relayAddress" [(ngModel)]="relayAddress" placeholder="::1">
 </div>
-<div *ngIf="!isReceiving&& !receiveSuccess && !isPortSet" class="form-group">
+<div *ngIf="!isReceiving&& !receiveSuccess && !isRelayServerSet" class="form-group">
   <label for="relayPort">Port:</label>
   <input type="text" id="relayPort" [(ngModel)]="relayPort" placeholder="8000">
 </div>
@@ -16,10 +16,14 @@
   </div>
 
 <div *ngIf="!isReceiving&& !receiveSuccess" class="form-group">
-  <button (click)="receiveData()">Daten empfangen</button>
+  <button (click)="receiveData()">Receive Data</button>
 </div>
 <div *ngIf="!isReceiving&& !receiveSuccess" class="form-group">
-  <button (click)="redirectToHome()">Startseite</button>
+  <button (click)="redirectToHome()">Home</button>
+</div>
+
+<div *ngIf="isReceiving" class="form-group">
+  <button class="cancel-button" (click)="reset()">Cancel</button>
 </div>
 
 <div>

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')
     }
-    console.log("Moin")
+    if(this.storage.getLocalEntry('relayServer') === 'wss://caesar-transfer-iu.shuttleapp.rs') {
+        this.isUsingShuttle = true;
+      }
+    }
 }
   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();

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;

caesar-tauri-angular/src/app/components/sender/sender.component.html

@@ -6,7 +6,7 @@
   <label for="relayAddress">Relay Server Adresse:</label>
   <input type="text" id="relayAddress" [(ngModel)]="relayAddress" placeholder="::1">
 </div>
-<div *ngIf="!sendingInProgress && !sendingSuccess && !isPortSet" class="form-group">
+<div *ngIf="!sendingInProgress && !sendingSuccess && !isRelayServerSet" class="form-group">
   <label for="relayPort">Port:</label>
   <input type="text" id="relayPort" [(ngModel)]="relayPort" placeholder="8000">
 </div>
@@ -25,6 +25,11 @@
 <div *ngIf="!sendingInProgress && !sendingSuccess" class="form-group">
   <button (click)="redirectToHome()">Startseite</button>
 </div>
+
+<div *ngIf="sendingInProgress" class="form-group">
+  <button class="cancel-button" (click)="reset()">Cancel</button>
+</div>
+
 <div *ngIf="sendingInProgress">
   <p>Sending files... Transfer Name: {{ transferName }}</p>
 </div>

caesar-tauri-angular/src/app/components/sender/sender.component.ts

@@ -22,7 +22,7 @@ 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();
@@ -32,12 +32,13 @@ export class SenderComponent 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')
     }
-    console.log("Moin")
+    if(this.storage.getLocalEntry('relayServer') === 'wss://caesar-transfer-iu.shuttleapp.rs') {
+        this.isUsingShuttle = true;
+      }
+    }
 }
 
   redirectToHome() {
@@ -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) {

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;
 }

caesar-tauri-angular/src/app/components/settings-menu/settings-menu.component.html

@@ -4,13 +4,17 @@
     </div>
     <div class="burger-menu-menu" [ngClass]="{'show': menuVisible}">
         <h2>Einstellungen</h2>
+        
+        <div *ngIf="!settings.useShuttleServer">
             <label for="variable1">Relayserver Address:</label>
             <input type="text" id="variable1" [(ngModel)]="settings.relayServer">
         
             <label for="variable2">Port:</label>
             <input type="number" id="variable2" [(ngModel)]="settings.port">
-
-        
+        </div>
+        <label>
+            <input type="checkbox" [(ngModel)]="settings.useShuttleServer"> Shuttleserver nutzen
+        </label>
         <button class="save-button" (click)="saveSettings()">Save Settings</button>
         <button class="reset-button" (click)="resetSettings()">Reset Settings</button>
     </div>

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;
   }