You've already forked random-web-tools
371 lines
12 KiB
Vue
371 lines
12 KiB
Vue
<template>
|
||
<h2 class="tool-title">humans.txt generator</h2>
|
||
<hr class="mt-5 mb-5">
|
||
|
||
<div class="input-group">
|
||
<label>Team
|
||
<button @click="addTeamGroup">＋</button>
|
||
</label>
|
||
<div class="humans-group" v-for="(group, groupIndex) in toolData.team" :key="groupIndex">
|
||
<div v-for="(field, fieldIndex) in group" :key="fieldIndex">
|
||
<input class="input" v-model="field.key" v-on:keyup="result" placeholder="Key" type="text">
|
||
<input class="input" v-model="field.value" v-on:keyup="result" placeholder="Value" type="text">
|
||
<button @click="removeTeamField(groupIndex, fieldIndex)">🞩</button>
|
||
<button @click="moveTeamFieldUp(groupIndex, fieldIndex)" v-show="fieldIndex !== 0">↑</button>
|
||
<button @click="moveTeamFieldDown(groupIndex, fieldIndex)" v-show="fieldIndex !== group.length - 1">↓</button>
|
||
</div>
|
||
|
||
<button @click="addTeamField(groupIndex)">＋</button>
|
||
<button @click="removeTeamGroup(groupIndex)">🞩</button>
|
||
<button @click="moveTeamGroupUp(groupIndex)" v-show="groupIndex !== 0">↑</button>
|
||
<button @click="moveTeamGroupDown(groupIndex)" v-show="groupIndex !== toolData.team.length - 1">↓</button>
|
||
</div>
|
||
</div>
|
||
|
||
<hr class="mt-5 mb-5">
|
||
|
||
<div class="input-group">
|
||
<label>Thanks
|
||
<button @click="addThanksGroup">＋</button>
|
||
</label>
|
||
<div class="humans-group" v-for="(group, groupIndex) in toolData.thanks" :key="groupIndex">
|
||
<div v-for="(field, fieldIndex) in group" :key="fieldIndex">
|
||
<input class="input" v-model="field.key" v-on:keyup="result" placeholder="Key" type="text">
|
||
<input class="input" v-model="field.value" v-on:keyup="result" placeholder="Value" type="text">
|
||
<button @click="removeThanksField(groupIndex, fieldIndex)">🞩</button>
|
||
<button @click="moveThanksFieldUp(groupIndex, fieldIndex)" v-show="fieldIndex !== 0">↑</button>
|
||
<button @click="moveThanksFieldDown(groupIndex, fieldIndex)" v-show="fieldIndex !== group.length - 1">↓</button>
|
||
</div>
|
||
|
||
<button @click="addThanksField(groupIndex)">＋</button>
|
||
<button @click="removeThanksGroup(groupIndex)">🞩</button>
|
||
<button @click="moveThanksGroupUp(groupIndex)" v-show="groupIndex !== 0">↑</button>
|
||
<button @click="moveThanksGroupDown(groupIndex)" v-show="groupIndex !== toolData.thanks.length - 1">↓</button>
|
||
</div>
|
||
</div>
|
||
|
||
<hr class="mt-5 mb-5">
|
||
|
||
<div class="input-group">
|
||
<label>Site info
|
||
<button @click="addSite">＋</button>
|
||
</label>
|
||
<div v-for="(info, fieldIndex) in toolData.site" :key="fieldIndex">
|
||
<input class="input" v-model="info.key" v-on:keyup="result" placeholder="Key" type="text">
|
||
<input class="input" v-model="info.value" v-on:keyup="result" placeholder="Value" type="text">
|
||
<button @click="removeSiteField(fieldIndex)">🞩</button>
|
||
<button @click="moveSiteUp(fieldIndex)" v-show="fieldIndex !== 0">↑</button>
|
||
<button @click="moveSiteDown(fieldIndex)" v-show="fieldIndex !== toolData.site.length - 1">↓</button>
|
||
</div>
|
||
</div>
|
||
|
||
<hr class="mt-5 mb-5">
|
||
|
||
<div class="input-group">
|
||
<label>Import humans.txt
|
||
<button @click="importHumans">Import</button>
|
||
</label>
|
||
<textarea v-model="toolData.importedHumansTxt" style="height: 250px"></textarea>
|
||
</div>
|
||
|
||
<hr class="mt-5 mb-5">
|
||
|
||
<div class="input-group">
|
||
<label for="result">Result</label>
|
||
<MonacoEditor name="result" language="text" :value="toolResult"></MonacoEditor>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import MonacoEditor from "@/components/MonacoEditor.vue";
|
||
|
||
export default {
|
||
components: {
|
||
MonacoEditor
|
||
},
|
||
data() {
|
||
return {
|
||
toolData: {
|
||
team: [
|
||
[
|
||
{ key: "", value: "" }
|
||
]
|
||
],
|
||
thanks: [
|
||
[
|
||
{ key: "", value: "" }
|
||
]
|
||
],
|
||
site: [
|
||
{ key: "", value: "" }
|
||
],
|
||
importedHumansTxt: ""
|
||
},
|
||
toolResult: ""
|
||
};
|
||
},
|
||
mounted() {
|
||
this.importHumans();
|
||
this.result();
|
||
},
|
||
methods: {
|
||
/**
|
||
* Team
|
||
*/
|
||
addTeamGroup() {
|
||
this.toolData.team.push([{ key: "", value: "" }]);
|
||
},
|
||
addTeamField(groupIndex) {
|
||
this.toolData.team[groupIndex].push({ key: "", value: "" });
|
||
},
|
||
removeTeamField(groupIndex, fieldIndex) {
|
||
this.toolData.team[groupIndex].splice(fieldIndex, 1);
|
||
|
||
if (this.toolData.team[groupIndex].length == 0) {
|
||
this.removeTeamGroup(groupIndex);
|
||
}
|
||
|
||
this.result();
|
||
},
|
||
removeTeamGroup(groupIndex) {
|
||
this.toolData.team.splice(groupIndex, 1);
|
||
this.result();
|
||
},
|
||
moveTeamGroupUp(groupIndex) {
|
||
if (groupIndex > 0) {
|
||
const temp = this.toolData.team[groupIndex];
|
||
this.toolData.team[groupIndex] = this.toolData.team[groupIndex - 1];
|
||
this.toolData.team[groupIndex - 1] = temp;
|
||
}
|
||
|
||
this.result();
|
||
},
|
||
moveTeamGroupDown(groupIndex) {
|
||
if (groupIndex < this.toolData.team.length - 1) {
|
||
const temp = this.toolData.team[groupIndex];
|
||
this.toolData.team[groupIndex] = this.toolData.team[groupIndex + 1];
|
||
this.toolData.team[groupIndex + 1] = temp;
|
||
}
|
||
|
||
this.result();
|
||
},
|
||
moveTeamFieldUp(groupIndex, fieldIndex) {
|
||
if (fieldIndex > 0) {
|
||
const temp = this.toolData.team[groupIndex][fieldIndex];
|
||
this.toolData.team[groupIndex][fieldIndex] = this.toolData.team[groupIndex][fieldIndex - 1];
|
||
this.toolData.team[groupIndex][fieldIndex - 1] = temp;
|
||
}
|
||
|
||
this.result();
|
||
},
|
||
moveTeamFieldDown(groupIndex, fieldIndex) {
|
||
if (fieldIndex < this.toolData.team[groupIndex].length - 1) {
|
||
const temp = this.toolData.team[groupIndex][fieldIndex];
|
||
this.toolData.team[groupIndex][fieldIndex] = this.toolData.team[groupIndex][fieldIndex + 1];
|
||
this.toolData.team[groupIndex][fieldIndex + 1] = temp;
|
||
}
|
||
|
||
this.result();
|
||
},
|
||
|
||
/**
|
||
* Thank
|
||
*/
|
||
addThanksGroup() {
|
||
this.toolData.thanks.push([{ key: "", value: "" }]);
|
||
},
|
||
addThanksField(groupIndex) {
|
||
this.toolData.thanks[groupIndex].push({ key: "", value: "" });
|
||
},
|
||
removeThanksField(groupIndex, fieldIndex) {
|
||
this.toolData.thanks[groupIndex].splice(fieldIndex, 1);
|
||
|
||
if (this.toolData.thanks[groupIndex].length == 0) {
|
||
this.removeThanksGroup(groupIndex);
|
||
}
|
||
|
||
this.result();
|
||
},
|
||
removeThanksGroup(groupIndex) {
|
||
this.toolData.thanks.splice(groupIndex, 1);
|
||
this.result();
|
||
},
|
||
moveThanksGroupUp(groupIndex) {
|
||
if (groupIndex > 0) {
|
||
const temp = this.toolData.thanks[groupIndex];
|
||
this.toolData.thanks[groupIndex] = this.toolData.thanks[groupIndex - 1];
|
||
this.toolData.thanks[groupIndex - 1] = temp;
|
||
}
|
||
|
||
this.result();
|
||
},
|
||
moveThanksGroupDown(groupIndex) {
|
||
if (groupIndex < this.toolData.thanks.length - 1) {
|
||
const temp = this.toolData.thanks[groupIndex];
|
||
this.toolData.thanks[groupIndex] = this.toolData.thanks[groupIndex + 1];
|
||
this.toolData.thanks[groupIndex + 1] = temp;
|
||
}
|
||
|
||
this.result();
|
||
},
|
||
moveThanksFieldUp(groupIndex, fieldIndex) {
|
||
if (fieldIndex > 0) {
|
||
const temp = this.toolData.thanks[groupIndex][fieldIndex];
|
||
this.toolData.thanks[groupIndex][fieldIndex] = this.toolData.thanks[groupIndex][fieldIndex - 1];
|
||
this.toolData.thanks[groupIndex][fieldIndex - 1] = temp;
|
||
}
|
||
|
||
this.result();
|
||
},
|
||
moveThanksFieldDown(groupIndex, fieldIndex) {
|
||
if (fieldIndex < this.toolData.thanks[groupIndex].length - 1) {
|
||
const temp = this.toolData.thanks[groupIndex][fieldIndex];
|
||
this.toolData.thanks[groupIndex][fieldIndex] = this.toolData.thanks[groupIndex][fieldIndex + 1];
|
||
this.toolData.thanks[groupIndex][fieldIndex + 1] = temp;
|
||
}
|
||
|
||
this.result();
|
||
},
|
||
/**
|
||
* Site
|
||
*/
|
||
addSite() {
|
||
this.toolData.site.push({ label: "", value: "" });
|
||
},
|
||
removeSiteField(fieldIndex) {
|
||
this.toolData.site.splice(fieldIndex, 1);
|
||
|
||
this.result();
|
||
},
|
||
moveSiteUp(index) {
|
||
if (index > 0) {
|
||
const temp = this.toolData.site[index];
|
||
this.toolData.site[index] = this.toolData.site[index - 1];
|
||
this.toolData.site[index - 1] = temp;
|
||
}
|
||
|
||
this.result();
|
||
},
|
||
moveSiteDown(index) {
|
||
if (index < this.toolData.site.length - 1) {
|
||
const temp = this.toolData.site[index];
|
||
this.toolData.site[index] = this.toolData.site[index + 1];
|
||
this.toolData.site[index + 1] = temp;
|
||
}
|
||
|
||
this.result();
|
||
},
|
||
|
||
/**
|
||
* Import
|
||
*/
|
||
importHumans() {
|
||
const lines = this.toolData.importedHumansTxt.split("\n");
|
||
let currentSection = null;
|
||
|
||
this.toolData.team = [];
|
||
this.toolData.thanks = [];
|
||
this.toolData.site = [];
|
||
|
||
let currentGroup = [];
|
||
|
||
for (const line of lines) {
|
||
if (line.toLowerCase().startsWith("/* TEAM */".toLowerCase())) {
|
||
currentSection = "team";
|
||
} else if (line.toLowerCase().startsWith("/* THANKS */".toLowerCase())) {
|
||
currentSection = "thanks";
|
||
} else if (line.toLowerCase().startsWith("/* SITE */".toLowerCase())) {
|
||
currentSection = "site";
|
||
} else if (line.trim() !== "") {
|
||
if (currentSection === "team") {
|
||
const [key, value] = line.split(":");
|
||
currentGroup.push({ key: key.trim(), value: value.trim() });
|
||
} else if (currentSection === "thanks") {
|
||
const [key, value] = line.split(":");
|
||
currentGroup.push({ key: key.trim(), value: value.trim() });
|
||
} else if (currentSection === "site") {
|
||
const [key, value] = line.split(":");
|
||
this.toolData.site.push({ key: key.trim(), value: value.trim() });
|
||
}
|
||
} else if (line.trim() === "" && currentSection === "team") {
|
||
if (currentGroup.length > 0) {
|
||
this.toolData.team.push(currentGroup);
|
||
currentGroup = [];
|
||
}
|
||
} else if (line.trim() === "" && currentSection === "thanks") {
|
||
if (currentGroup.length > 0) {
|
||
this.toolData.thanks.push(currentGroup);
|
||
currentGroup = [];
|
||
}
|
||
}
|
||
}
|
||
|
||
if (currentGroup.length > 0) {
|
||
this.toolData.team.push(currentGroup);
|
||
}
|
||
},
|
||
|
||
/**
|
||
* Generate
|
||
*/
|
||
result() {
|
||
let output = "";
|
||
|
||
if (this.toolData.team.length) {
|
||
output += "/* TEAM */\n";
|
||
|
||
for (const group of this.toolData.team) {
|
||
let groupOutput = "";
|
||
for (const field of group) {
|
||
if (field.key.trim() !== "" && field.value.trim() !== "") {
|
||
groupOutput += `\t${field.key.trim()}: ${field.value.trim()}\n`;
|
||
}
|
||
}
|
||
if (groupOutput !== "") {
|
||
output += groupOutput + "\n";
|
||
}
|
||
}
|
||
}
|
||
|
||
if (this.toolData.thanks.length) {
|
||
output += "/* THANKS */\n";
|
||
|
||
for (const group of this.toolData.thanks) {
|
||
let groupOutput = "";
|
||
for (const field of group) {
|
||
if (field.key.trim() !== "" && field.value.trim() !== "") {
|
||
groupOutput += `\t${field.key.trim()}: ${field.value.trim()}\n`;
|
||
}
|
||
}
|
||
if (groupOutput !== "") {
|
||
output += groupOutput + "\n";
|
||
}
|
||
}
|
||
}
|
||
|
||
if (this.toolData.site.length) {
|
||
output += "/* SITE */\n";
|
||
for (const info of this.toolData.site) {
|
||
if (info.key.trim() !== "" && info.value.trim() !== "") {
|
||
output += `\t${info.key.trim()}: ${info.value.trim()}\n`;
|
||
}
|
||
}
|
||
}
|
||
|
||
this.toolResult = output;
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.humans-group {
|
||
padding: 10px 0;
|
||
}
|
||
|
||
.humans-group:nth-child(odd) {
|
||
background-color: #f7f7f7;
|
||
}
|
||
|
||
|
||
</style> |