Replaced hard-coded strings with localizable strings

Added en locale as localization fallback
This commit is contained in:
Alec Ananian
2020-01-14 07:43:41 -08:00
parent 119eb321ec
commit 8690d18695
23 changed files with 452 additions and 298 deletions

View File

@@ -2,7 +2,7 @@
<div class="page">
<div class="content">
<div class="page-columns inner-left">
<pw-section class="blue" label="Endpoint" ref="endpoint">
<pw-section class="blue" :label="$t('endpoint')" ref="endpoint">
<ul>
<li>
<label for="url">{{ $t("url") }}</label>
@@ -25,7 +25,7 @@
</ul>
</pw-section>
<pw-section class="orange" label="Headers" ref="headers">
<pw-section class="orange" :label="$t('headers')" ref="headers">
<ul>
<li>
<div class="flex-wrap">
@@ -34,7 +34,7 @@
<button
class="icon"
@click="headers = []"
v-tooltip.bottom="'Clear'"
v-tooltip.bottom="$t('clear')"
>
<i class="material-icons">clear_all</i>
</button>
@@ -45,7 +45,7 @@
readonly
v-textarea-auto-height="headerString"
v-model="headerString"
placeholder="(add at least one header)"
:placeholder="$t('add_one_header')"
rows="1"
></textarea>
</li>
@@ -53,7 +53,7 @@
<ul v-for="(header, index) in headers" :key="index">
<li>
<autocomplete
:placeholder="'header ' + (index + 1)"
:placeholder="$t('header_count', { count: index + 1 })"
:source="commonHeaders"
:spellcheck="false"
:value="header.key"
@@ -68,7 +68,7 @@
</li>
<li>
<input
:placeholder="'value ' + (index + 1)"
:placeholder="$t('value_count', { count: index + 1 })"
:name="'value' + index"
:value="header.value"
@change="
@@ -85,6 +85,7 @@
<button
class="icon"
@click="removeRequestHeader(index)"
v-tooltip.bottom="$t('delete')"
id="header"
>
<i class="material-icons">delete</i>
@@ -102,7 +103,7 @@
</ul>
</pw-section>
<pw-section class="green" label="Schema" ref="schema">
<pw-section class="green" :label="$t('schema')" ref="schema">
<div class="flex-wrap">
<label>{{ $t("response") }}</label>
<div>
@@ -112,8 +113,8 @@
ref="ToggleExpandResponse"
v-tooltip="{
content: !expandResponse
? 'Expand response'
: 'Collapse response'
? $t('expand_response')
: $t('collapse_response')
}"
>
<i class="material-icons">
@@ -124,7 +125,7 @@
class="icon"
@click="downloadResponse"
ref="downloadResponse"
v-tooltip="'Download file'"
v-tooltip="$t('download_file')"
>
<i class="material-icons">get_app</i>
</button>
@@ -132,7 +133,7 @@
class="icon"
ref="copySchemaCode"
@click="copySchema"
v-tooltip="'Copy Schema'"
v-tooltip="$t('copy_schema')"
>
<i class="material-icons">file_copy</i>
</button>
@@ -153,14 +154,14 @@
/>
</pw-section>
<pw-section class="cyan" label="Query" ref="query">
<pw-section class="cyan" :label="$t('query')" ref="query">
<div class="flex-wrap">
<label for="gqlQuery">{{ $t("query") }}</label>
<div>
<button
class="icon"
@click="runQuery()"
v-tooltip.bottom="'Run Query'"
v-tooltip.bottom="$t('run_query')"
>
<i class="material-icons">play_arrow</i>
</button>
@@ -168,7 +169,7 @@
class="icon"
@click="copyQuery"
ref="copyQueryButton"
v-tooltip="'Copy Query'"
v-tooltip="$t('copy_query')"
>
<i class="material-icons">file_copy</i>
</button>
@@ -191,7 +192,7 @@
<button
class="icon"
@click="variables = []"
v-tooltip.bottom="'Clear'"
v-tooltip.bottom="$t('clear')"
>
<i class="material-icons">clear_all</i>
</button>
@@ -200,7 +201,7 @@
<ul v-for="(variable, index) in variables" :key="index">
<li>
<input
:placeholder="'variable ' + (index + 1)"
:placeholder="$t('variable_count', { count: index + 1 })"
:name="'variable_key_' + index"
:value="variable.key"
@change="
@@ -214,7 +215,7 @@
</li>
<li>
<input
:placeholder="'value ' + (index + 1)"
:placeholder="$t('value_count', { count: index + 1 })"
:name="'variable_value_' + index"
:value="variable.value"
@change="
@@ -228,7 +229,11 @@
</li>
<div>
<li>
<button class="icon" @click="removeQueryVariable(index)">
<button
class="icon"
@click="removeQueryVariable(index)"
v-tooltip.bottom="$t('delete')"
>
<i class="material-icons">delete</i>
</button>
</li>
@@ -252,7 +257,7 @@
class="icon"
@click="copyResponse"
ref="copyResponseButton"
v-tooltip="'Copy Response'"
v-tooltip="$t('copy_response')"
>
<i class="material-icons">file_copy</i>
</button>
@@ -274,7 +279,7 @@
</pw-section>
</div>
<aside class="sticky-inner inner-right">
<pw-section class="purple" label="Docs" ref="docs">
<pw-section class="purple" :label="$t('docs')" ref="docs">
<section>
<input
v-if="queryFields.length > 0"
@@ -366,7 +371,7 @@
"
class="info"
>
Send a request first
{{ $t("send_request_first") }}
</p>
</pw-section>
</aside>
@@ -605,7 +610,7 @@ export default {
aux.select();
document.execCommand("copy");
document.body.removeChild(aux);
this.$toast.success("Copied to clipboard", {
this.$toast.success(this.$t("copied_to_clipboard"), {
icon: "done"
});
setTimeout(
@@ -621,7 +626,7 @@ export default {
aux.select();
document.execCommand("copy");
document.body.removeChild(aux);
this.$toast.success("Copied to clipboard", {
this.$toast.success(this.$t("copied_to_clipboard"), {
icon: "done"
});
setTimeout(
@@ -637,7 +642,7 @@ export default {
aux.select();
document.execCommand("copy");
document.body.removeChild(aux);
this.$toast.success("Copied to clipboard", {
this.$toast.success(this.$t("copied_to_clipboard"), {
icon: "done"
});
setTimeout(
@@ -705,13 +710,13 @@ export default {
this.$nuxt.$loading.finish();
const duration = Date.now() - startTime;
this.$toast.info(`Finished in ${duration}ms`, {
this.$toast.info(this.$t("finished_in", { duration }), {
icon: "done"
});
} catch (error) {
this.$nuxt.$loading.finish();
this.$toast.error(error + " (F12 for details)", {
this.$toast.error(`${error} ${this.$t("f12_details")}`, {
icon: "error"
});
console.log("Error", error);
@@ -719,7 +724,7 @@ export default {
},
async getSchema() {
const startTime = Date.now();
this.schemaString = "Loading...";
this.schemaString = this.$t("loading");
this.scrollInto("schema");
// Start showing the loading bar as soon as possible.
@@ -824,13 +829,13 @@ export default {
this.$nuxt.$loading.finish();
const duration = Date.now() - startTime;
this.$toast.info(`Finished in ${duration}ms`, {
this.$toast.info(this.$t("finished_in", { duration }), {
icon: "done"
});
} catch (error) {
this.$nuxt.$loading.finish();
this.schemaString = error + ". Check console for details.";
this.$toast.error(error + " (F12 for details)", {
this.schemaString = `${error}. ${check_console_details}`;
this.$toast.error(`${error} ${this.$t("f12_details")}`, {
icon: "error"
});
console.log("Error", error);
@@ -854,7 +859,7 @@ export default {
document.body.appendChild(a);
a.click();
this.$refs.downloadResponse.innerHTML = this.doneButton;
this.$toast.success("Download started", {
this.$toast.success(this.$t("download_started"), {
icon: "done"
});
setTimeout(() => {
@@ -875,10 +880,10 @@ export default {
const oldHeaders = this.headers.slice();
this.$store.commit("removeGQLHeader", index);
this.$toast.error("Deleted", {
this.$toast.error(this.$t("deleted"), {
icon: "delete",
action: {
text: "Undo",
text: this.$t("undo"),
duration: 4000,
onClick: (e, toastObject) => {
this.headers = oldHeaders;
@@ -899,10 +904,10 @@ export default {
const oldVariables = this.variables.slice();
this.$store.commit("removeGQLVariable", index);
this.$toast.error("Deleted", {
this.$toast.error(this.$t("deleted"), {
icon: "delete",
action: {
text: "Undo",
text: this.$t("undo"),
duration: 4000,
onClick: (e, toastObject) => {
this.variables = oldVariables;