Added WIP mobile desktop homepage shortcut

desktop.go

@@ -557,9 +557,9 @@ func desktop_theme_handler(w http.ResponseWriter, r *http.Request) {
 }
 
 func desktop_preference_handler(w http.ResponseWriter, r *http.Request) {
-	preferenceType, _ := common.Mv(r, "preference", false)
-	value, _ := common.Mv(r, "value", false)
-	remove, _ := common.Mv(r, "remove", false)
+	preferenceType, _ := common.Mv(r, "preference", true)
+	value, _ := common.Mv(r, "value", true)
+	remove, _ := common.Mv(r, "remove", true)
 	username, err := authAgent.GetUserName(w, r)
 	if err != nil {
 		//user not logged in. Redirect to login page.

web/SystemAO/desktop/personalization.html

@@ -186,15 +186,71 @@
                     </h3>
                     <div class="ui divider"></div>
                     <h4 class="ui header">
-                        <span locale="advance/wallpaper/title">User Defined Wallpaper</span>
+                        <i class="image icon" style="display:inline-block;"></i> <span locale="advance/wallpaper/title">User Defined Wallpaper</span>
                         <div class="sub header" locale="advance/wallpaper/desc">Advanced user customization function for desktop interface</div>
                     </h4>
                     <h3 id="userSelectedFolderPath" locale="advance/wallpaper/disabled">Disabled</h3>
                     <p locale="advance/wallpaper/reminder">If you have set a folder for loading desktop wallpapers, the image files from that folder will be used instead of the system build in wallpapers.</p>
                     <button class="ui small right floated button" onclick="clearUserSelectedFolder();"><i class="remove icon"></i><span locale="advance/wallpaper/clear">Clear Selection</span></button>
                     <button class="ui small black right floated button" onclick="selectUserFolder();"><i class="folder open icon"></i> <span locale="advance/wallpaper/select">Select Folder</span></button>
-        
                     <br><br>
+                    
+                    <div class="ui divider"></div>
+                    <h4 class="ui header">
+                        <i class="external square alternate icon" style="display:inline-block;" ></i> <span locale="advance/mobile/shorcut/title">Mobile Desktop Shortcuts</span>
+                        <div class="sub header" locale="advance/mobile/shorcut/subtitle">Change the default four primary shortcuts</div>
+                    </h4>
+                    <p locale="advance/mobile/shorcut/instruction">Please pick your shortcut from left to right</p>
+                    <div>
+                        <div class="ui fluid search selection moduledropbox dropdown">
+                            <input type="hidden" id="shortcut1">
+                            <i class="dropdown icon"></i>
+                            <div class="default text" locale="advance/mobile/shorcut/shortcut/1">Shortcut 1</div>
+                            <div class="webapplist menu">
+                            
+                            </div>
+                        </div>
+                        <br>
+                        <div class="ui fluid search selection moduledropbox dropdown">
+                            <input type="hidden" id="shortcut2">
+                            <i class="dropdown icon"></i>
+                            <div class="default text" locale="advance/mobile/shorcut/shortcut/2">Shortcut 2</div>
+                            <div class="webapplist menu">
+                            
+                            </div>
+                        </div>
+                        <br>
+                        <div class="ui fluid search selection moduledropbox dropdown">
+                            <input type="hidden" id="shortcut3">
+                            <i class="dropdown icon"></i>
+                            <div class="default text" locale="advance/mobile/shorcut/shortcut/3">Shortcut 3</div>
+                            <div class="webapplist menu">
+                                
+                            </div>
+                        </div>
+                        <br>
+                        <div class="ui fluid search selection moduledropbox dropdown">
+                            <input type="hidden" id="shortcut4">
+                            <i class="dropdown icon"></i>
+                            <div class="default text" locale="advance/mobile/shorcut/shortcut/4">Shortcut 4</div>
+                            <div class="webapplist menu">
+                            
+                            </div>
+                        </div>
+                    </div>
+                    <br>
+                    <button class="ui small green right floated button" onclick="saveShortcuts();"  locale="advance/mobile/shorcut/save"><i class="checkmark icon"></i> Save Shortcuts</button>
+                    <br><br>
+                    <div class="ui green segment" style="display:none" id="shortcutChangeSaved">
+                        <h4 class="ui header">
+                            <i class="checkmark green icon"></i>
+                            <div class="content">
+                            <span locale="advance/mobile/shorcut/updated">Shorcuts Updated</span>
+                            <div class="sub header" locale="advance/mobile/shorcut/updateddesc">Open the mobile interface via your phone to view the changes</div>
+                            </div>
+                        </h4>
+                    </div>
+                    
                 </div>
                 
             </div>
@@ -228,6 +284,7 @@
                 });
                 generateColorGrids();
                 getStartupAudio();
+                initModuleList();
             }
 
            
@@ -251,6 +308,76 @@
                 });
             }
             
+            function initModuleList(){
+                $.get("../../system/modules/list", function(data){
+                    $(".webapplist").html('');
+                    data.forEach(app => {
+                        if (app.Group != "Interface Module"){
+                            $(".webapplist").append(`<div class="item" data-value="${app.Name}">${app.Name}</div>`);
+                        }
+                    });
+
+                    $(".moduledropbox").dropdown();
+
+                    //Get selected preferences
+                    readPreference("ao/mobile/shorcut/1", function(data){
+                        if (data != ""){
+                            $("#shortcut1").val(data);
+                            $("#shortcut1").parent().dropdown("set selected", data);
+                        }
+                    });
+
+                    readPreference("ao/mobile/shorcut/2", function(data){
+                        if (data != ""){
+                            $("#shortcut2").val(data);
+                            $("#shortcut2").parent().dropdown("set selected", data);
+                        }
+                    });
+
+                    readPreference("ao/mobile/shorcut/3", function(data){
+                        if (data != ""){
+                            $("#shortcut3").val(data);
+                            $("#shortcut3").parent().dropdown("set selected", data);
+                        }
+                    });
+
+                    readPreference("ao/mobile/shorcut/4", function(data){
+                        if (data != ""){
+                            $("#shortcut4").val(data);
+                            $("#shortcut4").parent().dropdown("set selected", data);
+                        }
+                    });
+                })
+            }
+
+            function saveShortcuts(){
+                var sc1 = $("#shortcut1").val();
+                var sc2 = $("#shortcut2").val();
+                var sc3 = $("#shortcut3").val();
+                var sc4 = $("#shortcut4").val();
+
+                if (sc1 != ""){
+                    writePreference("ao/mobile/shorcut/1", sc1);
+                }
+
+                if (sc2 != ""){
+                    writePreference("ao/mobile/shorcut/2", sc2);
+                }
+
+                if (sc3 != ""){
+                    writePreference("ao/mobile/shorcut/3", sc3);
+                }
+
+                if (sc4 != ""){
+                    writePreference("ao/mobile/shorcut/4", sc4);
+                }
+
+                $("#shortcutChangeSaved").stop().finish().slideDown("fast").delay(3000).slideUp("fast", function(){
+                    if (parent != undefined && parent.initShortcuts != undefined){
+                        parent.initShortcuts();
+                    }
+                });
+            }
 
             function initDefaultBackgroundChangeValue(){
                 if (localStorage.getItem("ao/desktop/backgroundInterval") == null){
@@ -276,7 +403,7 @@
                 $("#userSelectedStartupSound").text(filepath);
                 $.ajax({
                     url: "../../system/desktop/preference",
-                    method: "GET",
+                    method: "POST",
                     data: {preference: "startup-audio", value: filepath},
                     success: function(data){
                         console.log(data);
@@ -287,7 +414,7 @@
             function getStartupAudio(callback=undefined){
                 $.ajax({
                     url: "../../system/desktop/preference",
-                    method: "GET",
+                    method: "POST",
                     data: {preference: "startup-audio"},
                     success: function(data){
                         if (data != undefined && data != ""){
@@ -306,7 +433,7 @@
             function clearStartupAudioSelection(){
                 $.ajax({
                     url: "../../system/desktop/preference",
-                    method: "GET",
+                    method: "POST",
                     data: {preference: "startup-audio", remove: "true"},
                     success: function(data){
                         $("#userSelectedStartupSound").text(applocale.getString("sound/disabled", "Disabled"));
@@ -590,8 +717,9 @@
 
             function readPreference(key, callback=undefined){
                 $.ajax({
-                    url: "../../system/file_system/preference",
-                    data: {key: key},
+                    url: "../../system/desktop/preference",
+                    data: {preference: key},
+                    method: "POST",
                     success: function(data){
                         if (callback != undefined){
                             callback(data);
@@ -602,8 +730,9 @@
 
             function writePreference(key, value, callback=undefined){
                 $.ajax({
-                    url: "../../system/file_system/preference",
-                    data: {key: key, value: value},
+                    url: "../../system/desktop/preference",
+                    data: {preference: key, value: value},
+                    method: "POST",
                     success: function(data){
                         if (callback != undefined){
                             callback(data);

web/SystemAO/modules/moduleList.html

@@ -10,24 +10,26 @@
     </head>
     <body>
         <div class="ui container">
-            <table class="ui basic celled structured table">
-                <thead>
-                  <tr>
-                      <th rowspan="2">Module</th>
-                      <th rowspan="2">Group</th>
-                      <th rowspan="2">Supported Extensions</th>
-                      <th colspan="3">Supported Mode</th>
-                  </tr>
-                  <tr>
-                    <th>Default</th>
-                    <th>FloatWindow</th>
-                    <th>Embedded</th>
-                  </tr>
-                </thead>
-                <tbody id="moduleList">
-                  
-                </tbody>
-              </table>
+            <div style="width: 100%; overflow-y: auto;">
+                <table class="ui basic celled structured unstackable table">
+                    <thead>
+                    <tr>
+                        <th rowspan="2">Module</th>
+                        <th rowspan="2">Group</th>
+                        <th rowspan="2">Supported Extensions</th>
+                        <th colspan="3">Supported Mode</th>
+                    </tr>
+                    <tr>
+                        <th>Default</th>
+                        <th>FloatWindow</th>
+                        <th>Embedded</th>
+                    </tr>
+                    </thead>
+                    <tbody id="moduleList">
+                    
+                    </tbody>
+                </table>
+            </div>
               <div class="ui divider"></div>
               <p>If you have installed WebApps manually, you can click the "Reload WebApps" button to load it without restarting ArozOS.</p>
               <button id="reloadWebappButton" class="ui basic small blue button" onclick="reloadWebapps();">
@@ -86,7 +88,7 @@
                             }
                             $("#moduleList").append(`<tr>
                                 <td>
-                                    <h4 class="ui image header">
+                                    <h4 class="ui image header" style="white-space: nowrap;">
                                         <img src="${iconURL}" class="ui mini rounded image">
                                         <div class="content">
                                             ${thisModule.Name}

web/desktop.system

@@ -1201,7 +1201,7 @@
         function initStartupSounds(){
             $.ajax({
                 url: "system/desktop/preference",
-                method: "GET",
+                method: "POST",
                 data: {preference: "startup-audio"},
                 success: function(data){
                     if (data == undefined || data == ""){
@@ -6241,20 +6241,29 @@
         }
 
         function setStorage(key, value, callback = undefined) {
-            $.get("system/desktop/preference?preference=" + key + "&value=" + value, function(data) {
-                if (data.error !== undefined) {
-                    console.log(data.error);
-                } else {
-                    if (callback !== undefined) {
-                        callback();
-                    }
+            $.ajax({
+                url: "system/desktop/preference", 
+                data: {preference: key, value: value},
+                method: "POST",
+                success: function(data) {
+                    if (data.error !== undefined) {
+                        console.log(data.error);
+                    } else {
+                        if (callback !== undefined) {
+                            callback();
+                        }
 
+                    }
                 }
             });
         }
 
         function getStorage(key, callback) {
-            $.get("system/desktop/preference?preference=" + key, callback);
+            $.ajax({
+                url: "system/desktop/preference",
+                data: {preference: key},
+                success: callback
+            });
         }
 
         function showSystemSettings(){

web/mobile.system

@@ -349,6 +349,23 @@
                 background: rgb(255,255,255);
                 background: linear-gradient(0deg, rgba(255,255,255,0) 2%, rgba(6,6,6,0.4479635060791801) 44%, rgba(29,29,29,1) 100%); 
             }
+
+            #shortcuts{
+                position: absolute;
+                bottom: 0px;
+                right: 0px;
+                width: calc(100% - 20px);
+                padding: 1em;
+            }
+
+            #shortcuts .clickable{
+                cursor: pointer;
+                border-radius: 10px;
+            }
+
+            .disabled{
+                pointer-events: none;
+            }
         </style>
     </head>
     <body>
@@ -428,7 +445,25 @@
             <div id="windowWrapper">
                 
             </div>
-
+            <div id="shortcuts">
+                <!-- System Shortcuts -->
+                <div class="ui divider"></div>
+                <div class="ui four column grid">
+                    <div class="column">
+                        <img id="shortcut1" module="" onclick="launchThisModule(this);" class="ui medium clickable image" src="">
+                    </div>
+                    <div class="column">
+                        <img id="shortcut2" module="" onclick="launchThisModule(this);" class="ui medium clickable image" src="">
+                    </div>
+                    <div class="column">
+                        <img id="shortcut3" module="" onclick="launchThisModule(this);" class="ui medium clickable image" src="">
+                    </div>
+                    <div class="column">
+                        <img id="shortcut4" module="" onclick="launchThisModule(this);" class="ui medium clickable image" src="">
+                    </div>
+                </div>
+            </div>
+           
             <div id="conndrop">
                 <img class="ui mini image blink-image" src="SystemAO/desktop/icons/connlost.svg">
             </div>
@@ -466,6 +501,7 @@
             bindBackgroundClickActions();
             initStartupSounds();
             initDesktopUserInfo();
+            initShortcuts();
 
             //Bind background click
             function bindBackgroundClickActions(){
@@ -622,6 +658,19 @@
 
                 $("#sidebarToggleOverlay").hide();
                 $(".extendOnly").slideUp("fast");
+
+                //Check the number of floatWindow
+                if ($(".floatWindowWrapper").length == 0){
+                    //Reaching desktop layer
+                    showShortcuts();
+                }else{
+                    //Check if all float windows are hidden
+                    var allHidden = $(".floatWindowWrapper").is(":hidden");
+                    if (!allHidden){
+                        hideShortcuts();
+                    }
+                    
+                }
             }
 
             function showTaskBar(){
@@ -640,7 +689,7 @@
                 $(".taskBar").find(".toggleTaskBar").attr("shown","true");
                 $("#mainFrame").addClass("blurred");
                 $("#sidebarToggleOverlay").show();
-               
+                
             }
 
             //List all modules
@@ -783,6 +832,13 @@
             }
 
             function closeListMenu(callback = undefined){
+                if (listMenuShown == false){
+                    //Already closed
+                    if (typeof callback != "undefined"){
+                        callback();
+                    }
+                    return;
+                }
                 $("#listMenu").animate({
                     left: window.innerWidth * -1
                 },300,"swing", function(){
@@ -980,6 +1036,9 @@
                 //Hide all other floatWindows
                 $(".floatWindowWrapper").fadeOut("fast");
 
+                //Hide shortcuts
+                hideShortcuts();
+
                 //Construct the new window
                 var windowID = Date.now();
                 var parent = options.parent || "";
@@ -1071,6 +1130,7 @@
 
                 //Show the target fw
                 var fw = getFloatWindowByID(windowID);
+                hideShortcuts();
                 fw.fadeIn("fast", function(){
                     hideTaskBar();
                 });
@@ -1275,6 +1335,7 @@
             function showDesktop(){
                 $(".floatWindowWrapper").fadeOut("fast");
                 hideTaskBar();
+                showShortcuts();
             }
 
             //Theme color placeholder functions
@@ -1286,7 +1347,7 @@
             function initStartupSounds(){
                 $.ajax({
                     url: "../../system/desktop/preference",
-                    method: "GET",
+                    method: "POST",
                     data: {preference: "startup-audio"},
                     success: function(data){
                         if (data == undefined || data == ""){
@@ -1362,6 +1423,47 @@
                 }, 500);
             }
 
+            function initShortcuts(){
+                initShortcut(1, $("#shortcut1"));
+                initShortcut(2, $("#shortcut2"));
+                initShortcut(3, $("#shortcut3"));
+                initShortcut(4, $("#shortcut4"));
+            }
+
+            function initShortcut(id, displayTarget){
+                getStorage("ao/mobile/shorcut/" + id, function(data){
+                    if (data != ""){
+                        $.get("system/modules/getLaunchPara?module=" + data, function(para){
+                            displayTarget.attr("src", para.IconPath);
+                            if (para.StartDir == ""){
+                                displayTarget.addClass("disabled");
+                            }else{
+                                displayTarget.attr("module", encodeURIComponent(JSON.stringify(para.Name)));
+                            }
+                        });
+                    }else{
+                        //No data for this shortcut
+                        displayTarget.attr("src", "img/desktop/system_icon/bad_shortcut.png");
+                        displayTarget.addClass("disabled");
+                    }
+                });
+            }
+
+            function showShortcuts(){
+                $("#shortcuts").slideDown("fast");
+            }
+
+            function hideShortcuts(){
+                $("#shortcuts").slideUp("fast");
+            }
+
+            function launchThisModule(object){
+                var moduleName = JSON.parse(decodeURIComponent($(object).attr("module")));
+                if (moduleName != ""){
+                    openModule(moduleName);
+                }
+            }
+
             function toggleProfileInfo(){
                 $("#userprofile").transition('drop');
             }
@@ -1380,6 +1482,34 @@
                 }
                 
             }
+
+            function setStorage(key, value, callback = undefined) {
+                $.ajax({
+                    url: "system/desktop/preference",
+                    data: {preference: key, value: value},
+                    method: "POST",
+                    success: function(data) {
+                        if (data.error !== undefined) {
+                            console.log(data.error);
+                        } else {
+                            if (callback !== undefined) {
+                                callback();
+                            }
+
+                        }
+                    }
+                });
+            }
+
+            function getStorage(key, callback) {
+                $.ajax({
+                    url: "system/desktop/preference",
+                    data: {preference: key},
+                    method: "POST",
+                    success: callback
+                });
+            }
+
             
             //Keep the clock updated
             setInterval(function(){