|
import Component from '../lib/component.js'; |
|
import store from '../store/index.js'; |
|
|
|
const thumbnails_path = "images/agents_thumbnails/"; |
|
|
|
|
|
|
|
|
|
export default class AgentsList extends Component { |
|
constructor() { |
|
super({ |
|
store, |
|
element: document.querySelector('#agents_list_container'), |
|
eventName: 'agentsListChange' |
|
}); |
|
} |
|
|
|
|
|
|
|
|
|
render() { |
|
let dict = window.lang_dict[store.state.language]['agentsList']; |
|
let morph_dict = window.lang_dict[store.state.language]['morphologies']; |
|
this.element.querySelector('#agents_list_title').innerHTML = `<strong>${dict['title']}</strong>`; |
|
this.element.querySelector('#agents_list').innerHTML = store.state.agents.map(agent => { |
|
|
|
return `<li name="agent-list-item" class="list-group-item d-flex justify-content-between align-items-center px-0 py-1"> |
|
|
|
<!-- Thumbnail of the morphology --> |
|
<img src=${thumbnails_path + agent.morphology + "_thumbnail.png"} |
|
alt=${agent.morphology + "_thumbnail"} |
|
width="8%" |
|
class="mx-1" |
|
data-bs-toggle="tooltip" title=${morph_dict[agent.morphology]['title']}> |
|
|
|
<!-- Text field of the name of the agent --> |
|
<div class="form-group"> |
|
<input name="agentNameArea" type="text" class="form-control w-75 mx-1" placeholder="${agent.name}"> |
|
</div> |
|
|
|
<!-- Follow switch --> |
|
<label class="form-check-label" for="followSwitch">${dict['follow']}</label> |
|
<div class="form-check form-switch mx-1"> |
|
<input name="followSwitch" class="form-check-input" type="checkbox" data-bs-toggle="tooltip" title="${dict['followTooltip']}"> |
|
</div> |
|
|
|
<!-- Save and reset position buttons --> |
|
<div name="positionButtonsGroup" class="btn-group" role="group"> |
|
<button name="savePositionButton" type="button" class="btn btn-primary btn-sm" |
|
data-bs-toggle="tooltip" title="${dict['savePosTooltip']}"> |
|
<i class="far fa-save fa-lg"></i> |
|
</button> |
|
<button name="resetPositionButton" type="button" class="btn btn-primary btn-sm" |
|
data-bs-toggle="tooltip" title="${dict['resetPosTooltip']}"> |
|
<i class="fas fa-undo-alt"></i> |
|
</button> |
|
</div> |
|
|
|
<!-- Delete button --> |
|
<button name="deleteButton" type="button" class="btn btn-danger btn-sm mx-1" |
|
data-bs-toggle="tooltip" title="${dict['deleteAgentTooltip']}"> |
|
<i class="fa fa-trash"></i> |
|
</button> |
|
</li>`; |
|
}).join(''); |
|
|
|
|
|
this.element.querySelectorAll('li[name="agent-list-item"]').forEach((span, index) => { |
|
if(store.state.drawingModeState.drawing){ |
|
span.classList.add('disabled'); |
|
} |
|
else{ |
|
if(store.state.agents[index] == store.state.simulationState.agentSelected){ |
|
span.classList.add("active"); |
|
} |
|
else{ |
|
span.classList.remove("active"); |
|
} |
|
} |
|
}); |
|
|
|
|
|
|
|
|
|
this.element.querySelectorAll('button[name="deleteButton"]').forEach((span, index) => { |
|
span.addEventListener('click', () => { |
|
store.dispatch('deleteAgent', {index: index}); |
|
}); |
|
}); |
|
|
|
|
|
this.element.querySelectorAll('button[name="savePositionButton"]').forEach((span, index) => { |
|
span.addEventListener('click', () => { |
|
let pos = window.game.env.agents[index].agent_body.reference_head_object.GetPosition().Clone(); |
|
store.dispatch('setAgentInitPos', {index: index, init_pos: pos}); |
|
}); |
|
}); |
|
|
|
|
|
this.element.querySelectorAll('button[name="resetPositionButton"]').forEach((span, index) => { |
|
span.addEventListener('click', () => { |
|
store.dispatch('setAgentInitPos', {index: index, init_pos: null}); |
|
let init_x = TERRAIN_STEP * INITIAL_TERRAIN_STARTPAD / 2; |
|
window.game.env.set_agent_position(window.game.env.agents[index], init_x, null); |
|
window.game.env.render(); |
|
}); |
|
}); |
|
|
|
|
|
this.element.querySelectorAll('input[name="followSwitch"]').forEach((span, index) => { |
|
span.addEventListener('input', () => { |
|
store.dispatch('followAgent', {index: span.checked ? index : -1}); |
|
}); |
|
span.checked = store.state.simulationState.agentFollowed == store.state.agents[index]; |
|
}); |
|
|
|
|
|
this.element.querySelectorAll('input[name="agentNameArea"]').forEach((span, index) => { |
|
span.addEventListener('keydown', (event) => { |
|
if(event.keyCode == '13'){ |
|
store.dispatch('renameAgent', {index: index, value: span.value}); |
|
} |
|
}); |
|
}); |
|
|
|
|
|
this.element.querySelectorAll('[data-bs-toggle="tooltip"]').forEach((el, index) => { |
|
return new bootstrap.Tooltip(el, { |
|
trigger: 'hover' |
|
}); |
|
}); |
|
} |
|
}; |