Profile controller refactor (#950)

* Add additional fields for consistency

* Fix copy confirm not working correctly

* Update IDs
This commit is contained in:
toasted-nutbread 2020-10-20 22:15:11 -04:00 committed by GitHub
parent 6f980d8f2b
commit fcf63d71f5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 38 additions and 32 deletions

View File

@ -31,8 +31,11 @@ class ProfileController {
this._profileCopySourceSelect = null; this._profileCopySourceSelect = null;
this._profileNameInput = null; this._profileNameInput = null;
this._removeProfileNameElement = null; this._removeProfileNameElement = null;
this._profileAddButton = null;
this._profileRemoveButton = null; this._profileRemoveButton = null;
this._profileRemoveConfirmButton = null;
this._profileCopyButton = null; this._profileCopyButton = null;
this._profileCopyConfirmButton = null;
this._profileMoveUpButton = null; this._profileMoveUpButton = null;
this._profileMoveDownButton = null; this._profileMoveDownButton = null;
this._profileRemoveModal = null; this._profileRemoveModal = null;
@ -44,26 +47,29 @@ class ProfileController {
const {platform: {os}} = await api.getEnvironmentInfo(); const {platform: {os}} = await api.getEnvironmentInfo();
this._profileConditionsUI.os = os; this._profileConditionsUI.os = os;
this._profileActiveSelect = document.querySelector('#profile-active'); this._profileActiveSelect = document.querySelector('#profile-active-select');
this._profileTargetSelect = document.querySelector('#profile-target'); this._profileTargetSelect = document.querySelector('#profile-target-select');
this._profileCopySourceSelect = document.querySelector('#profile-copy-source'); this._profileCopySourceSelect = document.querySelector('#profile-copy-source-select');
this._profileNameInput = document.querySelector('#profile-name'); this._profileNameInput = document.querySelector('#profile-name-input');
this._removeProfileNameElement = document.querySelector('#profile-remove-modal-profile-name'); this._removeProfileNameElement = document.querySelector('#profile-remove-name');
this._profileRemoveButton = document.querySelector('#profile-remove'); this._profileAddButton = document.querySelector('#profile-add-button');
this._profileCopyButton = document.querySelector('#profile-copy'); this._profileRemoveButton = document.querySelector('#profile-remove-button');
this._profileMoveUpButton = document.querySelector('#profile-move-up'); this._profileRemoveConfirmButton = document.querySelector('#profile-remove-confirm-button');
this._profileMoveDownButton = document.querySelector('#profile-move-down'); this._profileCopyButton = document.querySelector('#profile-copy-button');
this._profileRemoveModal = this._modalController.getModal('profile-remove-modal'); this._profileCopyConfirmButton = document.querySelector('#profile-copy-confirm-button');
this._profileCopyModal = this._modalController.getModal('profile-copy-modal'); this._profileMoveUpButton = document.querySelector('#profile-move-up-button');
this._profileMoveDownButton = document.querySelector('#profile-move-down-button');
this._profileRemoveModal = this._modalController.getModal('profile-remove');
this._profileCopyModal = this._modalController.getModal('profile-copy');
this._profileActiveSelect.addEventListener('change', this._onProfileActiveChange.bind(this), false); this._profileActiveSelect.addEventListener('change', this._onProfileActiveChange.bind(this), false);
this._profileTargetSelect.addEventListener('change', this._onProfileTargetChange.bind(this), false); this._profileTargetSelect.addEventListener('change', this._onProfileTargetChange.bind(this), false);
this._profileNameInput.addEventListener('change', this._onNameChanged.bind(this), false); this._profileNameInput.addEventListener('change', this._onNameChanged.bind(this), false);
document.querySelector('#profile-add').addEventListener('click', this._onAdd.bind(this), false); this._profileAddButton.addEventListener('click', this._onAdd.bind(this), false);
this._profileRemoveButton.addEventListener('click', this._onRemove.bind(this), false); this._profileRemoveButton.addEventListener('click', this._onRemove.bind(this), false);
document.querySelector('#profile-remove-confirm').addEventListener('click', this._onRemoveConfirm.bind(this), false); this._profileRemoveConfirmButton.addEventListener('click', this._onRemoveConfirm.bind(this), false);
this._profileCopyButton.addEventListener('click', this._onCopy.bind(this), false); this._profileCopyButton.addEventListener('click', this._onCopy.bind(this), false);
document.querySelector('#profile-copy-confirm').addEventListener('click', this._onCopyConfirm.bind(this), false); this._profileCopyConfirmButton.addEventListener('click', this._onCopyConfirm.bind(this), false);
this._profileMoveUpButton.addEventListener('click', this._onMove.bind(this, -1), false); this._profileMoveUpButton.addEventListener('click', this._onMove.bind(this, -1), false);
this._profileMoveDownButton.addEventListener('click', this._onMove.bind(this, 1), false); this._profileMoveDownButton.addEventListener('click', this._onMove.bind(this, 1), false);
@ -170,7 +176,7 @@ class ProfileController {
const profileIndex = this._settingsController.profileIndex; const profileIndex = this._settingsController.profileIndex;
const max = this._optionsFull.profiles.length; const max = this._optionsFull.profiles.length;
const index = this._tryGetIntegerValue('#profile-copy-source', 0, max); const index = this._tryGetIntegerValue(this._profileCopySourceSelect.value, 0, max);
if (index === null || index === profileIndex) { return; } if (index === null || index === profileIndex) { return; }
this._copyProfile(profileIndex, index); this._copyProfile(profileIndex, index);

View File

@ -29,29 +29,29 @@
</p> </p>
<div class="form-group"> <div class="form-group">
<label for="profile-active">Active profile</label> <label for="profile-active-select">Active profile</label>
<select class="form-control" id="profile-active"></select> <select class="form-control" id="profile-active-select"></select>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="profile-target">Modifying profile</label> <label for="profile-target-select">Modifying profile</label>
<div class="input-group"> <div class="input-group">
<div class="input-group-btn"> <div class="input-group-btn">
<button class="btn btn-default" id="profile-add" title="Add"><span class="glyphicon glyphicon-plus"></span></button> <button class="btn btn-default" id="profile-add-button" title="Add"><span class="glyphicon glyphicon-plus"></span></button>
<button class="btn btn-default" id="profile-move-up" title="Move up"><span class="glyphicon glyphicon-arrow-up"></span></button> <button class="btn btn-default" id="profile-move-up-button" title="Move up"><span class="glyphicon glyphicon-arrow-up"></span></button>
<button class="btn btn-default" id="profile-move-down" title="Move down"><span class="glyphicon glyphicon-arrow-down"></span></button> <button class="btn btn-default" id="profile-move-down-button" title="Move down"><span class="glyphicon glyphicon-arrow-down"></span></button>
<button class="btn btn-default" id="profile-copy" title="Copy"><span class="glyphicon glyphicon-copy"></span></button> <button class="btn btn-default" id="profile-copy-button" title="Copy"><span class="glyphicon glyphicon-copy"></span></button>
</div> </div>
<select class="form-control profile-form-manual" id="profile-target"></select> <select class="form-control profile-form-manual" id="profile-target-select"></select>
<div class="input-group-btn"> <div class="input-group-btn">
<button class="btn btn-danger" id="profile-remove" title="Remove"><span class="glyphicon glyphicon-remove"></span></button> <button class="btn btn-danger" id="profile-remove-button" title="Remove"><span class="glyphicon glyphicon-remove"></span></button>
</div> </div>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="profile-name">Profile name</label> <label for="profile-name-input">Profile name</label>
<input type="text" id="profile-name" class="form-control"> <input type="text" id="profile-name-input" class="form-control">
</div> </div>
<div class="form-group"> <div class="form-group">
@ -75,7 +75,7 @@
<button class="btn btn-default" id="profile-add-condition-group">Add Condition Group</button> <button class="btn btn-default" id="profile-add-condition-group">Add Condition Group</button>
</div> </div>
<div class="modal fade" tabindex="-1" role="dialog" id="profile-copy-modal"> <div class="modal fade" tabindex="-1" role="dialog" id="profile-copy">
<div class="modal-dialog modal-dialog-centered"> <div class="modal-dialog modal-dialog-centered">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
@ -84,17 +84,17 @@
</div> </div>
<div class="modal-body"> <div class="modal-body">
<p>Select which profile to copy options from:</p> <p>Select which profile to copy options from:</p>
<select class="form-control" id="profile-copy-source"></select> <select class="form-control" id="profile-copy-source-select"></select>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" id="profile-copy-confirm">Copy Profile</button> <button type="button" class="btn btn-primary" id="profile-copy-confirm-button">Copy Profile</button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="modal fade" tabindex="-1" role="dialog" id="profile-remove-modal"> <div class="modal fade" tabindex="-1" role="dialog" id="profile-remove">
<div class="modal-dialog modal-dialog-centered"> <div class="modal-dialog modal-dialog-centered">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
@ -102,11 +102,11 @@
<h4 class="modal-title">Confirm profile removal</h4> <h4 class="modal-title">Confirm profile removal</h4>
</div> </div>
<div class="modal-body"> <div class="modal-body">
Are you sure you want to delete the profile <em id="profile-remove-modal-profile-name"></em>? Are you sure you want to delete the profile <em id="profile-remove-name"></em>?
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-danger" id="profile-remove-confirm">Remove Profile</button> <button type="button" class="btn btn-danger" id="profile-remove-confirm-button">Remove Profile</button>
</div> </div>
</div> </div>
</div> </div>