mirror of
https://github.com/unraid/webgui.git
synced 2026-01-06 01:29:54 -06:00
refactor: update feedback script for improved readability and maintainability by standardizing PHP tags, restructuring CSS classes, and enhancing layout organization
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
#!/usr/bin/php -q
|
||||
<?PHP
|
||||
<?php
|
||||
/* Copyright 2005-2024, Lime Technology
|
||||
* Copyright 2012-2024, Bergware International.
|
||||
*
|
||||
@@ -13,7 +13,7 @@
|
||||
|
||||
$docroot ??= ($_SERVER['DOCUMENT_ROOT'] ?: '/usr/local/emhttp');
|
||||
require_once "$docroot/webGui/include/Helpers.php";
|
||||
extract(parse_plugin_cfg('dynamix',true));
|
||||
extract(parse_plugin_cfg('dynamix', true));
|
||||
|
||||
// add translations
|
||||
$_SERVER['REQUEST_URI'] = '';
|
||||
@@ -22,8 +22,8 @@ require_once "$docroot/webGui/include/Translations.php";
|
||||
|
||||
$var = parse_ini_file('state/var.ini');
|
||||
$unraid = parse_ini_file('/etc/unraid-version');
|
||||
$keyfile = !empty(_var($var,'regFILE')) ? trim(base64_encode(@file_get_contents($var['regFILE']))) : '';
|
||||
$width = in_array($display['theme'], ['azure','gray']) ? '98.8%' : '100%';
|
||||
$keyfile = !empty(_var($var, 'regFILE')) ? trim(base64_encode(@file_get_contents($var['regFILE']))) : '';
|
||||
// $width = in_array($display['theme'], ['azure','gray']) ? '98.8%' : '100%';
|
||||
$feedback = '/webGui/images/feedback_';
|
||||
|
||||
$diagn = _('Unable to generate system diagnostics');
|
||||
@@ -31,61 +31,132 @@ $sorry = _('Sorry, an error occurred');
|
||||
$again = _('Please try again later');
|
||||
?>
|
||||
<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{margin-right:30px}
|
||||
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;text-align:right}
|
||||
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#email{float:left;padding-left:4px}
|
||||
p.note,label.note{font-size:1.1rem!important}
|
||||
span.spacer{margin:0 4px}
|
||||
img{display:inline-block;margin-bottom:30px}
|
||||
.center{text-align:center!important}
|
||||
.green-text{color:#4f8a10!important}
|
||||
.red-text{color:#f0000c!important}
|
||||
div.spinner.fixed {
|
||||
z-index: 100000;
|
||||
}
|
||||
.feedback-control-panel {
|
||||
padding-top: 8px;
|
||||
line-height: 24px;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
|
||||
label {
|
||||
margin-right: 30px;
|
||||
}
|
||||
}
|
||||
.feedback-panel {
|
||||
display: none;
|
||||
}
|
||||
.feedback-panel-textarea {
|
||||
width: 100%;
|
||||
height: 530px;
|
||||
margin: 0;
|
||||
resize: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@media (max-width: 960px) {
|
||||
.feedback-panel-textarea {
|
||||
height: 330px;
|
||||
}
|
||||
}
|
||||
@media (max-height: 768px) {
|
||||
.feedback-panel-textarea {
|
||||
height: 330px;
|
||||
}
|
||||
}
|
||||
.feedback-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 1rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
.feedback-footer-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
.feedback-email-input {
|
||||
padding-left: 4px;
|
||||
}
|
||||
.note {
|
||||
font-size: 1.1rem !important;
|
||||
}
|
||||
img {
|
||||
display: inline-block;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.center {
|
||||
text-align: center !important;
|
||||
}
|
||||
.green-text {
|
||||
color: var(--green-800) !important;
|
||||
}
|
||||
.red-text {
|
||||
color: var(--red-600) !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div>
|
||||
<div id="control_panel" class="divide">
|
||||
<label for="opt_featurerequest"><input type="radio" name="mode" id="opt_featurerequest" value="featurerequest" checked="checked"><?=_('Product Suggestion')?></label>
|
||||
<label for="opt_bugreport"><input type="radio" name="mode" id="opt_bugreport" value="bugreport"><?=_('Bug Report')?></label>
|
||||
<label for="opt_troubleshoot"><input type="radio" name="mode" id="opt_troubleshoot" value="troubleshoot"><?=_('Troubleshoot')?></label>
|
||||
<label for="opt_comment"><input type="radio" name="mode" id="opt_comment" value="comment"><?=_('Other Comment')?></label>
|
||||
<hr>
|
||||
</div>
|
||||
<div class="feedback-control-panel">
|
||||
<label for="opt_featurerequest">
|
||||
<input type="radio" name="mode" id="opt_featurerequest" value="featurerequest" checked="checked">
|
||||
<?=_('Product Suggestion')?>
|
||||
</label>
|
||||
<label for="opt_bugreport">
|
||||
<input type="radio" name="mode" id="opt_bugreport" value="bugreport">
|
||||
<?=_('Bug Report')?>
|
||||
</label>
|
||||
<label for="opt_troubleshoot">
|
||||
<input type="radio" name="mode" id="opt_troubleshoot" value="troubleshoot">
|
||||
<?=_('Troubleshoot')?>
|
||||
</label>
|
||||
<label for="opt_comment">
|
||||
<input type="radio" name="mode" id="opt_comment" value="comment">
|
||||
<?=_('Other Comment')?>
|
||||
</label>
|
||||
<hr>
|
||||
</div>
|
||||
|
||||
<div id="result_panel" class="allpanels"></div>
|
||||
<div id="result_panel" class="feedback-panel"></div>
|
||||
|
||||
<div id="featurerequest_panel" class="allpanels">
|
||||
<textarea id="featurerequest" class="feedback"></textarea>
|
||||
</div>
|
||||
<div id="featurerequest_panel" class="feedback-panel">
|
||||
<textarea id="featurerequest" class="feedback-panel-textarea"></textarea>
|
||||
</div>
|
||||
|
||||
<div id="bugreport_panel" class="allpanels">
|
||||
<textarea id="bugreport" class="feedback"></textarea>
|
||||
<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="bugreport_panel" class="feedback-panel">
|
||||
<textarea id="bugreport" class="feedback-panel-textarea"></textarea>
|
||||
<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="troubleshoot" class="feedback"></textarea>
|
||||
<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="troubleshoot_panel" class="feedback-panel">
|
||||
<textarea id="troubleshoot" class="feedback-panel-textarea"></textarea>
|
||||
<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="comment" class="feedback"></textarea>
|
||||
</div>
|
||||
<div id="comment_panel" class="feedback-panel">
|
||||
<textarea id="comment" class="feedback-panel-textarea"></textarea>
|
||||
</div>
|
||||
|
||||
<div id="footer_panel">
|
||||
<input type="email" id="email" autocomplete="off" spellcheck="false">
|
||||
<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 class="feedback-footer">
|
||||
<input class="feedback-email-input" type="email" autocomplete="off" spellcheck="false">
|
||||
<nav class="feedback-footer-nav">
|
||||
<a href="https://unraid.net" target="_blank"><?=_('Website')?></a>
|
||||
<a href="https://forums.unraid.net" target="_blank"><?=_('Forum')?></a>
|
||||
<a href="https://docs.unraid.net/" target="_blank"><?=_('Docs')?></a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
@@ -136,7 +207,7 @@ String.prototype.md5 = function(){
|
||||
|
||||
function validInput(input) {
|
||||
var validRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
var email = $('input#email');
|
||||
var email = $('.feedback-email-input');
|
||||
return input.val().md5() == md5[input.prop('id')] || !(email.prop('required')===false || email.val().match(validRegex));
|
||||
}
|
||||
|
||||
@@ -173,7 +244,7 @@ function form_submit(url, params, tab, diagnostics) {
|
||||
return;
|
||||
}
|
||||
params.description = $(tab).val();
|
||||
params.email = $('input#email').val();
|
||||
params.email = $('.feedback-email-input').val();
|
||||
params.timestamp = "<?=time()?>";
|
||||
params.osversion = "<?=$unraid['version']?>";
|
||||
params.keyfile = "<?=$keyfile?>";
|
||||
@@ -209,9 +280,9 @@ $(function(){
|
||||
var panel = tab+'_panel';
|
||||
var enter = ['#troubleshoot'].includes(tab);
|
||||
var email = "<?=_('Contact Email Address')?> ("+"<?=_('required')?>"+")";
|
||||
$('input#email').prop('placeholder',email).prop('required','true');
|
||||
$('.feedback-email-input').prop('placeholder',email).prop('required','true');
|
||||
$('#submit_button').prop('disabled',validInput($(tab)));
|
||||
$('.allpanels').not(panel).fadeOut('fast');
|
||||
$('.feedback-panel').not(panel).fadeOut('fast');
|
||||
$(panel).fadeIn('fast');
|
||||
});
|
||||
|
||||
@@ -219,7 +290,7 @@ $(function(){
|
||||
$('#submit_button').prop('disabled',validInput($(this)));
|
||||
});
|
||||
|
||||
$('input#email').on('input change',function(){
|
||||
$('.feedback-email-input').on('input change',function(){
|
||||
var tab = '#'+$('input[name=mode]:checked').val();
|
||||
$('#submit_button').prop('disabled',validInput($(tab)));
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user