adding a way to manage stante relations in batch

This commit is contained in:
Helder Silva Lopes Moraes 2022-10-27 20:31:38 -03:00
parent d3ea2df1a2
commit cfee08934f
3 changed files with 79 additions and 2 deletions

View file

@ -2346,3 +2346,10 @@ svg.button {
background: #25252a;
}
}
div.states > div.diploDivChk {
width: 1.5em;
display: inline-block;
}
input.diploChk {
display: block;
}

View file

@ -4428,6 +4428,9 @@
<div id="diplomacyEditor" class="dialog stable" style="display: none">
<div id="diplomacyHeader" class="header" style="grid-template-columns: 15em 6em">
<div class="diploDivChk" style="display:none; width:1.5em">
&nbsp;
</div>
<div data-tip="Click to sort by state name" class="sortable alphabetically" data-sortby="name">
State&nbsp;
</div>
@ -4462,6 +4465,24 @@
id="diplomacyExport"
data-tip="Save state relations matrix as a text file (.csv)"
class="icon-download"
></button>
<button
id="diplomacyBatchEdit"
data-tip=""
class="icon-edit"
></button>
<hr>
<!--<button
id="diplomacyImport"
data-tip=""
class="icon-download"
></button>-->
<select id="diplomacyRelationSelect" style="display:none"></select>
<button
id="diplomacyBatchEditConfirm"
data-tip=""
class="icon-ok-circled"
style="display:none"
></button>
</div>
</div>

View file

@ -54,11 +54,20 @@ function editDiplomacy() {
}
};
const selectOptions = Object.entries(relations)
.map(
([relation, {color, inText, tip}]) =>
`<option value="${relation}">${inText}</option>`
)
.join("");
diplomacyRelationSelect.innerHTML = selectOptions;
refreshDiplomacyEditor();
viewbox.style("cursor", "crosshair").on("click", selectStateOnMapClick);
if (modules.editDiplomacy) return;
modules.editDiplomacy = true;
modules.batchEditDiplomacy = false;
$("#diplomacyEditor").dialog({
title: "Diplomacy Editor",
@ -76,6 +85,9 @@ function editDiplomacy() {
document.getElementById("diplomacyShowMatrix").addEventListener("click", showRelationsMatrix);
document.getElementById("diplomacyHistory").addEventListener("click", showRelationsHistory);
document.getElementById("diplomacyExport").addEventListener("click", downloadDiplomacyData);
//document.getElementById("diplomacyImport").addEventListener("click", uploadDiplomacyData);
document.getElementById("diplomacyBatchEdit").addEventListener("click", toggleDiplomacyCheckbox);
document.getElementById("diplomacyBatchEditConfirm").addEventListener("click", ConfirmDiplomacyBatch);
body.addEventListener("click", function (ev) {
const el = ev.target;
@ -91,6 +103,9 @@ function editDiplomacy() {
return;
}
if (el.classList.contains("diploChk")) return;
if (el.classList.contains("diploDivChk")) return;
// select state of clicked line
body.querySelector("div.Self").classList.remove("Self");
el.parentElement.classList.add("Self");
@ -106,11 +121,15 @@ function editDiplomacy() {
function diplomacyEditorAddLines() {
const states = pack.states;
const selectedLine = body.querySelector("div.Self");
const selectedId = selectedLine ? +selectedLine.dataset.id : states.find(s => s.i && !s.removed).i;
const selectedName = states[selectedId].name;
const toggleState = modules.batchEditDiplomacy ? 'inline-block' : 'none';
COArenderer.trigger("stateCOA" + selectedId, states[selectedId].coa);
let lines = /* html */ `<div class="states Self" data-id=${selectedId} data-tip="List below shows relations to ${selectedName}">
<div style="display:${toggleState}" class="diploDivChk"></div>
<div style="width: max-content">${states[selectedId].fullName}</div>
<svg class="coaIcon" viewBox="0 0 200 200"><use href="#stateCOA${selectedId}"></use></svg>
</div>`;
@ -127,7 +146,10 @@ function editDiplomacy() {
const name = state.fullName.length < 23 ? state.fullName : state.name;
COArenderer.trigger("stateCOA" + state.i, state.coa);
lines += /* html */ `<div class="states" data-id=${state.i} data-name="${name}" data-relations="${relation}">
<div data-tip="${tipSelect}" style="display:${toggleState}" class="diploDivChk"><input class="diploChk" type="checkbox" name="chk[${selectedId}][]" value="${state.i}"></div>
<svg data-tip="${tipSelect}" class="coaIcon" viewBox="0 0 200 200"><use href="#stateCOA${state.i}"></use></svg>
<div data-tip="${tipSelect}" style="width: 12em">${name}</div>
<div data-tip="${tipChange}" class="changeRelations" style="width: 6em">
@ -444,6 +466,9 @@ function editDiplomacy() {
downloadFile(data, name);
}
function uploadDiplomacyData() {
}
function closeDiplomacyEditor() {
restoreDefaultEvents();
clearMainTip();
@ -453,4 +478,28 @@ function editDiplomacy() {
else toggleStates();
debug.selectAll(".highlight").remove();
}
function toggleDiplomacyCheckbox(){
modules.batchEditDiplomacy = !modules.batchEditDiplomacy;
diplomacyRelationSelect.style.display = (modules.batchEditDiplomacy?"inline-block":"none");
diplomacyBatchEditConfirm.style.display = (modules.batchEditDiplomacy?"inline-block":"none");
diplomacyHeader.style['grid-template-columns'] = (modules.batchEditDiplomacy?"1.5em 15em 6em":"15em 6em");
document.querySelectorAll(".diploDivChk").forEach(el => (el.style.display = (modules.batchEditDiplomacy?"inline-block":"none")));
document.querySelectorAll(".diploDivChk > input").forEach(el => (el.checked = false));
}
function ConfirmDiplomacyBatch() {
const states = pack.states;
//Apply relation changes for selected states
document.querySelectorAll(".diploDivChk > input.diploChk:checked").forEach(function(ipt){
const objectId = +body.querySelector("div.Self").dataset.id;
const subjectId =ipt.value;
changeRelation(subjectId, objectId, states[subjectId].diplomacy[objectId], diplomacyRelationSelect.value);
});
//Clear selection waiting for next batch
document.querySelectorAll(".diploDivChk").forEach(el => (el.checked = false));
}
}