SBDevelopment/VPModelFileTool
Archived
3
0
Fork 0
Code Issues Pull requests Activity Actions

Moved everything to JQuery and general cleanup.

Browse source
This commit is contained in:
stijnb1234 2021-04-07 21:40:41 +02:00
parent 176a29d569
commit ef42807a75
1 changed files with 50 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

74
index.html
View file

@ -28,7 +28,7 @@
<div class="mb-3 w-50"> <div class="mb-3 w-50">
<label for="item">The item to use:</label> <label for="item">The item to use:</label>
<select class="form-control" id="item" name="item" required> <select class="form-control" id="item" name="item" required>
<option selected>Select an item...</option> <option value="" selected>Select an item...</option>
<option value="leather_boots">Leather Boots</option> <option value="leather_boots">Leather Boots</option>
</select> </select>
</div> </div>
@ -72,64 +72,85 @@
<script type="application/javascript" src="dist/js/beautify.js"></script> <script type="application/javascript" src="dist/js/beautify.js"></script>
<script> <script>
$(document).ready(function () { $(document).ready(function () {
const form = document.getElementById("calculatorForm"); const form = $("#calculatorForm");
const output = document.getElementById("content"); const formOptions = $("#formItems");
const copybutton = document.getElementById("copyButton"); const item = $("#item");
const downloadbutton = document.getElementById("downloadButton"); const itemCount = $("#itemcount");
const items = $("#items");
$('#item').change(function () { const output = $("#content");
if (this.value !== "") {
$("#formItems").show();
const copyButton = $("#copyButton");
const downloadButton = $("#downloadButton");
item.change(function () {
console.log(this.value);
if (this.value !== "") { //If value is not empty, show other options ...
formOptions.show();
//... and set max value of item count.
const max = itemDamages[this.value]; const max = itemDamages[this.value];
$("#itemcount").prop('max', max); itemCount.prop('max', max);
} else { } else { //Or if empty, hide other options.
$("#formItems").hide(); formOptions.hide();
} }
}); });
$('.btn-number').click(function (e) { $('.btn-number').click(function (e) {
e.preventDefault(); e.preventDefault();
//Get the item count and clicked type
const fieldName = $(this).attr('data-field'); const fieldName = $(this).attr('data-field');
const type = $(this).attr('data-type'); const type = $(this).attr('data-type');
const input = $("input[name='" + fieldName + "']"); const input = $("input[name='" + fieldName + "']");
const currentVal = parseInt(input.val()); const currentVal = parseInt(input.val());
if (type === 'minus') { if (type === 'minus') { //If removed one, remove latest input.
$("#iteminput" + (currentVal + 1)).remove(); $("#iteminput" + (currentVal + 1)).remove();
} else if (type === 'plus') { } else if (type === 'plus') { //If added one, append new input.
$("#items").append("<div id=\"iteminput" + currentVal + "\" class=\"mb-3 w-50\"><label for=\"item" + currentVal + "\">Model for damage " + currentVal + ":</label><input type=\"text\" class=\"form-control\" id=\"item" + currentVal + "\" name=\"item" + currentVal + "\" placeholder=\"cars/" + randomModel() + "\" required></div>"); items.append("<div id=\"iteminput" + currentVal + "\" class=\"mb-3 w-50\"><label for=\"item" + currentVal + "\">Model for damage " + currentVal + ":</label><input type=\"text\" class=\"form-control\" id=\"item" + currentVal + "\" name=\"item" + currentVal + "\" placeholder=\"cars/" + randomModel() + "\" required></div>");
} }
}); });
form.addEventListener("submit", function (e) { form.on("submit", function(e){
if (e.preventDefault) e.preventDefault(); e.preventDefault();
const item = document.getElementById('item').value; //Get selected item
const selectedItem = item.val();
//Get amount of items
const fieldName = $('.btn-number').attr('data-field'); const fieldName = $('.btn-number').attr('data-field');
const input = $("input[name='" + fieldName + "']"); const input = $("input[name='" + fieldName + "']");
const currentVal = parseInt(input.val()); const currentVal = parseInt(input.val());
//Build models array
const models = []; const models = [];
for (let i = 0; i < currentVal; i++) { for (let i = 0; i < currentVal; i++) {
models[i] = document.getElementById("item" + (i + 1)).value; models[i] = $("#item" + (i + 1)).val();
} }
const json = toJSON(item, models);
output.innerHTML = syntaxHighlight(json); //Convert to JSON, and set in content field (with syntax highlighting)
const json = toJSON(selectedItem, models);
output.html(syntaxHighlight(json));
//And fix the Download knop
const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(json); const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(json);
downloadbutton.setAttribute("href", dataStr); downloadButton.attr("href", dataStr);
downloadbutton.setAttribute("download", item + ".json"); downloadButton.attr("download", selectedItem + ".json");
//Return false to not reload the page
return false; return false;
}); });
copybutton.addEventListener("click", function () { copyButton.click(function (e) {
const copyText = output.textContent; e.preventDefault();
//Get the content.
const copyText = output.text();
//Create temporary textarea, select, copy, and remove it again.
const textArea = document.createElement("textarea"); const textArea = document.createElement("textarea");
textArea.textContent = copyText; textArea.textContent = copyText;
document.body.append(textArea); document.body.append(textArea);
@ -138,6 +159,11 @@
textArea.remove(); textArea.remove();
}); });
/**
* Get a random model.
*
* @return {string} The random model.
*/
function randomModel() { function randomModel() {
const months = ["red_car", "blue_car", "green_car", "orange_car", "blue_bicycle", "red_bicycle", "green_bicycle", "orange_bicycle"]; const months = ["red_car", "blue_car", "green_car", "orange_car", "blue_bicycle", "red_bicycle", "green_bicycle", "orange_bicycle"];
return months[Math.floor(Math.random() * months.length)]; return months[Math.floor(Math.random() * months.length)];