From 56dc0269b32905d6adc76c490060c75b5aab3728 Mon Sep 17 00:00:00 2001
From: bergware <bergware@users.noreply.github.com>
Date: Sat, 3 Feb 2024 11:52:24 +0100
Subject: [PATCH] Feedback form: place SUBMIT button next to CANCEL button

---
 emhttp/plugins/dynamix/scripts/feedback | 135 ++++++++++++------------
 1 file changed, 66 insertions(+), 69 deletions(-)
diff --git a/emhttp/plugins/dynamix/scripts/feedback b/emhttp/plugins/dynamix/scripts/feedback
index 9b53bcd8e..89e3bed7c 100755
--- a/emhttp/plugins/dynamix/scripts/feedback
+++ b/emhttp/plugins/dynamix/scripts/feedback
@@ -31,66 +31,65 @@ $width = in_array($display['theme'], ['azure', 'gray']) ? '98.4%' : '100%';
   <meta charset="UTF-8">
   <title>Feedback Form</title>
   <style>
-    div.spinner.fixed { z-index: 100000; }
-    div#control_panel { position: absolute; left: 0; right: 0; top: 0; padding-top: 8px; line-height: 24px; white-space: nowrap; }
-    div.divide { text-align: center; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
-    div.divide label:first-child { margin-left: 0; }
-    div.divide label { margin-left: 2%; cursor: pointer; }
-    div.allpanels { display: none; position: absolute; left: 0; right: 0; top: 40px; bottom: 0; overflow: auto; }
-    div#footer_panel { position: absolute; left: 0; right: 0; bottom: 0; height: 30px; line-height: 30px; text-align: center; }
-    textarea.feedback { width: <?php echo $width; ?>; height: 530px; margin: 0; resize: none; }
-    @media (max-width: 960px) { textarea.feedback { height: 330px; } }
-    @media (max-height: 768px) { textarea.feedback { height: 330px; } }
-    input.submit[type=button] { margin-right: 0; float: right; position: relative; z-index: 1; }
-    input.submit[type=email] { margin-top: 10px; float: left; position: relative; z-index: 1; }
-    p.note, label.note { font-size: 1.1rem !important; display: block; position: relative; z-index: 0; }
-    p.success { text-align: center !important; margin-top: 20px; }
-    span.spacer { margin: 0 4px; }
+    div.spinner.fixed{z-index:100000}
+    div#control_panel{position:absolute;left:0;right:0;top:0;padding-top:8px;line-height:24px;white-space:nowrap}
+    div.divide{text-align:center;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}
+    div.divide label:first-child{margin-left:0}
+    div.divide label{margin-left:2%;cursor:pointer}
+    div.allpanels{display:none;position:absolute;left:0;right:0;top:40px;bottom:0;overflow:auto}
+    div#footer_panel{position:absolute;left:0;right:0;bottom:0;height:30px;line-height:30px;text-align:center}
+    textarea.feedback{width:<?=$width?>;height:530px;margin:0;resize:none}
+    @media (max-width:960px){textarea.feedback{height:330px}}
+    @media (max-height:768px){textarea.feedback{height:330px}}
+    input.submit[type=email]{margin-top:10px;float:left;position:relative;z-index:1}
+    p.note, label.note{font-size:1.1rem !important;display:block;position:relative;z-index:0}
+    p.success{text-align:center!important;margin-top:20px}
+    span.spacer{margin:0 4px}
   </style>
 </head>
 <body>
   <div>
     <div id="control_panel" class="divide">
-      <label for="optFeatureRequest"><input type="radio" name="mode" id="optFeatureRequest" value="featurerequest" checked="checked"/> <?php echo _('Product Suggestion'); ?></label>
-      <label for="optBugReport"><input type="radio" name="mode" id="optBugReport" value="bugreport"/> <?php echo _('Bug Report'); ?></label>
-      <label for="optTroubleshoot"><input type="radio" name="mode" id="optTroubleshoot" value="troubleshoot"/> <?php echo _('Troubleshoot'); ?></label>
-      <label for="optComment"><input type="radio" name="mode" id="optComment" value="comment"/> <?php echo _('Other Comment'); ?></label>
+      <label for="optFeatureRequest"><input type="radio" name="mode" id="optFeatureRequest" value="featurerequest" checked="checked"/><?=_('Product Suggestion')?></label>
+      <label for="optBugReport"><input type="radio" name="mode" id="optBugReport" value="bugreport"/><?=_('Bug Report')?></label>
+      <label for="optTroubleshoot"><input type="radio" name="mode" id="optTroubleshoot" value="troubleshoot"/><?=_('Troubleshoot')?></label>
+      <label for="optComment"><input type="radio" name="mode" id="optComment" value="comment"/><?=_('Other Comment')?></label>
       <hr>
     </div>
     <div id="thanks_panel" class="allpanels"></div>
     <div id="featurerequest_panel" class="allpanels">
-      <textarea id="featureDescription" class="feedback" placeholder="<?php echo _('Please summarize your suggestion here'); ?>."></textarea>
+      <textarea id="featureDescription" class="feedback" placeholder="<?=_('Please summarize your suggestion here')?>."></textarea>
       <br>
-      <input type="email" id="featureEmail" class="submit" autocomplete="off" spellcheck="false" placeholder="<?php echo _('Contact Email Address'); ?> (<?php echo _('optional'); ?>)"><input type="button" id="featureSubmit" class="submit" value="<?php echo _('Submit'); ?>"/>
+      <input type="email" id="featureEmail" class="submit" autocomplete="off" spellcheck="false" placeholder="<?=_('Contact Email Address')?> (<?=_('optional')?>)">
     </div>
     <div id="bugreport_panel" class="allpanels">
       <textarea id="bugDescription" class="feedback"></textarea>
-      <input type="email" id="bugEmail" class="submit" autocomplete="off" spellcheck="false" placeholder="<?php echo _('Contact Email Address'); ?>. (<?php echo _('optional'); ?>)"><input type="button" id="bugSubmit" class="submit" value="<?php echo _('Submit'); ?>"/>
-      <label class="note" for="anonymize_bugReport"><input type="checkbox" id="anonymize_bugReport" class="anonymize" value="1" /> <?php echo _('Anonymize diagnostics (may make troubleshooting more difficult)'); ?></label>
-      <p class="note"><b><?php echo _('NOTE'); ?>:</b> <i><?php echo _('Submission of this bug report will automatically send your system diagnostics to Lime Technology'); ?>.</i></p>
+      <input type="email" id="bugEmail" class="submit" autocomplete="off" spellcheck="false" placeholder="<?=_('Contact Email Address')?>. (<?=_('optional')?>)">
+      <label class="note" for="anonymize_bugReport"><input type="checkbox" id="anonymize_bugReport" class="anonymize" value="1" /> <?=_('Anonymize diagnostics (may make troubleshooting more difficult)')?></label>
+      <p class="note"><b><?=_('NOTE')?>:</b> <i><?=_('Submission of this bug report will automatically send your system diagnostics to Lime Technology')?>.</i></p>
     </div>
     <div id="troubleshoot_panel" class="allpanels">
       <textarea id="troubleshootDescription" class="feedback"></textarea>
       <textarea id="troubleshootDetails" style="display: none;"></textarea>
-      <input type="email" id="troubleshootEmail" class="submit" autocomplete="off" spellcheck="false" placeholder="<?php echo _('Contact Email Address'); ?>"><input type="button" id="troubleshootSubmit" class="submit" value="<?php echo _('Submit'); ?>"/>
-      <label class="note" for="anonymize_troubleshoot"><input type="checkbox" id="anonymize_troubleshoot" class="anonymize" value="1" /> <?php echo _('Anonymize diagnostics (may make troubleshooting more difficult)'); ?></label>
-      <p class="note"><b><?php echo _('NOTE'); ?>:</b> <i><?php echo _('Submission of this troubleshooting request will automatically send your system diagnostics to Lime Technology'); ?>.</i></p>
+      <input type="email" id="troubleshootEmail" class="submit" autocomplete="off" spellcheck="false" placeholder="<?=_('Contact Email Address')?>">
+      <label class="note" for="anonymize_troubleshoot"><input type="checkbox" id="anonymize_troubleshoot" class="anonymize" value="1" /> <?=_('Anonymize diagnostics (may make troubleshooting more difficult)')?></label>
+      <p class="note"><b><?=_('NOTE')?>:</b> <i><?=_('Submission of this troubleshooting request will automatically send your system diagnostics to Lime Technology')?>.</i></p>
     </div>
     <div id="comment_panel" class="allpanels">
-      <textarea id="commentDescription" class="feedback" placeholder="<?php echo _('Type your question or comment to Lime Technology here'); ?>."></textarea>
+      <textarea id="commentDescription" class="feedback" placeholder="<?=_('Type your question or comment to Lime Technology here')?>."></textarea>
       <br>
-      <input type="email" id="commentEmail" class="submit" autocomplete="off" spellcheck="false" placeholder="<?php echo _('Contact Email Address'); ?> (<?php echo _('optional'); ?>)"><input type="button" id="commentSubmit" class="submit" value="<?php echo _('Submit'); ?>"/>
+      <input type="email" id="commentEmail" class="submit" autocomplete="off" spellcheck="false" placeholder="<?=_('Contact Email Address')?> (<?=_('optional')?>)">
     </div>
     <div id="footer_panel">
-      <a href="https://unraid.net" target="_blank"><?php echo _('Website'); ?></a><span class="spacer blue-text">|</span>
-      <a href="https://forums.unraid.net" target="_blank"><?php echo _('Forum'); ?></a><span class="spacer blue-text">|</span>
-      <a href="https://docs.unraid.net/" target="_blank"><?php echo _('Docs'); ?></a>
+      <a href="https://unraid.net" target="_blank"><?=_('Website')?></a><span class="spacer blue-text">|</span>
+      <a href="https://forums.unraid.net" target="_blank"><?=_('Forum')?></a><span class="spacer blue-text">|</span>
+      <a href="https://docs.unraid.net/" target="_blank"><?=_('Docs')?></a>
     </div>
   </div>
   <script>
-    var inkeyfile = '<?php echo $keyfile; ?>' ?? '';
-    var unraid_osversion = '<?php echo $unraid['version']; ?>';
-    var unraid_timestamp = <?php echo time(); ?>;
+    var inkeyfile = '<?=$keyfile?>' ?? '';
+    var unraid_osversion = '<?=$unraid['version']?>';
+    var unraid_timestamp = <?=time()?>;
     var inpageurl = window.top.location.href;
 
     function featurerequest_reset() {
@@ -99,12 +98,12 @@ $width = in_array($display['theme'], ['azure', 'gray']) ? '98.4%' : '100%';
     }
 
     function bugreport_reset() {
-      $('#bugDescription').val("<?php echo _('Bug Description'); ?>: \n\n\n\n<?php echo _('How to reproduce'); ?>: \n\n\n\n<?php echo _('Expected results'); ?>: \n\n\n\n<?php echo _('Actual results'); ?>: \n\n\n\n<?php echo _('Other information'); ?>: \n");
+      $('#bugDescription').val("<?=_('Bug Description')?>: \n\n\n\n<?=_('How to reproduce')?>: \n\n\n\n<?=_('Expected results')?>: \n\n\n\n<?=_('Actual results')?>: \n\n\n\n<?=_('Other information')?>: \n");
       $('#bugEmail').val('');
     }
 
     function troubleshoot_reset() {
-      $('#troubleshootDescription').val("<?php echo _('Description'); ?>: \n\n\n\n<?php echo _('How to reproduce'); ?>: \n\n\n\n<?php echo _('Expected results'); ?>: \n\n\n\n<?php echo _('Actual results'); ?>: \n\n\n\n<?php echo _('Other information'); ?>: \n");
+      $('#troubleshootDescription').val("<?=_('Description')?>: \n\n\n\n<?=_('How to reproduce')?>: \n\n\n\n<?=_('Expected results')?>: \n\n\n\n<?=_('Actual results')?>: \n\n\n\n<?=_('Other information')?>: \n");
       $('#troubleshootEmail').val('');
     }
 
@@ -118,13 +117,13 @@ $width = in_array($display['theme'], ['azure', 'gray']) ? '98.4%' : '100%';
       $('div.spinner.fixed').show();
       if (diagnostics) {
         var anonymize = $('#anonymize').is(':checked') ? '1' : '';
-        $.get('/webGui/include/Feedback.php', { getdiagnostics: 1, anonymize: anonymize }, function(data) {
+        $.get('/webGui/include/Feedback.php',{getdiagnostics: 1, anonymize: anonymize}, function(data) {
           params.diagnostics = data;
           form_submit(url, params, panel);
         }).fail(function() {
           $('div.spinner.fixed').hide();
           panel.fadeOut('fast').find('textarea,input').prop('disabled', false);
-          var failure_message = "<p class='red-text' style='text-align:center;'><?php echo _('Sorry, an error occurred'); ?> (<?php echo _('Unable to generate system diagnostics'); ?> <?php echo _('Please try again later'); ?>).</p>";
+          var failure_message = "<p class='red-text' style='text-align:center;'><?=_('Sorry, an error occurred')?> (<?=_('Unable to generate system diagnostics')?> <?=_('Please try again later')?>).</p>";
           $('#thanks_panel').html(failure_message).fadeIn('fast');
         });
         return;
@@ -136,12 +135,12 @@ $width = in_array($display['theme'], ['azure', 'gray']) ? '98.4%' : '100%';
       $.post(url, params, function(data) {
         $('div.spinner.fixed').hide();
         if (data.error) {
-          var failure_message = "<p class='red-text' style='text-align:center;'><?php echo _('Sorry, an error occurred'); ?>. <?php echo _('Please try again later'); ?>.</p>";
+          var failure_message = "<p class='red-text' style='text-align:center;'><?=_('Sorry, an error occurred')?>. <?=_('Please try again later')?>.</p>";
           $('#thanks_panel').html(failure_message).fadeIn('fast');
         } else {
           data.message = data.message || '';
           var url_parts = url.split('/');
-          var success_message = '<div style="text-align:center"><h2 style="color:#4f8a10!important"><?php echo _("Thank You"); ?>!</h2><img src="/webGui/images/feedback_' + url_parts[4] + '.png"/><p class="success">' + data.message + '</p></div>';
+          var success_message = '<div style="text-align:center"><h2 style="color:#4f8a10!important"><?=_("Thank You")?>!</h2><img src="/webGui/images/feedback_' + url_parts[4] + '.png"/><p class="success">' + data.message + '</p></div>';
           $('#thanks_panel').html(success_message).fadeIn('fast', function() {
             var resetfunction = window[url_parts[4] + '_reset'];
             if (typeof resetfunction !== 'undefined' && $.isFunction(resetfunction)) {
@@ -153,12 +152,13 @@ $width = in_array($display['theme'], ['azure', 'gray']) ? '98.4%' : '100%';
         if (jqXHR.responseJSON && jqXHR.responseJSON.error) {
           errorThrown = jqXHR.responseJSON.error;
         }
-        var failure_message = "<p class='red-text' style='text-align:center;'><?php echo _('Sorry, an error occurred'); ?>. <?php echo _('Please try again later'); ?>.</p>";
+        var failure_message = "<p class='red-text' style='text-align:center;'><?=_('Sorry, an error occurred')?>. <?=_('Please try again later')?>.</p>";
         $('#thanks_panel').html(failure_message).fadeIn('fast');
       }).always(function() {
         $('#spinner_image').fadeOut('fast');
         panel.fadeOut('fast').find('textarea,input').prop('disabled', false);
       });
+      $('#submit').prop('disabled',true);
     }
 
     $(function() {
@@ -173,34 +173,32 @@ $width = in_array($display['theme'], ['azure', 'gray']) ? '98.4%' : '100%';
         }
       });
 
-      $('#featureSubmit').click(function featureSubmitClick() {
-        if ($('#featureDescription').val() === '') return;
-        form_submit('https://keys.lime-technology.com/feedback/featurerequest', { description: $('#featureDescription').val(), email: $('#featureEmail').val() }, $('#featurerequest_panel'));
-      });
+      $('button.confirm').text("<?=_('Cancel')?>");
+      if ($('#submit').length == 0) $('button.confirm').before('<input type="button" id="submit" value="<?=_('Submit')?>">');
 
-      $('#bugSubmit').click(function bugSubmitClick() {
-        if ($('#bugDescription').val() === '') return;
-        form_submit('https://keys.lime-technology.com/feedback/bugreport', { description: $('#bugDescription').val(), email: $('#bugEmail').val() }, $('#bugreport_panel'), true);
-      });
+      $('input[name=mode]').click(function(){$('#submit').prop('disabled',false);});
 
-      $('#troubleshootSubmit').click(function bugSubmitClick() {
-        if ($('#troubleshootDescription').val() === '') return;
-        if ($('#troubleshootEmail').val() === '') return alert('Email is required for troubleshooting requests');
-        // @todo - update this to use a new troubleshoot endpoint
-        form_submit(
-          'https://keys.lime-technology.com/feedback/bugreport',
-          {
-            description: $('#troubleshootDescription').val() + '\n\n' + $('#troubleshootDetails').val(),
-            email: $('#troubleshootEmail').val()
-          },
-          $('#troubleshoot_panel'),
-          true
-        );
-      });
-
-      $('#commentSubmit').click(function commentSubmitClick() {
-        if ($('#commentDescription').val() === '') return;
-        form_submit('https://keys.lime-technology.com/feedback/comment', { description: $('#commentDescription').val(), email: $('#commentEmail').val() }, $('#comment_panel'));
+      $('#submit').click(function() {
+        switch ($('input[name=mode]:checked').val()) {
+        case 'featurerequest':
+          if ($('#featureDescription').val() === '') return;
+          form_submit('https://keys.lime-technology.com/feedback/featurerequest',{description: $('#featureDescription').val(), email: $('#featureEmail').val()}, $('#featurerequest_panel'));
+          break;
+        case 'bugreport':
+          if ($('#bugDescription').val() === '') return;
+          form_submit('https://keys.lime-technology.com/feedback/bugreport',{description: $('#bugDescription').val(), email: $('#bugEmail').val()}, $('#bugreport_panel'), true);
+          break;
+        case 'troubleshoot':
+          if ($('#troubleshootDescription').val() === '') return;
+          if ($('#troubleshootEmail').val() === '') return alert('Email is required for troubleshooting requests');
+          // @todo - update this to use a new troubleshoot endpoint
+          form_submit('https://keys.lime-technology.com/feedback/bugreport',{description: $('#troubleshootDescription').val()+'\n\n'+$('#troubleshootDetails').val(), email: $('#troubleshootEmail').val()}, $('#troubleshoot_panel'), true);
+          break;
+        case 'comment':
+          if ($('#commentDescription').val() === '') return;
+          form_submit('https://keys.lime-technology.com/feedback/comment',{description: $('#commentDescription').val(), email: $('#commentEmail').val()}, $('#comment_panel'));
+          break;
+        }
       });
 
       featurerequest_reset();
@@ -208,7 +206,6 @@ $width = in_array($display['theme'], ['azure', 'gray']) ? '98.4%' : '100%';
       troubleshoot_reset();
       comment_reset();
       $('#optFeatureRequest').click();
-      $('button.confirm').text("<?=_('Cancel')?>");
     });
   </script>
 </body>
