Working, albeit very ugly, inefficient, and sometimes wonky merits.
This commit is contained in:
parent
95ad1c6e28
commit
59f35d0366
|
@ -29,7 +29,7 @@ export async function updateBasicInfo(params: UpdateBasicInfoRequest): Promise<A
|
||||||
return ApiResult.deserializeBinary(data);
|
return ApiResult.deserializeBinary(data);
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function updateMerits(params: UpdateMeritsRequest): Promise<ApiReslut> {
|
export async function updateMerits(params: UpdateMeritsRequest): Promise<ApiResult> {
|
||||||
let data = await makeRequest('/api/rpc/cofd/update_merits', params);
|
let data = await makeRequest('/api/rpc/cofd/update_merits', params);
|
||||||
return ApiResult.deserializeBinary(data);
|
return ApiResult.deserializeBinary(data);
|
||||||
}
|
}
|
||||||
|
|
|
@ -97,13 +97,17 @@ import * as api from "../api";
|
||||||
|
|
||||||
function setupMerits() {
|
function setupMerits() {
|
||||||
async function updateMerits() {
|
async function updateMerits() {
|
||||||
|
let meritElements = document.querySelectorAll<HTMLInputElement>('#merits input[class="merit-name"]');
|
||||||
let merits: CofdSheet.Merit[] =
|
let merits: CofdSheet.Merit[] =
|
||||||
Array.from(document.querySelectorAll<HTMLInputElement>('#merits input[class="merit"]')).map(input => {
|
Array.from(meritElements).map(input => {
|
||||||
const dotsInput = input.parentElement?.querySelector<HTMLInputElement>('input[class="merit-dots"]');
|
const dotsInput = input.parentElement?.querySelector<HTMLInputElement>('input[class="merit-dots"]');
|
||||||
|
|
||||||
|
let dotsAmount = dotsInput?.value ?? "0";
|
||||||
|
if (dotsAmount.length == 0) { dotsAmount = "0"; }
|
||||||
|
|
||||||
const merit = new CofdSheet.Merit();
|
const merit = new CofdSheet.Merit();
|
||||||
merit.setName(input.value);
|
merit.setName(input.value);
|
||||||
merit.setDots(parseInt(dotsInput?.value ?? "0"));
|
merit.setDots(parseInt(dotsAmount));
|
||||||
|
|
||||||
return merit;
|
return merit;
|
||||||
});
|
});
|
||||||
|
@ -116,18 +120,63 @@ import * as api from "../api";
|
||||||
console.log("got a response back", resp);
|
console.log("got a response back", resp);
|
||||||
}
|
}
|
||||||
|
|
||||||
const meritNames = document.querySelectorAll('#merits input[class="merit"]');
|
async function removeMerit(event: Event) {
|
||||||
const meritDots = document.querySelectorAll('#merits input[class="merit-dots"]');
|
const button = event.target as Option<Element>;
|
||||||
|
const meritLine = button?.parentElement;
|
||||||
|
if (meritLine) {
|
||||||
|
document.querySelector("#merit-list")?.removeChild(meritLine);
|
||||||
|
await updateMerits();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
meritNames.forEach(input => {
|
function addMeritLine() {
|
||||||
console.log('got an input', input);
|
const meritName = document.createElement('input');
|
||||||
input.addEventListener('blur', updateMerits);
|
meritName.type = 'text';
|
||||||
});
|
meritName.value = '';
|
||||||
|
meritName.classList.add('merit-name');
|
||||||
|
|
||||||
meritDots.forEach(input => {
|
const meritDots = document.createElement('input');
|
||||||
console.log('got an input', input);
|
meritDots.type = 'number';
|
||||||
input.addEventListener('change', updateMerits);
|
meritDots.min = '0';
|
||||||
});
|
meritDots.value = '0';
|
||||||
|
meritDots.classList.add('merit-dots');
|
||||||
|
|
||||||
|
const removeButton = document.createElement('button');
|
||||||
|
removeButton.innerText = "X";
|
||||||
|
removeButton.setAttribute('data-event-type', 'remove-merit');
|
||||||
|
|
||||||
|
const dots = document.createElement('span');
|
||||||
|
dots.innerText = 'Dots';
|
||||||
|
|
||||||
|
const merit = document.createElement('div');
|
||||||
|
merit.classList.add('merit');
|
||||||
|
merit.appendChild(meritName);
|
||||||
|
merit.appendChild(meritDots);
|
||||||
|
merit.appendChild(dots);
|
||||||
|
merit.appendChild(removeButton);
|
||||||
|
|
||||||
|
document.querySelector<HTMLDivElement>("#merit-list")?.appendChild(merit);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function processControlEvent(event: Event) {
|
||||||
|
console.log('processing merit control event');
|
||||||
|
const element = event.target as Element;
|
||||||
|
const eventType = element.getAttribute('data-event-type') ?? '';
|
||||||
|
|
||||||
|
if (eventType == 'remove-merit') {
|
||||||
|
await removeMerit(event);
|
||||||
|
} else if (eventType == 'add-merit') {
|
||||||
|
addMeritLine();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const meritControls = document.querySelector<HTMLDivElement>("#merit-controls");
|
||||||
|
meritControls?.addEventListener('click', processControlEvent);
|
||||||
|
|
||||||
|
const meritList = document.querySelector<HTMLDivElement>("#merit-list");
|
||||||
|
meritList?.addEventListener('click', processControlEvent);
|
||||||
|
meritList?.addEventListener('blur', updateMerits);
|
||||||
|
meritList?.addEventListener('change', updateMerits);
|
||||||
}
|
}
|
||||||
|
|
||||||
setupAttributes();
|
setupAttributes();
|
||||||
|
|
|
@ -156,5 +156,18 @@
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div id="merits">
|
||||||
|
<h2>Merits</h2>
|
||||||
|
<div id="merit-list">
|
||||||
|
{% for merit in sheet.merits %}
|
||||||
|
{{ macros::merit(name=merit.name, value=merit.dots) }}
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="merit-controls">
|
||||||
|
<button data-event-type="add-merit">Add Merit</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% endblock content %}
|
{% endblock content %}
|
||||||
|
|
|
@ -1,13 +1,21 @@
|
||||||
{% macro attribute(name, value) %}
|
{% macro attribute(name, value) %}
|
||||||
<div class="attribute">
|
<div class="attribute">
|
||||||
<label for="{{name}}">{{name}}:</label>
|
<label for="{{name}}">{{name}}:</label>
|
||||||
<input id="{{name}}" name="{{name}}" type="number" min="0" value="{{value}}" />
|
<input id="{{name}}" name="{{name}}" type="number" min="0" value="{{value}}" />
|
||||||
</div>
|
</div>
|
||||||
{% endmacro attribute %}
|
{% endmacro attribute %}
|
||||||
|
|
||||||
{% macro skill(name, value) %}
|
{% macro skill(name, value) %}
|
||||||
<div class="skill">
|
<div class="skill">
|
||||||
<label for="{{name}}">{{name}}:</label>
|
<label for="{{name}}">{{name}}:</label>
|
||||||
<input id="{{name}}" name="{{name}}" type="number" min="0" value="{{value}}" />
|
<input id="{{name}}" name="{{name}}" type="number" min="0" value="{{value}}" />
|
||||||
</div>
|
</div>
|
||||||
{% endmacro skill %}
|
{% endmacro skill %}
|
||||||
|
|
||||||
|
{% macro merit(name, value) %}
|
||||||
|
<div class="merit">
|
||||||
|
<input type="text" class="merit-name" value="{{name}}" />
|
||||||
|
<input type="number" class="merit-dots" min="0" value="{{value}}" /> <span>Dots</span>
|
||||||
|
<button data-event-type="remove-merit">X</button>
|
||||||
|
</div>
|
||||||
|
{% endmacro merit %}
|
||||||
|
|
|
@ -163,7 +163,7 @@ pub(super) async fn update_skill_value<'a>(
|
||||||
}))
|
}))
|
||||||
}
|
}
|
||||||
|
|
||||||
#[post("/rpc/cofd/update_skill_value", data = "<req>")]
|
#[post("/rpc/cofd/update_merits", data = "<req>")]
|
||||||
pub(super) async fn update_merits<'a>(
|
pub(super) async fn update_merits<'a>(
|
||||||
req: Proto<UpdateMeritsRequest>,
|
req: Proto<UpdateMeritsRequest>,
|
||||||
conn: TenebrousDbConn<'_>,
|
conn: TenebrousDbConn<'_>,
|
||||||
|
|
Loading…
Reference in New Issue