forked from enviPath/enviPy
[Feature] Alias Support (#151)
Fixes #149 Co-authored-by: Tim Lorsbach <tim@lorsba.ch> Reviewed-on: enviPath/enviPy#151
This commit is contained in:
@ -15,12 +15,12 @@
|
||||
enctype="multipart/form-data">
|
||||
{% csrf_token %}
|
||||
<p>
|
||||
<label class="btn btn-primary" for="jsonFile">
|
||||
<input id="jsonFile" name="file" type="file" style="display:none;"
|
||||
onchange="$('#upload-file-info').html(this.files[0].name)">
|
||||
<label class="btn btn-primary" for="legacyJsonFile">
|
||||
<input id="legacyJsonFile" name="file" type="file" style="display:none;"
|
||||
onchange="$('#upload-legacy-file-info').html(this.files[0].name)">
|
||||
Choose JSON File
|
||||
</label>
|
||||
<span class="label label-info" id="upload-file-info"></span>
|
||||
<span class="label label-info" id="upload-legacy-file-info"></span>
|
||||
<input type="hidden" value="import-legacy-package-json" name="hidden" readonly="">
|
||||
</p>
|
||||
</form>
|
||||
|
||||
169
templates/modals/objects/generic_set_aliases_modal.html
Normal file
169
templates/modals/objects/generic_set_aliases_modal.html
Normal file
@ -0,0 +1,169 @@
|
||||
{% load static %}
|
||||
|
||||
<style>
|
||||
.alias-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
padding: 4px 6px;
|
||||
cursor: text;
|
||||
min-height: 38px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.alias {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
background-color: #5bc0de;
|
||||
color: white;
|
||||
padding: 4px 8px;
|
||||
margin: 3px 3px;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.alias .remove {
|
||||
margin-left: 6px;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.alias-input {
|
||||
flex: 1;
|
||||
min-width: 120px;
|
||||
border: none;
|
||||
outline: none;
|
||||
margin: 3px 3px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.form-control.alias-container {
|
||||
height: auto;
|
||||
box-shadow: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="modal fade bs-modal-lg" id="set_aliases_modal" tabindex="-1" aria-labelledby="set_aliases_modal"
|
||||
aria-modal="true" role="dialog">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
<h4 class="modal-title">Set Aliases for {{ current_object.name }}</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="set_aliases_modal_form" accept-charset="UTF-8" action="{{ current_object.url }}"
|
||||
data-remote="true" method="post">
|
||||
{% csrf_token %}
|
||||
<label for="alias-input">Aliases:</label>
|
||||
<div class="form-control alias-container" id="alias-box">
|
||||
{% for alias in current_object.aliases %}
|
||||
<span class="alias">{{ alias|escape }}<span class="remove">×</span></span>
|
||||
{% endfor %}
|
||||
<input type="text" id="alias-input" class="alias-input" placeholder="Add Alias...">
|
||||
</div>
|
||||
</form>
|
||||
<div id="add-alias-error-message" class="alert alert-danger" role="alert" style="display: none">
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary pull-left" data-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary" id="set_aliases_modal_form_submit">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<script>
|
||||
$(function () {
|
||||
|
||||
function addAlias(aliasText) {
|
||||
aliasText = aliasText.trim();
|
||||
if (aliasText === '') return;
|
||||
|
||||
// Avoid duplicate aliass
|
||||
var exists = false;
|
||||
$('#alias-box .alias').each(function () {
|
||||
if ($(this).text().replace('×', '').trim().toLowerCase() === aliasText.toLowerCase()) {
|
||||
exists = true;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
if (!exists) {
|
||||
var aliasHtml = '<span class="alias">' + $('<div>').text(aliasText).html() +
|
||||
'<span class="remove">×</span></span>';
|
||||
$(aliasHtml).insertBefore('#alias-input');
|
||||
}
|
||||
|
||||
$('#alias-input').val('');
|
||||
}
|
||||
|
||||
// Add alias when Enter is pressed
|
||||
$('#alias-input').on('keypress', function (e) {
|
||||
if (e.which === 13) {
|
||||
e.preventDefault();
|
||||
addAlias($(this).val());
|
||||
}
|
||||
});
|
||||
|
||||
// Add alias when input loses focus
|
||||
$('#alias-input').on('blur', function () {
|
||||
var val = $(this).val();
|
||||
if (val.trim() !== '') {
|
||||
addAlias(val);
|
||||
}
|
||||
});
|
||||
|
||||
// Remove alias when clicking ×
|
||||
$('#alias-box').on('click', '.remove', function () {
|
||||
$(this).closest('.alias').remove();
|
||||
});
|
||||
|
||||
// Focus input when clicking the container
|
||||
$('#alias-box').on('click', function () {
|
||||
$('#alias-input').focus();
|
||||
});
|
||||
|
||||
|
||||
$('#set_aliases_modal_form_submit').on('click', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
let aliases = [];
|
||||
$('#alias-box .alias').each(function () {
|
||||
aliases.push($(this).text().replace('×', '').trim())
|
||||
});
|
||||
|
||||
if (aliases.length === 0) {
|
||||
// Set empty string for deletion of all aliases
|
||||
// If empty list is sent, its gets removed entirely from post data
|
||||
aliases = ['']
|
||||
}
|
||||
|
||||
formData = {
|
||||
'aliases': aliases
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
type: 'post',
|
||||
data: formData,
|
||||
url: '{{ current_object.url }}',
|
||||
traditional: true,
|
||||
success: function (data, textStatus) {
|
||||
window.location.href = data.success;
|
||||
},
|
||||
error: function (jqXHR, textStatus, errorThrown) {
|
||||
$('#add-alias-error-message').append('<p>Setting aliases failed!</p>');
|
||||
$('#add-alias-error-message').show(); }
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
@ -64,8 +64,8 @@
|
||||
|
||||
$('#set_scenario_modal_form_submit').on('click', function (e) {
|
||||
e.preventDefault();
|
||||
if ($('##scenario-select').val().length == 0) {
|
||||
$('##scenario-select').val([''])
|
||||
if ($('#scenario-select').val().length == 0) {
|
||||
$('#scenario-select').val([''])
|
||||
}
|
||||
$('#set_scenario_modal_form').submit();
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user