|
import Component from '../lib/component.js'; |
|
import store from '../store/index.js'; |
|
|
|
|
|
|
|
|
|
export default class EnvsSet extends Component{ |
|
|
|
|
|
|
|
|
|
constructor() { |
|
super({ |
|
store, |
|
element: document.querySelector('#getting-started-tab'), |
|
eventName: 'envsSetChange' |
|
}); |
|
} |
|
|
|
|
|
|
|
|
|
render(){ |
|
let dict = window.lang_dict[store.state.language]['envsSets']; |
|
|
|
this.element.querySelector('#baseSetText').innerHTML = dict['baseSetText']; |
|
this.element.querySelector('#customSetText').innerHTML = dict['customSetText']; |
|
|
|
|
|
let baseEnvs = this.element.querySelector('#baseEnvsSet'); |
|
|
|
baseEnvs.innerHTML = store.state.envsSets.baseEnvsSet.map(e => { |
|
|
|
return `<div class="col" name="env-set-item"> |
|
<div class="card bg-light h-100 btn p-0" name="env-card"> |
|
|
|
<!-- Thumbnail of the environment --> |
|
<img name="env_thumbnail" class="card-image-top" src=${e.image} alt=${e.description.name}> |
|
|
|
<!-- Name and description of the environment --> |
|
<div class="card-body"> |
|
<h1 class="card-title"><strong>${e.description[store.state.language]['name']}</strong></h1> |
|
<p class="card-text">${e.description[store.state.language]['text']}</p> |
|
</div> |
|
</div> |
|
</div>` |
|
}).join(''); |
|
|
|
|
|
let customEnvs = this.element.querySelector('#customEnvsSet'); |
|
|
|
|
|
let uploadCard = `<div class="col mb-3"> |
|
<div class="card h-100"> |
|
<div class="card-body"> |
|
<h1 class="card-title"><strong>${dict['uploadCard']['title']}</strong></h1> |
|
<p class="card-text">${dict['uploadCard']['text']}</p> |
|
<div class="input-group my-3"> |
|
<input id="uploadEnvFile" type="file" class="custom-file-input" accept=".json"> |
|
</div> |
|
</div> |
|
<div class="card-footer"> |
|
<button id="uploadEnvBtn" class="btn btn-warning w-100" type="button" |
|
data-bs-toggle="tooltip" title="${dict['uploadCard']['uploadBtnTooltip']}"> |
|
<i class="fas fa-upload"></i> |
|
</button> |
|
</div> |
|
</div> |
|
</div>`; |
|
|
|
let envCards = store.state.envsSets.customEnvsSet.map((e, index) => { |
|
|
|
return `<div class="col mb-3" name="env-set-item"> |
|
<div class="card bg-light h-100 btn p-0" name="env-card"> |
|
|
|
<!-- Thumbnail of the environment --> |
|
<img name="env_thumbnail" class="card-image-top" src=${e.image} alt=${e.description.name}> |
|
|
|
<!-- Name and description of the environment --> |
|
<div class="card-body"> |
|
<h1 class="card-title"><strong>${e.description.name}</strong></h1> |
|
<p class="card-text">${e.description.text}</p> |
|
</div> |
|
|
|
<!-- Download and delete buttons in the footer --> |
|
<div class="card-footer justify-content-between"> |
|
<button name="downloadEnvBtn" class="btn btn-primary mx-1" type="button" data-bs-toggle="tooltip" title="${dict['downloadBtnTooltip']}"> |
|
<i class="fas fa-download"></i></button> |
|
<button name="deleteEnvBtn" class="btn btn-danger mx-1" type="button" data-bs-toggle="tooltip" title="${dict['deleteBtnTooltip']}"> |
|
<i class="fa fa-trash"></i></button> |
|
</div> |
|
</div> |
|
</div>` |
|
}).join(''); |
|
|
|
customEnvs.innerHTML = [uploadCard, envCards].join(''); |
|
|
|
|
|
|
|
|
|
baseEnvs.querySelectorAll('div[name="env-card"]').forEach((span, index) => { |
|
span.addEventListener('click', () => { |
|
store.dispatch('loadEnv', store.state.envsSets.baseEnvsSet[index]); |
|
}) |
|
}); |
|
|
|
|
|
customEnvs.querySelectorAll('div[name="env-card"]').forEach((span, index) => { |
|
span.addEventListener('click', () => { |
|
store.dispatch('loadEnv', store.state.envsSets.customEnvsSet[index]); |
|
}) |
|
}); |
|
|
|
|
|
customEnvs.querySelector('#uploadEnvBtn').addEventListener('click', () => { |
|
let reader = new FileReader(); |
|
reader.addEventListener('load', () => { |
|
let env = JSON.parse(reader.result); |
|
store.dispatch('addEnv',{set: 'custom', env: env}); |
|
}); |
|
let file = customEnvs.querySelector('#uploadEnvFile').files[0]; |
|
if(file != null){ |
|
reader.readAsText(file); |
|
} |
|
}); |
|
|
|
|
|
customEnvs.querySelectorAll('button[name="downloadEnvBtn"]').forEach((span, index) => { |
|
span.addEventListener('click', () => { |
|
downloadObjectAsJson(store.state.envsSets.customEnvsSet[index], store.state.envsSets.customEnvsSet[index].description.name.split(' ').join('_')); |
|
}) |
|
}); |
|
|
|
|
|
customEnvs.querySelectorAll('button[name="deleteEnvBtn"]').forEach((span, index) => { |
|
span.addEventListener('click', () => { |
|
store.dispatch('deleteEnv', index); |
|
}) |
|
}); |
|
|
|
|
|
this.element.querySelectorAll('[data-bs-toggle="tooltip"]').forEach((el, index) => { |
|
return new bootstrap.Tooltip(el, { |
|
trigger: 'hover' |
|
}); |
|
}); |
|
} |
|
}; |