Skip to content

Commit

Permalink
Merge pull request #28 from Alschn/dev
Browse files Browse the repository at this point in the history 
Merge from dev to master - Fix issue with selecting characters on account with dot names, improve html and js code, add extra data attributes
  • Loading branch information
@Alschn
Alschn authored Mar 26, 2024
2 parents 99fcc36 + 04fd1ad commit 27dccd1
Show file tree
Hide file tree
Showing 2 changed files with 89 additions and 55 deletions.
60 changes: 34 additions & 26 deletions manager/static/manager/js/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,41 +8,49 @@ const changeText = (text, id) => {
const maxCharCount = 18;

// Get all the Create New Character buttons
let create_btn = $(".btn-char-create");
create_btn.each(function () {
let createBtn = $(".btn-char-create");
createBtn.each(function () {
const btnElement = $(this);

// If there are 18 or more characters, disable the button
if (Number($(this).attr("data-char-count")) >= maxCharCount) {
$(this).attr("disabled", true);
$(this).addClass("btn-char-disabled");
if (Number(btnElement.attr("data-characters-count")) >= maxCharCount) {
btnElement.attr("disabled", true);
btnElement.addClass("btn-char-disabled");
}
});

$(document).ready(function () {
// get all char containers with a class
let charboxes = $(".clickable");
charboxes.click(function () {
// get all char containers with a class, no mather what account
const allCharBoxes = $(".col-char.clickable");

allCharBoxes.click(function () {
const element = $(this);

// add border initially to the div where we clicked
$(this).addClass("border-yellow");
// get current account name
let acc_id = $(this).attr("id");
element.addClass("border-yellow");

// get current account and character name
const accountName = element.attr("data-account-name");
const charName = element.attr("data-character-name");

// change Delete button hidden input value field
let delete_form = $("#" + acc_id + "[name=char_id]");
let char_name = $(this).attr("data-char");
$(delete_form).val(char_name);
const hiddenInput = $(`input[name='char_id'][data-account-name='${accountName}']`);
$(hiddenInput).val(charName);

// Toggle delete button
let delete_btn = delete_form.next(); // takes next element in DOM which is button in this case
$(delete_btn).removeClass("btn-char-disabled");
$(delete_btn).attr("disabled", false);

// get new querry only with 'local' chars
let query = "#" + acc_id + ".clickable";
let chars = $(query);
// clickable div within current scope
chars.click(function () {
chars.removeClass("border-yellow");
$(this).addClass("border-yellow");
});
const deleteBtn = $(`button[data-account-name='${accountName}']`);
$(deleteBtn).removeClass("btn-char-disabled");
$(deleteBtn).attr("disabled", false);

// get new query only with 'local' chars
const localCharBoxes = $(`.col-char.clickable[data-account-name='${accountName}']`);

localCharBoxes.removeClass("border-yellow");
localCharBoxes.attr("data-selected", false);
localCharBoxes.attr("aria-selected", false);

element.addClass("border-yellow");
element.attr("data-selected", true);
element.attr("aria-selected", true);
});
});
84 changes: 55 additions & 29 deletions manager/templates/manager/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,55 +36,75 @@
{% for account in user_accounts %}
<div class="account-box">
<div class="account-header">
<span>{{ account }}:</span>
<span>{{ account.name }}:</span>
<span>
<a class="float-right del-acc" href="{% url 'account-detail-delete' pk=account.pk %}">Delete Account</a>
<a class="float-right del-acc" href="{% url 'account-detail-delete' pk=account.pk %}">
Delete Account
</a>
</span>
</div>

<div class="row custom-border-header char-name-label">
<h2 id="char-name-label-{{ account.id }}">{{ account.name }}</h2>
</div>

<div class="row custom-border chars-box" id="chars-box-{{ account.id }}">
<div class="row custom-border chars-box" data-account-id="{{ account.id }}">
{% for char in account.chars.all %}
<div
class="col col-char clickable col-6"
class="col col-6 col-char clickable"
onclick="changeText('{{ char.name }}', '{{ account.id }}')"
id="{{ account.name }}" data-char="{{ char.name }}"
data-account-name="{{ account.name }}"
data-character-name="{{ char.name }}"
data-selected="false"
aria-selected="false"
>
<div class="char-img">
<img src="{% get_static_prefix %}{{ char.get_class_image }}" alt="">
</div>

<div class="char-data" data-char="{{ char.name }}">
<div class="char-data" data-character-name="{{ char.name }}">
{% if char.hardcore %}
<span class="hardcore" onclick="createModalOnClick('{{ char.name }}')">{{ char.name }}</span><br>
<span class="hardcore" onclick="createModalOnClick('{{ char.name }}')">
{{ char.name }}
</span>
<br>
{% else %}
<span onclick="createModalOnClick('{{ char.name }}')">{{ char.name }}</span><br>
<span onclick="createModalOnClick('{{ char.name }}')">
{{ char.name }}
</span>
<br>
{% endif %}

<span class="char-info">Level {{ char.level }} {{ char.char_class }}</span><br>
<span class="char-info">
Level {{ char.level }} {{ char.char_class }}
</span>
<br>

{% if char.expansion %}
<span class="expansion">Expansion character</span><br>
<span class="expansion">
Expansion character
</span>
<br>
{% endif %}

{% if char.ladder %}
Ladder character<br>
<span>Ladder character</span>
<br>
{% endif %}

{% if char.last_visited %}
{% if not char.expired and char.expires > 0 and char.expires <= 60 %}
<span class="char-info char-expires">Expires in {{ char.expires }} days</span>
<span class="char-info char-expires">
Expires in {{ char.expires }} days
</span>
{% elif not char.expired and char.expires > 60 %}
{% else %}
<span class="hardcore">Character expired</span>
{% endif %}
{% endif %}

{% if not char.expired and char.expires > 0 %}
<form action="" data-char-name="{{ char.name }}" class="char-bump-form">
<form action="" data-character-name="{{ char.name }}" class="char-bump-form">
{% csrf_token %}
<button class="btn-update" type="submit" name="update_date">Update</button>
</form>
Expand All @@ -100,23 +120,23 @@ <h2 id="char-name-label-{{ account.id }}">{{ account.name }}</h2>
{% csrf_token %}
<button
class="btn-char btn-char-create float-left"
data-char-count="{{ account.chars.all.count }}"
data-characters-count="{{ account.chars.all.count }}"
>
Create New<br>Character
</button>
</form>
</div>

<div class="col button-box">
<input type="hidden" name="char_id" value="" id="{{ account.name }}">
<input type="hidden" name="char_id" value="" data-account-name="{{ account.name }}">
<button
class="btn-char btn-char-delete btn-char-disabled float-right"
data-acc="{{ account.name }}"
type="button"
disabled
class="btn-char btn-char-delete btn-char-disabled float-right"
data-account-name="{{ account.name }}"
data-toggle="modal"
data-target="#ModalCenter"
data-target="#delete-modal"
onclick="setCharDelete(this)"
disabled
>
Delete <br>Character
</button>
Expand All @@ -127,8 +147,12 @@ <h2 id="char-name-label-{{ account.id }}">{{ account.name }}</h2>

<!-- Delete character modal -->
<div
class="modal fade" id="ModalCenter" tabindex="-1"
role="dialog" aria-labelledby="deleteModal" aria-hidden="true"
class="modal fade"
id="delete-modal"
tabindex="-1"
role="dialog"
aria-labelledby="deleteModal"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
Expand All @@ -138,15 +162,17 @@ <h2 id="char-name-label-{{ account.id }}">{{ account.name }}</h2>
</div>
<div class="modal-buttons">
<button type="button" class="btn-char btn-left" data-dismiss="modal">No</button>

<form action="" enctype="multipart/form-data"
class="char-delete-form">
<form
action=""
enctype="multipart/form-data"
class="char-delete-form"
>
{% csrf_token %}
<input type="hidden" name="char_id" value="" id="modal-delete">
<button
type="submit"
class="btn-char btn-right"
data-acc="{{ account.name }}"
data-account-name="{{ account.name }}"
>
Yes
</button>
Expand Down Expand Up @@ -219,7 +245,7 @@ <h2 id="char-name-label-{{ account.id }}">{{ account.name }}</h2>
res => res.json()
).then((data) => {
const {message, character: {expired}} = data;
const charData = document.querySelector(`.char-data[data-char=${charName}]`);
const charData = document.querySelector(`.char-data[data-character-name='${charName}]'`);
const charInfo = charData.querySelector('.char-info.char-expires');
const alertBox = document.getElementById('message-alert');
// create new alert, set its attributes, classname and text
Expand Down Expand Up @@ -253,13 +279,13 @@ <h2 id="char-name-label-{{ account.id }}">{{ account.name }}</h2>
// close delete modal
$('#ModalCenter').modal('hide');
// get char and remove it
const charToDelete = document.querySelector(`.col-char[data-char="${charName}"]`);
const charToDelete = document.querySelector(`.col-char[data-character-name="${charName}"]`);
const parent = charToDelete.parentNode;
// find button in the current account box
const accBox = parent.parentElement;
const createButton = accBox.querySelector('.btn-char-create');
// if account was full previously, enable the create button
const prevCharCount = Number(createButton.getAttribute('data-char-count'));
const prevCharCount = Number(createButton.getAttribute('data-characters-count'));
if (prevCharCount === 18) {
createButton.disabled = false;
createButton.classList.remove('btn-char-disabled');
Expand All @@ -284,7 +310,7 @@ <h2 id="char-name-label-{{ account.id }}">{{ account.name }}</h2>
document.querySelectorAll(".char-bump-form").forEach((form) => {
form.addEventListener('submit', (event) => {
event.preventDefault();
const charName = form.attributes['data-char-name'].value;
const charName = form.attributes['data-character-name'].value;
bumpLastVisited(charName);
});
});
Expand Down

0 comments on commit 27dccd1

Please sign in to comment.