added more options for cloud apps

revenz · May 18, 2023 · 163ee33 · 163ee33
1 parent d48846a
commit 163ee33
Show file tree

Hide file tree

Showing 10 changed files with 151 additions and 33 deletions.
diff --git a/Components/Dialogs/IconPickerDialog/IconPickerDialog.razor b/Components/Dialogs/IconPickerDialog/IconPickerDialog.razor
@@ -5,7 +5,7 @@
     <Head>
         <div class="header">
             <span>@Title</span>
-            <input placeholder="Filter" type="text" value="@Filter" @oninput="(e) => Filter = e.Value.ToString()"/>
+            <input id="@Uid" placeholder="Filter" type="text" value="@Filter" @oninput="(e) => Filter = e.Value.ToString()"/>
         </div>
     </Head>
     <Body>

diff --git a/Components/Dialogs/IconPickerDialog/IconPickerDialog.razor.cs b/Components/Dialogs/IconPickerDialog/IconPickerDialog.razor.cs
@@ -1,6 +1,8 @@
 using Fenrus.Models;
+using Fenrus.Pages;
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
+using Microsoft.JSInterop;
 
 namespace Fenrus.Components.Dialogs;
 
@@ -37,12 +39,28 @@ public partial class IconPickerDialog: ComponentBase
 
     private List<AppIcon> Apps;
 
+    /// <summary>
+    /// A unique identifier for the filter text input
+    /// </summary>
+    private readonly string Uid = Guid.NewGuid().ToString();
+
+    /// <summary>
+    /// Gets or sets the javascript runtime
+    /// </summary>
+    [Inject]
+    public IJSRuntime JsRuntime { get; set; }
+
+    /// <summary>
+    /// If the filter needs to be focused
+    /// </summary>
+    private bool focusFilter = false;
+
     /// <summary>
     /// Initializes the component
     /// </summary>
     protected override void OnInitialized()
     {
-        Apps = AppService.Apps.Values.OrderBy(x => x.Name.ToLowerInvariant()).Select(x =>
+        Apps = AppService.Apps.Values.Select(x =>
             new AppIcon()
             {
                 Name = x.Name,
@@ -57,12 +75,28 @@ protected override void OnInitialized()
                 Url = "/images/icons/" + file.Name
             });
         }
+
+        Apps = Apps.OrderBy(x => x.Name.ToLowerInvariant()).ToList();
+
         this.lblOk = Translator.Instant("Labels.Ok");
         this.lblCancel = Translator.Instant("Labels.Cancel");
         this.Title = Translator.Instant("Labels.IconPicker");
         Instance = this;
     }
 
+    /// <summary>
+    /// Called after the the component is rendered
+    /// </summary>
+    /// <param name="firstRender">if this is the first time the component is being rendered</param>
+    protected override void OnAfterRender(bool firstRender)
+    {
+        if (focusFilter)
+        {
+            JsRuntime.InvokeVoidAsync("focusElement", Uid);
+            focusFilter = false;
+        }
+    }
+
     /// <summary>
     /// Open the dialog
     /// </summary>
@@ -85,6 +119,7 @@ private Task<string> ShowInstance()
         Value = string.Empty;
         Filter = string.Empty;
         this.Visible = true;
+        focusFilter = true;
         this.StateHasChanged();
 
         Instance.ShowTask = new TaskCompletionSource<string>();
@@ -138,6 +173,7 @@ private void HandleKeyDown(KeyboardEventArgs e)
         Value = string.Empty;
     }
 
+
     /// <summary>
     /// An application icon
     /// </summary>

diff --git a/Components/SideEditors/CloudAppEditor/CloudAppEditor.razor b/Components/SideEditors/CloudAppEditor/CloudAppEditor.razor
@@ -15,13 +15,13 @@
     {
         <InputText Page="CloudAppEditor" Label="AddressVnc" @bind-Value="AddressVnc" Required="true" Pattern="^([\w.-]+|\[[0-9a-fA-F:]+\])(:\d+)?$"></InputText>
     }
-    else if(AppType == CloudAppType.External)
+    else if(AppType == CloudAppType.IFrame)
     {
-        <InputText Page="CloudAppEditor" Label="AddressExternal" @bind-Value="AddressExternal" Required="true" Pattern="^[^:]+://."></InputText>
+        <InputText Page="CloudAppEditor" Label="Address" @bind-Value="Address" Required="true" Pattern="^[^:]+://."></InputText>
     }
     else
     {
-        <InputText Page="CloudAppEditor" Label="Address" @bind-Value="Address" Required="true" Pattern="^[^:]+://."></InputText>
+        <InputText Page="CloudAppEditor" Label="AddressExternal" @bind-Value="Address" Required="true" Pattern="^[^:]+://."></InputText>
     }
 
 

diff --git a/Components/SideEditors/CloudAppEditor/CloudAppEditor.razor.cs b/Components/SideEditors/CloudAppEditor/CloudAppEditor.razor.cs
@@ -2,7 +2,6 @@
 using Fenrus.Models;
 using Fenrus.Models.UiModels;
 using Microsoft.AspNetCore.Components;
-using Microsoft.AspNetCore.Components.Web.Virtualization;
 
 namespace Fenrus.Components.SideEditors;
 
@@ -57,24 +56,25 @@ public partial class CloudAppEditor : SideEditorBase
     /// Gets or sets the address for a VNC app
     /// </summary>
     private string AddressVnc { get; set; }
-
-    /// <summary>
-    /// Gets or sets the address for a external app
-    /// </summary>
-    private string AddressExternal { get; set; }
 
 
     /// <summary>
     /// Gets or sets the icon of the app
     /// </summary>
     private string Icon { get; set; }
-    
+
     /// <summary>
     /// Gets or sets the app type
     /// </summary>
     private CloudAppType AppType { get; set; }
-
     private string SelectedItem;
+
+    private string GetAddress(CloudAppType type)
+    {
+        if(AppType == CloudAppType.Vnc)
+            return AddressVnc;
+        return Address;
+    }
 
 
     private List<ListOption> Types;
@@ -86,19 +86,19 @@ protected override void OnInitialized()
         lblCancel = Translator.Instant("Labels.Cancel");
 
         Name = Item?.Name ?? string.Empty;
-        AppType = Item?.Type ?? CloudAppType.Link;
-        if(AppType == CloudAppType.External)
-            AddressExternal = Item?.Address ?? string.Empty;
-        else if (AppType == CloudAppType.Vnc)
+        AppType = Item?.Type ?? CloudAppType.IFrame;
+        if (AppType == CloudAppType.Vnc)
             AddressVnc = Item?.Address ?? "http://";
         else
             Address = Item?.Address ?? "https://";
         Icon = Item?.Icon ?? string.Empty;
         Types = new()
         {
-            new() { Label = nameof(CloudAppType.Link), Value = CloudAppType.Link },
-            new() { Label = nameof(CloudAppType.External), Value = CloudAppType.External },
-            new() { Label = nameof(CloudAppType.Vnc).ToUpper(), Value = CloudAppType.Vnc },
+            new() { Label = Translator.Instant($"Enums.{nameof(CloudAppType)}.{nameof(CloudAppType.IFrame)}"), Value = CloudAppType.IFrame },
+            new() { Label = Translator.Instant($"Enums.{nameof(CloudAppType)}.{nameof(CloudAppType.Internal)}"), Value = CloudAppType.Internal },
+            new() { Label = Translator.Instant($"Enums.{nameof(CloudAppType)}.{nameof(CloudAppType.External)}"), Value = CloudAppType.External },
+            new() { Label = Translator.Instant($"Enums.{nameof(CloudAppType)}.{nameof(CloudAppType.ExternalSame)}"), Value = CloudAppType.ExternalSame },
+            new() { Label = Translator.Instant($"Enums.{nameof(CloudAppType)}.{nameof(CloudAppType.Vnc)}"), Value = CloudAppType.Vnc },
         };
     }
 
@@ -113,12 +113,7 @@ async Task Save()
             return;
         var item = new CloudApp();
         item.Name = Name;
-        if(AppType == CloudAppType.Vnc)
-            item.Address = AddressVnc;
-        else if(AppType == CloudAppType.External)
-            item.Address = AddressExternal;
-        else
-            item.Address = Address;
+        item.Address = GetAddress(AppType);
         item.Icon = Icon;
         item.Type = AppType;
         await OnSaved.InvokeAsync(item);

diff --git a/Converters/EnumSerializer.cs b/Converters/EnumSerializer.cs
@@ -0,0 +1,39 @@
+using LiteDB;
+
+namespace Fenrus.Converters;
+
+/// <summary>
+/// Provides serialization and deserialization methods for enum values to be stored as integers.
+/// </summary>
+public static class EnumSerializer
+{
+    /// <summary>
+    /// Registers custom serializers and deserializers for all enum types in the assembly.
+    /// </summary>
+    /// <param name="mapper">The BsonMapper instance to register the serializers and deserializers.</param>
+    public static void RegisterEnums(BsonMapper mapper)
+    {
+        BsonMapper.Global.ResolveMember = (type, memberInfo, memberMapper) =>
+        {
+            if (memberMapper.DataType.IsEnum)
+            {
+                memberMapper.Serialize = (obj, mapper) => new BsonValue((int)obj);
+                memberMapper.Deserialize = (value, mapper) =>
+                {
+                    if (value.IsString)
+                    {
+                        var str = value.AsString;
+                        if (Enum.TryParse(memberMapper.DataType, str, out var enumValue))
+                            return enumValue!;
+
+                        return 0;
+                    }
+                    else
+                    {
+                        return Enum.ToObject(memberMapper.DataType, value);
+                    }
+                };
+            }
+        };
+    }
+}
diff --git a/Helpers/DbHelper.cs b/Helpers/DbHelper.cs
@@ -32,6 +32,7 @@ internal static LiteDatabase GetDb()
             serialize: (x) => EncryptionHelper.Encrypt(x.Value),
             deserialize: (x) => (EncryptedString)EncryptionHelper.Decrypt(x.AsString)
         );
+        EnumSerializer.RegisterEnums(BsonMapper.Global);
         return db;
     }
 

diff --git a/Models/UserProfile.cs b/Models/UserProfile.cs
@@ -155,13 +155,21 @@ public enum CloudAppType
     /// <summary>
     /// Basic link that opens in the iframe
     /// </summary>
-    Link = 0,
+    IFrame = 0,
+    /// <summary>
+    /// App that opens in this tab
+    /// </summary>
+    Internal = 1,
     /// <summary>
     /// App that opens in a new tab
     /// </summary>
-    External = 1,
+    External = 2,
+    /// <summary>
+    /// App that opens in a same tab
+    /// </summary>
+    ExternalSame = 3,
     /// <summary>
     /// VNC app
     /// </summary>
-    Vnc = 2
+    Vnc = 4
 }
diff --git a/i18n/en.json b/i18n/en.json
@@ -76,6 +76,13 @@
     "UpdateHistory": "Update History"
   },
   "Enums": {
+    "CloudAppType": {
+      "IFrame": "IFrame",
+      "Internal": "Open in this tab",
+      "External": "Open in new tab",
+      "ExternalSame": "Open in same tab",
+      "Vnc": "VNC"
+    },
     "ItemSize": {
       "Small": "Small",
       "Medium": "Medium",
@@ -154,9 +161,9 @@
       "Title": "Edit App",
       "Fields": {
         "Address": "URL",
-        "Address-Help": "The URL of the site to open, you will likely need to use a https URL.  Not all sites will allow you to open them in an IFrame, and may need to be switched to an external type.",
+        "Address-Help": "The URL of the site to open, you will likely need to use a https URL.\nNot all sites will allow you to open them in an IFrame, and may need to be switched to an external type.",
         "AddressExternal": "URL",
-        "AddressExternal-Help": "The URL that will be opened in a new tab when clicked.",
+        "AddressExternal-Help": "The URL to the webpage that will be opened.",
         "Icon": "Icon",
         "Type": "Type",
         "AddressVnc": "Address",

diff --git a/wwwroot/js/fdrive/apps.js b/wwwroot/js/fdrive/apps.js
@@ -2,6 +2,7 @@ class FenrusDriveApps
 {
     initDone = false;
     constructor(){
+        this.divLaunchingApp = document.getElementById('launching-app');
         this.container = document.getElementById('apps-actual');
         this.eleIframeContainer = document.createElement('div');
         this.eleIframeContainer.innerHTML = '<div class="browser-container">' +
@@ -84,6 +85,24 @@ class FenrusDriveApps
             window.open(url, "_blank", "noopener,noreferrer");
             return;
         }
+        else if(type === 'externalsame')
+        {
+            let a = document.createElement('a');
+            a.setAttribute('href', url);
+            a.setAttribute('target', 'fenrus-popup');
+            a.style.display ='none';
+            document.body.appendChild(a);
+            a.click();
+            a.remove();
+            return;
+        }
+        else if(type === 'internal'){
+            this.divLaunchingApp.querySelector('.title').textContent = 'Launching ' + app.querySelector('.name').textContent;
+            this.divLaunchingApp.querySelector('img').src = app.querySelector('img').src;
+            this.divLaunchingApp.style.display = 'unset';
+            window.location.href = url;
+            return;
+        }
         this.eleIframe.src = url;
         this.eleIframeAddress.value = url;
 
@@ -93,7 +112,6 @@ class FenrusDriveApps
         document.body.classList.add('drawer-item-opened');
     }
 
-
     closeIframe(){
         this.eleIframeContainer.className = '';
         for(let ele of this.container.querySelectorAll('.email.selected'))

diff --git a/wwwroot/js/site.js b/wwwroot/js/site.js
@@ -495,4 +495,18 @@ document.addEventListener('mousedown', () => {
 
 document.addEventListener('mouseup', () => {
     isMouseDown = false;
-});
+});
+
+window.focusElement = (element, delay) => {
+    if(typeof(element) === 'string')
+        element = document.getElementById(element);
+    if(!element)
+        return;
+    if(delay){
+        setTimeout(() => {
+            element.focus();
+        }, delay);
+    }else {
+        element.focus();
+    }
+};