File size: 6,981 Bytes
09a6f7f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 |
import Component from '../lib/component.js';
import store from '../store/index.js';
/**
* @classdesc UI component for the sets of environments.
*/
export default class EnvsSet extends Component{
/**
* @constructor
*/
constructor() {
super({
store,
element: document.querySelector('#getting-started-tab'),
eventName: 'envsSetChange'
});
}
/**
* Renders the sets of environments and adds event listeners to the different elements.
*/
render(){
let dict = window.lang_dict[store.state.language]['envsSets'];
this.element.querySelector('#baseSetText').innerHTML = dict['baseSetText'];
this.element.querySelector('#customSetText').innerHTML = dict['customSetText'];
/* Base envs set */
let baseEnvs = this.element.querySelector('#baseEnvsSet');
baseEnvs.innerHTML = store.state.envsSets.baseEnvsSet.map(e => {
// Creates a card for each environment in the base set
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('');
/* Custom envs set */
let customEnvs = this.element.querySelector('#customEnvsSet');
// Creates a special card for uploading files
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) => {
// Creates a card for each environment in the custom set
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('');
/* EVENT LISTENERS */
// Loads a base environment
baseEnvs.querySelectorAll('div[name="env-card"]').forEach((span, index) => {
span.addEventListener('click', () => {
store.dispatch('loadEnv', store.state.envsSets.baseEnvsSet[index]);
})
});
// Loads a custom environment
customEnvs.querySelectorAll('div[name="env-card"]').forEach((span, index) => {
span.addEventListener('click', () => {
store.dispatch('loadEnv', store.state.envsSets.customEnvsSet[index]);
})
});
// Parses the uploaded file and adds the corresponding environment to the custom set
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);
}
});
// Downloads a custom environment
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('_'));
})
});
// Deletes a custom environment
customEnvs.querySelectorAll('button[name="deleteEnvBtn"]').forEach((span, index) => {
span.addEventListener('click', () => {
store.dispatch('deleteEnv', index);
})
});
/* Initializes tooltips */
this.element.querySelectorAll('[data-bs-toggle="tooltip"]').forEach((el, index) => {
return new bootstrap.Tooltip(el, {
trigger: 'hover'
});
});
}
}; |