Moved styles to a global.css stylesheet. Also added basic validation with a transition

This commit is contained in:
2026-02-16 16:08:12 -07:00
parent a720bba7a7
commit 462a2beea1
6 changed files with 119 additions and 44 deletions

View File

@@ -1,49 +1,62 @@
<div id="MediaCleanerConfigPage" data-role="page" class="page type-interior pluginConfigurationPage" data-require="emby-input,emby-button,emby-select,emby-checkbox" data-controller="__plugin/configuration.js">
<div data-role="content">
<div class="content-primary">
<link rel="stylesheet" href="/web/configurationpage?name=global.css" />
<form id="MediaCleanerConfigForm">
<h2>Media Cleaner Configuration</h2>
<div class="inputContainer">
<label class="inputLabel inputLabelUnfocused" for="RadarrHTTPAddress">Radarr Address (http)</label>
<input id="RadarrHTTPAddress" name="RadarrHTTPAddress" type="text" is="emby-input" />
<div class="fieldDescription">The http address of your radarr instance.</div>
</div>
<div class="inputContainer">
<label class="inputLabel inputLabelUnfocused" for="RadarrPort">Radarr Port</label>
<input id="RadarrPort" name="RadarrPort" type="text" is="emby-input" />
<div class="fieldDescription">The port of your radarr instance.</div>
</div>
<div class="inputContainer">
<label class="inputLabel inputLabelUnfocused" for="RadarrAPIKey">Radarr API Key</label>
<input id="RadarrAPIKey" name="RadarrAPIKey" type="text" is="emby-input" />
<input id="RadarrAPIKey" class="medium-width" name="RadarrAPIKey" type="text" is="emby-input" />
<div class="fieldDescription">The api key used by your radarr instance</div>
</div>
<div class="inputContainer">
<label class="inputLabel inputLabelUnfocused" for="SonarrHTTPAddress">Sonarr Address (http)</label>
<input id="SonarrHTTPAddress" name="SonarrHTTPAddress" type="text" is="emby-input" />
<div class="fieldDescription">The http address of your sonarr instance.</div>
<label class="inputLabel inputLabelUnfocused" for="RadarrAddress">Radarr Address (http:port)</label>
<input id="RadarrAddress" class="small-width" name="RadarrAddress" type="text" is="emby-input" />
<div class="fieldDescription">The address and port of your radarr instance.</div>
</div>
<div class="inputContainer">
<label class="inputLabel inputLabelUnfocused" for="SonarrPort">Sonarr Port</label>
<input id="SonarrPort" name="SonarrPort" type="text" is="emby-input" />
<div class="fieldDescription">The port of your sonarr instance.</div>
<button id="RadarrTestConnectionButton" is="emby-button" type="button" class="raised button-submit emby-button small-width">
<span>Test Connection</span>
</button>
</div>
<div class="inputContainer validation hidden medium-width" id="RadarrConnectionValidation" hidden>
</div>
<div class="inputContainer">
<label class="inputLabel inputLabelUnfocused" for="SonarrAPIKey">Sonarr API Key</label>
<input id="SonarrAPIKey" name="SonarrAPIKey" type="text" is="emby-input" />
<input id="SonarrAPIKey" class="medium-width" name="SonarrAPIKey" type="text" is="emby-input" />
<div class="fieldDescription">The api key used by your sonarr instance</div>
</div>
<div class="inputContainer">
<label class="inputLabel inputLabelUnfocused" for="SonarrAddress">Sonarr Address (http:port)</label>
<input id="SonarrAddress" class="small-width" name="SonarrAddress" type="text" is="emby-input" />
<div class="fieldDescription">The address and port of your sonarr instance.</div>
</div>
<div class="inputContainer">
<button id="SonarrTestConnectionButton" is="emby-button" type="button" class="raised button-submit emby-button small-width">
<span>Test Connection</span>
</button>
</div>
<div class="inputContainer validation hidden medium-width" id="SonarrConnectionValidation" hidden>
</div>
<div class="inputContainer">
<label class="inputLabel inputLabelUnfocused" for="StaleMediaCutoff">Stale Media Cutoff</label>
<input id="StaleMediaCutoff" name="StaleMediaCutoff" type="number" is="emby-input" style="width: 20%;"/>
<input id="StaleMediaCutoff" class="xsmall-width" name="StaleMediaCutoff" type="number" is="emby-input"/>
<div class="fieldDescription">How many days to wait before marking files as stale</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="DebugMode" name="DebugMode" type="checkbox" is="emby-checkbox" />
<span>Debug Mode</span>
</label>
</div>
<div>
<button is="emby-button" type="submit" class="raised button-submit block emby-button">
<span>Save</span>