Commit code with double quotes instead of single quotes
This commit is contained in:
146
pages/doc.vue
146
pages/doc.vue
@@ -4,7 +4,7 @@
|
||||
<ul>
|
||||
<li>
|
||||
<p class="info">
|
||||
{{ $t('generate_docs_message') }}
|
||||
{{ $t("generate_docs_message") }}
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -13,7 +13,7 @@
|
||||
<label for="collectionUpload">
|
||||
<button class="icon" @click="$refs.collectionUpload.click()" v-tooltip="$t('json')">
|
||||
<i class="material-icons">folder</i>
|
||||
<span>{{ $t('import_collections') }}</span>
|
||||
<span>{{ $t("import_collections") }}</span>
|
||||
</button>
|
||||
</label>
|
||||
<input
|
||||
@@ -44,7 +44,7 @@
|
||||
<li>
|
||||
<button class="icon" @click="getDoc">
|
||||
<i class="material-icons">book</i>
|
||||
<span>{{ $t('generate_docs') }}</span>
|
||||
<span>{{ $t("generate_docs") }}</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -52,108 +52,108 @@
|
||||
|
||||
<pw-section class="green" label="Documentation" ref="documentation">
|
||||
<p v-if="this.items.length === 0" class="info">
|
||||
{{ $t('generate_docs_first') }}
|
||||
{{ $t("generate_docs_first") }}
|
||||
</p>
|
||||
<div>
|
||||
<span class="collection" v-for="(collection, index) in this.items" :key="index">
|
||||
<h2>
|
||||
<i class="material-icons">folder</i>
|
||||
{{ collection.name || $t('none') }}
|
||||
{{ collection.name || $t("none") }}
|
||||
</h2>
|
||||
<span class="folder" v-for="(folder, index) in collection.folders" :key="index">
|
||||
<h3>
|
||||
<i class="material-icons">folder_open</i>
|
||||
{{ folder.name || $t('none') }}
|
||||
{{ folder.name || $t("none") }}
|
||||
</h3>
|
||||
<span class="request" v-for="(request, index) in folder.requests" :key="index">
|
||||
<h4>
|
||||
<i class="material-icons">insert_drive_file</i>
|
||||
{{ request.name || $t('none') }}
|
||||
{{ request.name || $t("none") }}
|
||||
</h4>
|
||||
<p class="doc-desc" v-if="request.url">
|
||||
<span>
|
||||
{{ $t('url') }}: <code>{{ request.url || $t('none') }}</code>
|
||||
{{ $t("url") }}: <code>{{ request.url || $t("none") }}</code>
|
||||
</span>
|
||||
</p>
|
||||
<p class="doc-desc" v-if="request.path">
|
||||
<span>
|
||||
{{ $t('path') }}:
|
||||
<code>{{ request.path || $t('none') }}</code>
|
||||
{{ $t("path") }}:
|
||||
<code>{{ request.path || $t("none") }}</code>
|
||||
</span>
|
||||
</p>
|
||||
<p class="doc-desc" v-if="request.method">
|
||||
<span>
|
||||
{{ $t('method') }}:
|
||||
<code>{{ request.method || $t('none') }}</code>
|
||||
{{ $t("method") }}:
|
||||
<code>{{ request.method || $t("none") }}</code>
|
||||
</span>
|
||||
</p>
|
||||
<p class="doc-desc" v-if="request.auth">
|
||||
<span>
|
||||
{{ $t('authentication') }}:
|
||||
<code>{{ request.auth || $t('none') }}</code>
|
||||
{{ $t("authentication") }}:
|
||||
<code>{{ request.auth || $t("none") }}</code>
|
||||
</span>
|
||||
</p>
|
||||
<p class="doc-desc" v-if="request.httpUser">
|
||||
<span>
|
||||
{{ $t('username') }}:
|
||||
<code>{{ request.httpUser || $t('none') }}</code>
|
||||
{{ $t("username") }}:
|
||||
<code>{{ request.httpUser || $t("none") }}</code>
|
||||
</span>
|
||||
</p>
|
||||
<p class="doc-desc" v-if="request.httpPassword">
|
||||
<span>
|
||||
{{ $t('password') }}:
|
||||
<code>{{ request.httpPassword || $t('none') }}</code>
|
||||
{{ $t("password") }}:
|
||||
<code>{{ request.httpPassword || $t("none") }}</code>
|
||||
</span>
|
||||
</p>
|
||||
<p class="doc-desc" v-if="request.bearerToken">
|
||||
<span>
|
||||
{{ $t('token') }}:
|
||||
<code>{{ request.bearerToken || $t('none') }}</code>
|
||||
{{ $t("token") }}:
|
||||
<code>{{ request.bearerToken || $t("none") }}</code>
|
||||
</span>
|
||||
</p>
|
||||
<h4 v-if="request.headers.length > 0">{{ $t('headers') }}</h4>
|
||||
<h4 v-if="request.headers.length > 0">{{ $t("headers") }}</h4>
|
||||
<span v-if="request.headers">
|
||||
<p v-for="header in request.headers" :key="header.key" class="doc-desc">
|
||||
<span>
|
||||
{{ header.key || $t('none') }}:
|
||||
<code>{{ header.value || $t('none') }}</code>
|
||||
{{ header.key || $t("none") }}:
|
||||
<code>{{ header.value || $t("none") }}</code>
|
||||
</span>
|
||||
</p>
|
||||
</span>
|
||||
<h4 v-if="request.params.length > 0">{{ $t('parameters') }}</h4>
|
||||
<h4 v-if="request.params.length > 0">{{ $t("parameters") }}</h4>
|
||||
<span v-if="request.params">
|
||||
<p v-for="parameter in request.params" :key="parameter.key" class="doc-desc">
|
||||
<span>
|
||||
{{ parameter.key || $t('none') }}:
|
||||
<code>{{ parameter.value || $t('none') }}</code>
|
||||
{{ parameter.key || $t("none") }}:
|
||||
<code>{{ parameter.value || $t("none") }}</code>
|
||||
</span>
|
||||
</p>
|
||||
</span>
|
||||
<h4 v-if="request.bodyParam">{{ $t('payload') }}</h4>
|
||||
<h4 v-if="request.bodyParam">{{ $t("payload") }}</h4>
|
||||
<span v-if="request.bodyParam">
|
||||
<p v-for="payload in request.bodyParam" :key="payload.key" class="doc-desc">
|
||||
<span>
|
||||
{{ payload.key || $t('none') }}:
|
||||
<code>{{ payload.value || $t('none') }}</code>
|
||||
{{ payload.key || $t("none") }}:
|
||||
<code>{{ payload.value || $t("none") }}</code>
|
||||
</span>
|
||||
</p>
|
||||
</span>
|
||||
<p class="doc-desc" v-if="request.rawParams">
|
||||
<span>
|
||||
{{ $t('parameters') }}:
|
||||
<code>{{ request.rawParams || $t('none') }}</code>
|
||||
{{ $t("parameters") }}:
|
||||
<code>{{ request.rawParams || $t("none") }}</code>
|
||||
</span>
|
||||
</p>
|
||||
<p class="doc-desc" v-if="request.contentType">
|
||||
<span>
|
||||
{{ $t('content_type') }}:
|
||||
<code>{{ request.contentType || $t('none') }}</code>
|
||||
{{ $t("content_type") }}:
|
||||
<code>{{ request.contentType || $t("none") }}</code>
|
||||
</span>
|
||||
</p>
|
||||
<p class="doc-desc" v-if="request.requestType">
|
||||
<span>
|
||||
{{ $t('request_type') }}:
|
||||
<code>{{ request.requestType || $t('none') }}</code>
|
||||
{{ $t("request_type") }}:
|
||||
<code>{{ request.requestType || $t("none") }}</code>
|
||||
</span>
|
||||
</p>
|
||||
</span>
|
||||
@@ -165,91 +165,91 @@
|
||||
>
|
||||
<h4>
|
||||
<i class="material-icons">insert_drive_file</i>
|
||||
{{ request.name || $t('none') }}
|
||||
{{ request.name || $t("none") }}
|
||||
</h4>
|
||||
<p class="doc-desc" v-if="request.url">
|
||||
<span>
|
||||
{{ $t('url') }}: <code>{{ request.url || $t('none') }}</code>
|
||||
{{ $t("url") }}: <code>{{ request.url || $t("none") }}</code>
|
||||
</span>
|
||||
</p>
|
||||
<p class="doc-desc" v-if="request.path">
|
||||
<span>
|
||||
{{ $t('path') }}: <code>{{ request.path || $t('none') }}</code>
|
||||
{{ $t("path") }}: <code>{{ request.path || $t("none") }}</code>
|
||||
</span>
|
||||
</p>
|
||||
<p class="doc-desc" v-if="request.method">
|
||||
<span>
|
||||
{{ $t('method') }}:
|
||||
<code>{{ request.method || $t('none') }}</code>
|
||||
{{ $t("method") }}:
|
||||
<code>{{ request.method || $t("none") }}</code>
|
||||
</span>
|
||||
</p>
|
||||
<p class="doc-desc" v-if="request.auth">
|
||||
<span>
|
||||
{{ $t('authentication') }}:
|
||||
<code>{{ request.auth || $t('none') }}</code>
|
||||
{{ $t("authentication") }}:
|
||||
<code>{{ request.auth || $t("none") }}</code>
|
||||
</span>
|
||||
</p>
|
||||
<p class="doc-desc" v-if="request.httpUser">
|
||||
<span>
|
||||
{{ $t('username') }}:
|
||||
<code>{{ request.httpUser || $t('none') }}</code>
|
||||
{{ $t("username") }}:
|
||||
<code>{{ request.httpUser || $t("none") }}</code>
|
||||
</span>
|
||||
</p>
|
||||
<p class="doc-desc" v-if="request.httpPassword">
|
||||
<span>
|
||||
{{ $t('password') }}:
|
||||
<code>{{ request.httpPassword || $t('none') }}</code>
|
||||
{{ $t("password") }}:
|
||||
<code>{{ request.httpPassword || $t("none") }}</code>
|
||||
</span>
|
||||
</p>
|
||||
<p class="doc-desc" v-if="request.bearerToken">
|
||||
<span>
|
||||
{{ $t('token') }}:
|
||||
<code>{{ request.bearerToken || $t('none') }}</code>
|
||||
{{ $t("token") }}:
|
||||
<code>{{ request.bearerToken || $t("none") }}</code>
|
||||
</span>
|
||||
</p>
|
||||
<h4 v-if="request.headers.length > 0">{{ $t('headers') }}</h4>
|
||||
<h4 v-if="request.headers.length > 0">{{ $t("headers") }}</h4>
|
||||
<span v-if="request.headers">
|
||||
<p v-for="header in request.headers" :key="header.key" class="doc-desc">
|
||||
<span>
|
||||
{{ header.key || $t('none') }}:
|
||||
<code>{{ header.value || $t('none') }}</code>
|
||||
{{ header.key || $t("none") }}:
|
||||
<code>{{ header.value || $t("none") }}</code>
|
||||
</span>
|
||||
</p>
|
||||
</span>
|
||||
<h4 v-if="request.params.length > 0">{{ $t('parameters') }}</h4>
|
||||
<h4 v-if="request.params.length > 0">{{ $t("parameters") }}</h4>
|
||||
<span v-if="request.params">
|
||||
<p v-for="parameter in request.params" :key="parameter.key" class="doc-desc">
|
||||
<span>
|
||||
{{ parameter.key || $t('none') }}:
|
||||
<code>{{ parameter.value || $t('none') }}</code>
|
||||
{{ parameter.key || $t("none") }}:
|
||||
<code>{{ parameter.value || $t("none") }}</code>
|
||||
</span>
|
||||
</p>
|
||||
</span>
|
||||
<h4 v-if="request.bodyParam">{{ $t('payload') }}</h4>
|
||||
<h4 v-if="request.bodyParam">{{ $t("payload") }}</h4>
|
||||
<span v-if="request.bodyParam">
|
||||
<p v-for="payload in request.bodyParam" :key="payload.key" class="doc-desc">
|
||||
<span>
|
||||
{{ payload.key || $t('none') }}:
|
||||
<code>{{ payload.value || $t('none') }}</code>
|
||||
{{ payload.key || $t("none") }}:
|
||||
<code>{{ payload.value || $t("none") }}</code>
|
||||
</span>
|
||||
</p>
|
||||
</span>
|
||||
<p class="doc-desc" v-if="request.rawParams">
|
||||
<span>
|
||||
{{ $t('parameters') }}:
|
||||
<code>{{ request.rawParams || $t('none') }}</code>
|
||||
{{ $t("parameters") }}:
|
||||
<code>{{ request.rawParams || $t("none") }}</code>
|
||||
</span>
|
||||
</p>
|
||||
<p class="doc-desc" v-if="request.contentType">
|
||||
<span>
|
||||
{{ $t('content_type') }}:
|
||||
<code>{{ request.contentType || $t('none') }}</code>
|
||||
{{ $t("content_type") }}:
|
||||
<code>{{ request.contentType || $t("none") }}</code>
|
||||
</span>
|
||||
</p>
|
||||
<p class="doc-desc" v-if="request.requestType">
|
||||
<span>
|
||||
{{ $t('request_type') }}:
|
||||
<code>{{ request.requestType || $t('none') }}</code>
|
||||
{{ $t("request_type") }}:
|
||||
<code>{{ request.requestType || $t("none") }}</code>
|
||||
</span>
|
||||
</p>
|
||||
</span>
|
||||
@@ -302,17 +302,17 @@
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import AceEditor from '../components/ace-editor'
|
||||
import AceEditor from "../components/ace-editor"
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'pw-section': () => import('../components/section'),
|
||||
"pw-section": () => import("../components/section"),
|
||||
Editor: AceEditor,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
collectionJSON: '[]',
|
||||
collectionJSON: "[]",
|
||||
items: [],
|
||||
}
|
||||
},
|
||||
@@ -327,12 +327,12 @@ export default {
|
||||
this.collectionJSON = target.result
|
||||
}
|
||||
reader.readAsText(file)
|
||||
this.$toast.info(this.$t('file_imported'), {
|
||||
icon: 'attach_file',
|
||||
this.$toast.info(this.$t("file_imported"), {
|
||||
icon: "attach_file",
|
||||
})
|
||||
} else {
|
||||
this.$toast.error(this.$t('choose_file'), {
|
||||
icon: 'attach_file',
|
||||
this.$toast.error(this.$t("choose_file"), {
|
||||
icon: "attach_file",
|
||||
})
|
||||
}
|
||||
},
|
||||
@@ -340,12 +340,12 @@ export default {
|
||||
getDoc() {
|
||||
try {
|
||||
this.items = JSON.parse(this.collectionJSON)
|
||||
this.$toast.info(this.$t('docs_generated'), {
|
||||
icon: 'book',
|
||||
this.$toast.info(this.$t("docs_generated"), {
|
||||
icon: "book",
|
||||
})
|
||||
} catch (e) {
|
||||
this.$toast.error(e, {
|
||||
icon: 'code',
|
||||
icon: "code",
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
@@ -5,14 +5,14 @@
|
||||
<pw-section class="blue" :label="$t('endpoint')" ref="endpoint">
|
||||
<ul>
|
||||
<li>
|
||||
<label for="url">{{ $t('url') }}</label>
|
||||
<label for="url">{{ $t("url") }}</label>
|
||||
<input id="url" type="url" v-model="url" @keyup.enter="getSchema()" />
|
||||
</li>
|
||||
<div>
|
||||
<li>
|
||||
<label for="get" class="hide-on-small-screen"> </label>
|
||||
<button id="get" name="get" @click="getSchema">
|
||||
{{ $t('get_schema') }}
|
||||
{{ $t("get_schema") }}
|
||||
<span><i class="material-icons">send</i></span>
|
||||
</button>
|
||||
</li>
|
||||
@@ -24,7 +24,7 @@
|
||||
<ul>
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<label for="headerList">{{ $t('header_list') }}</label>
|
||||
<label for="headerList">{{ $t("header_list") }}</label>
|
||||
<div>
|
||||
<button class="icon" @click="headers = []" v-tooltip.bottom="$t('clear')">
|
||||
<i class="material-icons">clear_all</i>
|
||||
@@ -88,7 +88,7 @@
|
||||
<li>
|
||||
<button class="icon" @click="addRequestHeader">
|
||||
<i class="material-icons">add</i>
|
||||
<span>{{ $t('add_new') }}</span>
|
||||
<span>{{ $t("add_new") }}</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -96,7 +96,7 @@
|
||||
|
||||
<pw-section class="green" :label="$t('schema')" ref="schema">
|
||||
<div class="flex-wrap">
|
||||
<label>{{ $t('response') }}</label>
|
||||
<label>{{ $t("response") }}</label>
|
||||
<div>
|
||||
<button
|
||||
class="icon"
|
||||
@@ -107,7 +107,7 @@
|
||||
}"
|
||||
>
|
||||
<i class="material-icons">
|
||||
{{ !expandResponse ? 'unfold_more' : 'unfold_less' }}
|
||||
{{ !expandResponse ? "unfold_more" : "unfold_less" }}
|
||||
</i>
|
||||
</button>
|
||||
<button
|
||||
@@ -145,7 +145,7 @@
|
||||
|
||||
<pw-section class="cyan" :label="$t('query')" ref="query">
|
||||
<div class="flex-wrap">
|
||||
<label for="gqlQuery">{{ $t('query') }}</label>
|
||||
<label for="gqlQuery">{{ $t("query") }}</label>
|
||||
<div>
|
||||
<button class="icon" @click="runQuery()" v-tooltip.bottom="$t('run_query')">
|
||||
<i class="material-icons">play_arrow</i>
|
||||
@@ -191,7 +191,7 @@
|
||||
|
||||
<pw-section class="purple" label="Response" ref="response">
|
||||
<div class="flex-wrap">
|
||||
<label for="responseField">{{ $t('response') }}</label>
|
||||
<label for="responseField">{{ $t("response") }}</label>
|
||||
<div>
|
||||
<button
|
||||
class="icon"
|
||||
@@ -229,7 +229,7 @@
|
||||
checked="checked"
|
||||
/>
|
||||
<label v-if="queryFields.length > 0" for="queries-tab">
|
||||
{{ $t('queries') }}
|
||||
{{ $t("queries") }}
|
||||
</label>
|
||||
<div v-if="queryFields.length > 0" class="tab">
|
||||
<div v-for="field in queryFields" :key="field.name">
|
||||
@@ -245,7 +245,7 @@
|
||||
checked="checked"
|
||||
/>
|
||||
<label v-if="mutationFields.length > 0" for="mutations-tab">
|
||||
{{ $t('mutations') }}
|
||||
{{ $t("mutations") }}
|
||||
</label>
|
||||
<div v-if="mutationFields.length > 0" class="tab">
|
||||
<div v-for="field in mutationFields" :key="field.name">
|
||||
@@ -261,7 +261,7 @@
|
||||
checked="checked"
|
||||
/>
|
||||
<label v-if="subscriptionFields.length > 0" for="subscriptions-tab">
|
||||
{{ $t('subscriptions') }}
|
||||
{{ $t("subscriptions") }}
|
||||
</label>
|
||||
<div v-if="subscriptionFields.length > 0" class="tab">
|
||||
<div v-for="field in subscriptionFields" :key="field.name">
|
||||
@@ -277,7 +277,7 @@
|
||||
checked="checked"
|
||||
/>
|
||||
<label v-if="gqlTypes.length > 0" for="gqltypes-tab">
|
||||
{{ $t('types') }}
|
||||
{{ $t("types") }}
|
||||
</label>
|
||||
<div v-if="gqlTypes.length > 0" class="tab">
|
||||
<div v-for="type in gqlTypes" :key="type.name" :id="`type_${type.name}`">
|
||||
@@ -295,7 +295,7 @@
|
||||
"
|
||||
class="info"
|
||||
>
|
||||
{{ $t('send_request_first') }}
|
||||
{{ $t("send_request_first") }}
|
||||
</p>
|
||||
</pw-section>
|
||||
</aside>
|
||||
@@ -311,35 +311,35 @@
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
import * as gql from 'graphql'
|
||||
import textareaAutoHeight from '../directives/textareaAutoHeight'
|
||||
import { commonHeaders } from '../functions/headers'
|
||||
import AceEditor from '../components/ace-editor'
|
||||
import QueryEditor from '../components/graphql/queryeditor'
|
||||
import { sendNetworkRequest } from '../functions/network'
|
||||
import axios from "axios"
|
||||
import * as gql from "graphql"
|
||||
import textareaAutoHeight from "../directives/textareaAutoHeight"
|
||||
import { commonHeaders } from "../functions/headers"
|
||||
import AceEditor from "../components/ace-editor"
|
||||
import QueryEditor from "../components/graphql/queryeditor"
|
||||
import { sendNetworkRequest } from "../functions/network"
|
||||
|
||||
export default {
|
||||
directives: {
|
||||
textareaAutoHeight,
|
||||
},
|
||||
components: {
|
||||
'pw-section': () => import('../components/section'),
|
||||
'gql-field': () => import('../components/graphql/field'),
|
||||
'gql-type': () => import('../components/graphql/type'),
|
||||
autocomplete: () => import('../components/autocomplete'),
|
||||
"pw-section": () => import("../components/section"),
|
||||
"gql-field": () => import("../components/graphql/field"),
|
||||
"gql-type": () => import("../components/graphql/type"),
|
||||
autocomplete: () => import("../components/autocomplete"),
|
||||
Editor: AceEditor,
|
||||
QueryEditor: QueryEditor,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
schemaString: '',
|
||||
schemaString: "",
|
||||
commonHeaders,
|
||||
queryFields: [],
|
||||
mutationFields: [],
|
||||
subscriptionFields: [],
|
||||
gqlTypes: [],
|
||||
responseString: '',
|
||||
responseString: "",
|
||||
copyButton: '<i class="material-icons">file_copy</i>',
|
||||
downloadButton: '<i class="material-icons">get_app</i>',
|
||||
doneButton: '<i class="material-icons">done</i>',
|
||||
@@ -354,7 +354,7 @@ export default {
|
||||
return this.$store.state.gql.url
|
||||
},
|
||||
set(value) {
|
||||
this.$store.commit('setGQLState', { value, attribute: 'url' })
|
||||
this.$store.commit("setGQLState", { value, attribute: "url" })
|
||||
},
|
||||
},
|
||||
headers: {
|
||||
@@ -362,7 +362,7 @@ export default {
|
||||
return this.$store.state.gql.headers
|
||||
},
|
||||
set(value) {
|
||||
this.$store.commit('setGQLState', { value, attribute: 'headers' })
|
||||
this.$store.commit("setGQLState", { value, attribute: "headers" })
|
||||
},
|
||||
},
|
||||
gqlQueryString: {
|
||||
@@ -370,7 +370,7 @@ export default {
|
||||
return this.$store.state.gql.query
|
||||
},
|
||||
set(value) {
|
||||
this.$store.commit('setGQLState', { value, attribute: 'query' })
|
||||
this.$store.commit("setGQLState", { value, attribute: "query" })
|
||||
},
|
||||
},
|
||||
variableString: {
|
||||
@@ -378,9 +378,9 @@ export default {
|
||||
return this.$store.state.gql.variablesJSONString
|
||||
},
|
||||
set(value) {
|
||||
this.$store.commit('setGQLState', {
|
||||
this.$store.commit("setGQLState", {
|
||||
value,
|
||||
attribute: 'variablesJSONString',
|
||||
attribute: "variablesJSONString",
|
||||
})
|
||||
},
|
||||
},
|
||||
@@ -388,13 +388,13 @@ export default {
|
||||
const result = this.headers
|
||||
.filter(({ key }) => !!key)
|
||||
.map(({ key, value }) => `${key}: ${value}`)
|
||||
.join(',\n')
|
||||
return result === '' ? '' : `${result}`
|
||||
.join(",\n")
|
||||
return result === "" ? "" : `${result}`
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleJumpToType(type) {
|
||||
const typesTab = document.getElementById('gqltypes-tab')
|
||||
const typesTab = document.getElementById("gqltypes-tab")
|
||||
typesTab.checked = true
|
||||
|
||||
const rootTypeName = this.resolveRootType(type).name
|
||||
@@ -402,7 +402,7 @@ export default {
|
||||
const target = document.getElementById(`type_${rootTypeName}`)
|
||||
if (target && this.$store.state.postwoman.settings.SCROLL_INTO_ENABLED) {
|
||||
target.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
behavior: "smooth",
|
||||
})
|
||||
}
|
||||
},
|
||||
@@ -413,40 +413,40 @@ export default {
|
||||
},
|
||||
copySchema() {
|
||||
this.$refs.copySchemaCode.innerHTML = this.doneButton
|
||||
const aux = document.createElement('textarea')
|
||||
const aux = document.createElement("textarea")
|
||||
aux.innerText = this.schemaString
|
||||
document.body.appendChild(aux)
|
||||
aux.select()
|
||||
document.execCommand('copy')
|
||||
document.execCommand("copy")
|
||||
document.body.removeChild(aux)
|
||||
this.$toast.success(this.$t('copied_to_clipboard'), {
|
||||
icon: 'done',
|
||||
this.$toast.success(this.$t("copied_to_clipboard"), {
|
||||
icon: "done",
|
||||
})
|
||||
setTimeout(() => (this.$refs.copySchemaCode.innerHTML = this.copyButton), 1000)
|
||||
},
|
||||
copyQuery() {
|
||||
this.$refs.copyQueryButton.innerHTML = this.doneButton
|
||||
const aux = document.createElement('textarea')
|
||||
const aux = document.createElement("textarea")
|
||||
aux.innerText = this.gqlQueryString
|
||||
document.body.appendChild(aux)
|
||||
aux.select()
|
||||
document.execCommand('copy')
|
||||
document.execCommand("copy")
|
||||
document.body.removeChild(aux)
|
||||
this.$toast.success(this.$t('copied_to_clipboard'), {
|
||||
icon: 'done',
|
||||
this.$toast.success(this.$t("copied_to_clipboard"), {
|
||||
icon: "done",
|
||||
})
|
||||
setTimeout(() => (this.$refs.copyQueryButton.innerHTML = this.copyButton), 1000)
|
||||
},
|
||||
copyResponse() {
|
||||
this.$refs.copyResponseButton.innerHTML = this.doneButton
|
||||
const aux = document.createElement('textarea')
|
||||
const aux = document.createElement("textarea")
|
||||
aux.innerText = this.responseString
|
||||
document.body.appendChild(aux)
|
||||
aux.select()
|
||||
document.execCommand('copy')
|
||||
document.execCommand("copy")
|
||||
document.body.removeChild(aux)
|
||||
this.$toast.success(this.$t('copied_to_clipboard'), {
|
||||
icon: 'done',
|
||||
this.$toast.success(this.$t("copied_to_clipboard"), {
|
||||
icon: "done",
|
||||
})
|
||||
setTimeout(() => (this.$refs.copyResponseButton.innerHTML = this.copyButton), 1000)
|
||||
},
|
||||
@@ -454,7 +454,7 @@ export default {
|
||||
const startTime = Date.now()
|
||||
|
||||
this.$nuxt.$loading.start()
|
||||
this.$store.state.postwoman.settings.SCROLL_INTO_ENABLED && this.scrollInto('response')
|
||||
this.$store.state.postwoman.settings.SCROLL_INTO_ENABLED && this.scrollInto("response")
|
||||
|
||||
try {
|
||||
let headers = {}
|
||||
@@ -467,11 +467,11 @@ export default {
|
||||
const gqlQueryString = this.gqlQueryString
|
||||
|
||||
const reqOptions = {
|
||||
method: 'post',
|
||||
method: "post",
|
||||
url: this.url,
|
||||
headers: {
|
||||
...headers,
|
||||
'content-type': 'application/json',
|
||||
"content-type": "application/json",
|
||||
},
|
||||
data: JSON.stringify({ query: gqlQueryString, variables }),
|
||||
}
|
||||
@@ -482,22 +482,22 @@ export default {
|
||||
|
||||
this.$nuxt.$loading.finish()
|
||||
const duration = Date.now() - startTime
|
||||
this.$toast.info(this.$t('finished_in', { duration }), {
|
||||
icon: 'done',
|
||||
this.$toast.info(this.$t("finished_in", { duration }), {
|
||||
icon: "done",
|
||||
})
|
||||
} catch (error) {
|
||||
this.$nuxt.$loading.finish()
|
||||
|
||||
this.$toast.error(`${error} ${this.$t('f12_details')}`, {
|
||||
icon: 'error',
|
||||
this.$toast.error(`${error} ${this.$t("f12_details")}`, {
|
||||
icon: "error",
|
||||
})
|
||||
console.log('Error', error)
|
||||
console.log("Error", error)
|
||||
}
|
||||
},
|
||||
async getSchema() {
|
||||
const startTime = Date.now()
|
||||
this.schemaString = this.$t('loading')
|
||||
this.$store.state.postwoman.settings.SCROLL_INTO_ENABLED && this.scrollInto('schema')
|
||||
this.schemaString = this.$t("loading")
|
||||
this.$store.state.postwoman.settings.SCROLL_INTO_ENABLED && this.scrollInto("schema")
|
||||
|
||||
// Start showing the loading bar as soon as possible.
|
||||
// The nuxt axios module will hide it when the request is made.
|
||||
@@ -514,11 +514,11 @@ export default {
|
||||
})
|
||||
|
||||
const reqOptions = {
|
||||
method: 'post',
|
||||
method: "post",
|
||||
url: this.url,
|
||||
headers: {
|
||||
...headers,
|
||||
'content-type': 'application/json',
|
||||
"content-type": "application/json",
|
||||
},
|
||||
data: query,
|
||||
}
|
||||
@@ -527,7 +527,7 @@ export default {
|
||||
|
||||
const reqConfig = this.$store.state.postwoman.settings.PROXY_ENABLED
|
||||
? {
|
||||
method: 'post',
|
||||
method: "post",
|
||||
url:
|
||||
this.$store.state.postwoman.settings.PROXY_URL || `https://postwoman.apollotv.xyz/`,
|
||||
data: reqOptions,
|
||||
@@ -573,15 +573,15 @@ export default {
|
||||
const typeMap = schema.getTypeMap()
|
||||
const types = []
|
||||
|
||||
const queryTypeName = schema.getQueryType() ? schema.getQueryType().name : ''
|
||||
const mutationTypeName = schema.getMutationType() ? schema.getMutationType().name : ''
|
||||
const queryTypeName = schema.getQueryType() ? schema.getQueryType().name : ""
|
||||
const mutationTypeName = schema.getMutationType() ? schema.getMutationType().name : ""
|
||||
const subscriptionTypeName = schema.getSubscriptionType()
|
||||
? schema.getSubscriptionType().name
|
||||
: ''
|
||||
: ""
|
||||
|
||||
for (const type in typeMap) {
|
||||
if (
|
||||
!typeMap[type].name.startsWith('__') &&
|
||||
!typeMap[type].name.startsWith("__") &&
|
||||
![queryTypeName, mutationTypeName, subscriptionTypeName].includes(typeMap[type].name) &&
|
||||
typeMap[type] instanceof gql.GraphQLObjectType
|
||||
) {
|
||||
@@ -592,16 +592,16 @@ export default {
|
||||
this.$refs.queryEditor.setValidationSchema(schema)
|
||||
this.$nuxt.$loading.finish()
|
||||
const duration = Date.now() - startTime
|
||||
this.$toast.info(this.$t('finished_in', { duration }), {
|
||||
icon: 'done',
|
||||
this.$toast.info(this.$t("finished_in", { duration }), {
|
||||
icon: "done",
|
||||
})
|
||||
} catch (error) {
|
||||
this.$nuxt.$loading.finish()
|
||||
this.schemaString = `${error}. ${this.$t('check_console_details')}`
|
||||
this.$toast.error(`${error} ${this.$t('f12_details')}`, {
|
||||
icon: 'error',
|
||||
this.schemaString = `${error}. ${this.$t("check_console_details")}`
|
||||
this.$toast.error(`${error} ${this.$t("f12_details")}`, {
|
||||
icon: "error",
|
||||
})
|
||||
console.log('Error', error)
|
||||
console.log("Error", error)
|
||||
}
|
||||
},
|
||||
ToggleExpandResponse() {
|
||||
@@ -610,16 +610,16 @@ export default {
|
||||
},
|
||||
downloadResponse() {
|
||||
const dataToWrite = JSON.stringify(this.schemaString, null, 2)
|
||||
const file = new Blob([dataToWrite], { type: 'application/json' })
|
||||
const a = document.createElement('a')
|
||||
const file = new Blob([dataToWrite], { type: "application/json" })
|
||||
const a = document.createElement("a")
|
||||
const url = URL.createObjectURL(file)
|
||||
a.href = url
|
||||
a.download = `${this.url} on ${Date()}.graphql`.replace(/\./g, '[dot]')
|
||||
a.download = `${this.url} on ${Date()}.graphql`.replace(/\./g, "[dot]")
|
||||
document.body.appendChild(a)
|
||||
a.click()
|
||||
this.$refs.downloadResponse.innerHTML = this.doneButton
|
||||
this.$toast.success(this.$t('download_started'), {
|
||||
icon: 'done',
|
||||
this.$toast.success(this.$t("download_started"), {
|
||||
icon: "done",
|
||||
})
|
||||
setTimeout(() => {
|
||||
document.body.removeChild(a)
|
||||
@@ -628,9 +628,9 @@ export default {
|
||||
}, 1000)
|
||||
},
|
||||
addRequestHeader(index) {
|
||||
this.$store.commit('addGQLHeader', {
|
||||
key: '',
|
||||
value: '',
|
||||
this.$store.commit("addGQLHeader", {
|
||||
key: "",
|
||||
value: "",
|
||||
})
|
||||
return false
|
||||
},
|
||||
@@ -638,11 +638,11 @@ export default {
|
||||
// .slice() is used so we get a separate array, rather than just a reference
|
||||
const oldHeaders = this.headers.slice()
|
||||
|
||||
this.$store.commit('removeGQLHeader', index)
|
||||
this.$toast.error(this.$t('deleted'), {
|
||||
icon: 'delete',
|
||||
this.$store.commit("removeGQLHeader", index)
|
||||
this.$toast.error(this.$t("deleted"), {
|
||||
icon: "delete",
|
||||
action: {
|
||||
text: this.$t('undo'),
|
||||
text: this.$t("undo"),
|
||||
duration: 4000,
|
||||
onClick: (e, toastObject) => {
|
||||
this.headers = oldHeaders
|
||||
@@ -654,7 +654,7 @@ export default {
|
||||
},
|
||||
scrollInto(view) {
|
||||
this.$refs[view].$el.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
behavior: "smooth",
|
||||
})
|
||||
},
|
||||
},
|
||||
|
||||
718
pages/index.vue
718
pages/index.vue
File diff suppressed because it is too large
Load Diff
@@ -2,12 +2,12 @@
|
||||
<div class="page">
|
||||
<section id="options">
|
||||
<input id="tab-one" type="radio" name="options" checked="checked" />
|
||||
<label for="tab-one">{{ $t('websocket') }}</label>
|
||||
<label for="tab-one">{{ $t("websocket") }}</label>
|
||||
<div class="tab">
|
||||
<pw-section class="blue" :label="$t('request')" ref="request">
|
||||
<ul>
|
||||
<li>
|
||||
<label for="url">{{ $t('url') }}</label>
|
||||
<label for="url">{{ $t("url") }}</label>
|
||||
<input
|
||||
id="url"
|
||||
type="url"
|
||||
@@ -20,10 +20,10 @@
|
||||
<li>
|
||||
<label for="connect" class="hide-on-small-screen"> </label>
|
||||
<button :disabled="!urlValid" id="connect" name="connect" @click="toggleConnection">
|
||||
{{ !connectionState ? $t('connect') : $t('disconnect') }}
|
||||
{{ !connectionState ? $t("connect") : $t("disconnect") }}
|
||||
<span>
|
||||
<i class="material-icons">
|
||||
{{ !connectionState ? 'sync' : 'sync_disabled' }}
|
||||
{{ !connectionState ? "sync" : "sync_disabled" }}
|
||||
</i>
|
||||
</span>
|
||||
</button>
|
||||
@@ -35,7 +35,7 @@
|
||||
<pw-section class="purple" :label="$t('communication')" id="response" ref="response">
|
||||
<ul>
|
||||
<li>
|
||||
<label for="log">{{ $t('log') }}</label>
|
||||
<label for="log">{{ $t("log") }}</label>
|
||||
<div id="log" name="log" class="log">
|
||||
<span v-if="communication.log">
|
||||
<span
|
||||
@@ -46,13 +46,13 @@
|
||||
}}{{ logEntry.payload }}</span
|
||||
>
|
||||
</span>
|
||||
<span v-else>{{ $t('waiting_for_connection') }}</span>
|
||||
<span v-else>{{ $t("waiting_for_connection") }}</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<label for="message">{{ $t('message') }}</label>
|
||||
<label for="message">{{ $t("message") }}</label>
|
||||
<input
|
||||
id="message"
|
||||
name="message"
|
||||
@@ -66,7 +66,7 @@
|
||||
<li>
|
||||
<label for="send" class="hide-on-small-screen"> </label>
|
||||
<button id="send" name="send" :disabled="!connectionState" @click="sendMessage">
|
||||
{{ $t('send') }}
|
||||
{{ $t("send") }}
|
||||
<span>
|
||||
<i class="material-icons">send</i>
|
||||
</span>
|
||||
@@ -77,12 +77,12 @@
|
||||
</pw-section>
|
||||
</div>
|
||||
<input id="tab-two" type="radio" name="options" />
|
||||
<label for="tab-two">{{ $t('sse') }}</label>
|
||||
<label for="tab-two">{{ $t("sse") }}</label>
|
||||
<div class="tab">
|
||||
<pw-section class="blue" :label="$t('request')" ref="request">
|
||||
<ul>
|
||||
<li>
|
||||
<label for="server">{{ $t('server') }}</label>
|
||||
<label for="server">{{ $t("server") }}</label>
|
||||
<input
|
||||
id="server"
|
||||
type="url"
|
||||
@@ -100,10 +100,10 @@
|
||||
name="start"
|
||||
@click="toggleSSEConnection"
|
||||
>
|
||||
{{ !connectionSSEState ? $t('start') : $t('stop') }}
|
||||
{{ !connectionSSEState ? $t("start") : $t("stop") }}
|
||||
<span>
|
||||
<i class="material-icons">
|
||||
{{ !connectionSSEState ? 'sync' : 'sync_disabled' }}
|
||||
{{ !connectionSSEState ? "sync" : "sync_disabled" }}
|
||||
</i>
|
||||
</span>
|
||||
</button>
|
||||
@@ -115,7 +115,7 @@
|
||||
<pw-section class="purple" :label="$t('communication')" id="response" ref="response">
|
||||
<ul>
|
||||
<li>
|
||||
<label for="log">{{ $t('events') }}</label>
|
||||
<label for="log">{{ $t("events") }}</label>
|
||||
<div id="log" name="log" class="log">
|
||||
<span v-if="events.log">
|
||||
<span
|
||||
@@ -126,7 +126,7 @@
|
||||
}}{{ logEntry.payload }}</span
|
||||
>
|
||||
</span>
|
||||
<span v-else>{{ $t('waiting_for_connection') }}</span>
|
||||
<span v-else>{{ $t("waiting_for_connection") }}</span>
|
||||
</div>
|
||||
<div id="result"></div>
|
||||
</li>
|
||||
@@ -151,7 +151,7 @@ div.log {
|
||||
&,
|
||||
span {
|
||||
font-size: 16px;
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
font-family: "Roboto Mono", monospace;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
@@ -167,29 +167,29 @@ div.log {
|
||||
<script>
|
||||
export default {
|
||||
components: {
|
||||
'pw-section': () => import('../components/section'),
|
||||
"pw-section": () => import("../components/section"),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
connectionState: false,
|
||||
url: 'wss://echo.websocket.org',
|
||||
url: "wss://echo.websocket.org",
|
||||
socket: null,
|
||||
communication: {
|
||||
log: null,
|
||||
input: '',
|
||||
input: "",
|
||||
},
|
||||
connectionSSEState: false,
|
||||
server: 'https://express-eventsource.herokuapp.com/events',
|
||||
server: "https://express-eventsource.herokuapp.com/events",
|
||||
sse: null,
|
||||
events: {
|
||||
log: null,
|
||||
input: '',
|
||||
input: "",
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
urlValid() {
|
||||
const protocol = '^(wss?:\\/\\/)?'
|
||||
const protocol = "^(wss?:\\/\\/)?"
|
||||
const validIP = new RegExp(
|
||||
`${protocol}(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]).){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$`
|
||||
)
|
||||
@@ -199,7 +199,7 @@ export default {
|
||||
return validIP.test(this.url) || validHostname.test(this.url)
|
||||
},
|
||||
serverValid() {
|
||||
const protocol = '^(https?:\\/\\/)?'
|
||||
const protocol = "^(https?:\\/\\/)?"
|
||||
const validIP = new RegExp(
|
||||
`${protocol}(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]).){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$`
|
||||
)
|
||||
@@ -219,9 +219,9 @@ export default {
|
||||
connect() {
|
||||
this.communication.log = [
|
||||
{
|
||||
payload: this.$t('connecting_to', { name: this.url }),
|
||||
source: 'info',
|
||||
color: 'var(--ac-color)',
|
||||
payload: this.$t("connecting_to", { name: this.url }),
|
||||
source: "info",
|
||||
color: "var(--ac-color)",
|
||||
},
|
||||
]
|
||||
try {
|
||||
@@ -230,14 +230,14 @@ export default {
|
||||
this.connectionState = true
|
||||
this.communication.log = [
|
||||
{
|
||||
payload: this.$t('connected_to', { name: this.url }),
|
||||
source: 'info',
|
||||
color: 'var(--ac-color)',
|
||||
payload: this.$t("connected_to", { name: this.url }),
|
||||
source: "info",
|
||||
color: "var(--ac-color)",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
},
|
||||
]
|
||||
this.$toast.success(this.$t('connected'), {
|
||||
icon: 'sync',
|
||||
this.$toast.success(this.$t("connected"), {
|
||||
icon: "sync",
|
||||
})
|
||||
}
|
||||
this.socket.onerror = event => {
|
||||
@@ -246,26 +246,26 @@ export default {
|
||||
this.socket.onclose = event => {
|
||||
this.connectionState = false
|
||||
this.communication.log.push({
|
||||
payload: this.$t('disconnected_from', { name: this.url }),
|
||||
source: 'info',
|
||||
color: '#ff5555',
|
||||
payload: this.$t("disconnected_from", { name: this.url }),
|
||||
source: "info",
|
||||
color: "#ff5555",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
})
|
||||
this.$toast.error(this.$t('disconnected'), {
|
||||
icon: 'sync_disabled',
|
||||
this.$toast.error(this.$t("disconnected"), {
|
||||
icon: "sync_disabled",
|
||||
})
|
||||
}
|
||||
this.socket.onmessage = event => {
|
||||
this.communication.log.push({
|
||||
payload: event.data,
|
||||
source: 'server',
|
||||
source: "server",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
})
|
||||
}
|
||||
} catch (ex) {
|
||||
this.handleError(ex)
|
||||
this.$toast.error(this.$t('something_went_wrong'), {
|
||||
icon: 'error',
|
||||
this.$toast.error(this.$t("something_went_wrong"), {
|
||||
icon: "error",
|
||||
})
|
||||
}
|
||||
},
|
||||
@@ -276,16 +276,16 @@ export default {
|
||||
this.disconnect()
|
||||
this.connectionState = false
|
||||
this.communication.log.push({
|
||||
payload: this.$t('error_occurred'),
|
||||
source: 'info',
|
||||
color: '#ff5555',
|
||||
payload: this.$t("error_occurred"),
|
||||
source: "info",
|
||||
color: "#ff5555",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
})
|
||||
if (error !== null)
|
||||
this.communication.log.push({
|
||||
payload: error,
|
||||
source: 'info',
|
||||
color: '#ff5555',
|
||||
source: "info",
|
||||
color: "#ff5555",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
})
|
||||
},
|
||||
@@ -294,26 +294,26 @@ export default {
|
||||
this.socket.send(message)
|
||||
this.communication.log.push({
|
||||
payload: message,
|
||||
source: 'client',
|
||||
source: "client",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
})
|
||||
this.communication.input = ''
|
||||
this.communication.input = ""
|
||||
},
|
||||
collapse({ target }) {
|
||||
const el = target.parentNode.className
|
||||
document.getElementsByClassName(el)[0].classList.toggle('hidden')
|
||||
document.getElementsByClassName(el)[0].classList.toggle("hidden")
|
||||
},
|
||||
getSourcePrefix(source) {
|
||||
const sourceEmojis = {
|
||||
// Source used for info messages.
|
||||
info: '\tℹ️ [INFO]:\t',
|
||||
info: "\tℹ️ [INFO]:\t",
|
||||
// Source used for client to server messages.
|
||||
client: '\t👽 [SENT]:\t',
|
||||
client: "\t👽 [SENT]:\t",
|
||||
// Source used for server to client messages.
|
||||
server: '\t📥 [RECEIVED]:\t',
|
||||
server: "\t📥 [RECEIVED]:\t",
|
||||
}
|
||||
if (Object.keys(sourceEmojis).includes(source)) return sourceEmojis[source]
|
||||
return ''
|
||||
return ""
|
||||
},
|
||||
toggleSSEConnection() {
|
||||
// If it is connecting:
|
||||
@@ -324,26 +324,26 @@ export default {
|
||||
start() {
|
||||
this.events.log = [
|
||||
{
|
||||
payload: this.$t('connecting_to', { name: this.server }),
|
||||
source: 'info',
|
||||
color: 'var(--ac-color)',
|
||||
payload: this.$t("connecting_to", { name: this.server }),
|
||||
source: "info",
|
||||
color: "var(--ac-color)",
|
||||
},
|
||||
]
|
||||
if (typeof EventSource !== 'undefined') {
|
||||
if (typeof EventSource !== "undefined") {
|
||||
try {
|
||||
this.sse = new EventSource(this.server)
|
||||
this.sse.onopen = event => {
|
||||
this.connectionSSEState = true
|
||||
this.events.log = [
|
||||
{
|
||||
payload: this.$t('connected_to', { name: this.server }),
|
||||
source: 'info',
|
||||
color: 'var(--ac-color)',
|
||||
payload: this.$t("connected_to", { name: this.server }),
|
||||
source: "info",
|
||||
color: "var(--ac-color)",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
},
|
||||
]
|
||||
this.$toast.success(this.$t('connected'), {
|
||||
icon: 'sync',
|
||||
this.$toast.success(this.$t("connected"), {
|
||||
icon: "sync",
|
||||
})
|
||||
}
|
||||
this.sse.onerror = event => {
|
||||
@@ -352,34 +352,34 @@ export default {
|
||||
this.sse.onclose = event => {
|
||||
this.connectionSSEState = false
|
||||
this.events.log.push({
|
||||
payload: this.$t('disconnected_from', { name: this.server }),
|
||||
source: 'info',
|
||||
color: '#ff5555',
|
||||
payload: this.$t("disconnected_from", { name: this.server }),
|
||||
source: "info",
|
||||
color: "#ff5555",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
})
|
||||
this.$toast.error(this.$t('disconnected'), {
|
||||
icon: 'sync_disabled',
|
||||
this.$toast.error(this.$t("disconnected"), {
|
||||
icon: "sync_disabled",
|
||||
})
|
||||
}
|
||||
this.sse.onmessage = event => {
|
||||
this.events.log.push({
|
||||
payload: event.data,
|
||||
source: 'server',
|
||||
source: "server",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
})
|
||||
}
|
||||
} catch (ex) {
|
||||
this.handleSSEError(ex)
|
||||
this.$toast.error(this.$t('something_went_wrong'), {
|
||||
icon: 'error',
|
||||
this.$toast.error(this.$t("something_went_wrong"), {
|
||||
icon: "error",
|
||||
})
|
||||
}
|
||||
} else {
|
||||
this.events.log = [
|
||||
{
|
||||
payload: this.$t('browser_support_sse'),
|
||||
source: 'info',
|
||||
color: '#ff5555',
|
||||
payload: this.$t("browser_support_sse"),
|
||||
source: "info",
|
||||
color: "#ff5555",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
},
|
||||
]
|
||||
@@ -389,16 +389,16 @@ export default {
|
||||
this.stop()
|
||||
this.connectionSSEState = false
|
||||
this.events.log.push({
|
||||
payload: this.$t('error_occurred'),
|
||||
source: 'info',
|
||||
color: '#ff5555',
|
||||
payload: this.$t("error_occurred"),
|
||||
source: "info",
|
||||
color: "#ff5555",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
})
|
||||
if (error !== null)
|
||||
this.events.log.push({
|
||||
payload: error,
|
||||
source: 'info',
|
||||
color: '#ff5555',
|
||||
source: "info",
|
||||
color: "#ff5555",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
})
|
||||
},
|
||||
@@ -409,7 +409,7 @@ export default {
|
||||
},
|
||||
updated: function() {
|
||||
this.$nextTick(function() {
|
||||
const divLog = document.getElementById('log')
|
||||
const divLog = document.getElementById("log")
|
||||
divLog.scrollBy(0, divLog.scrollHeight + 100)
|
||||
})
|
||||
},
|
||||
|
||||
@@ -12,20 +12,20 @@
|
||||
/>
|
||||
<i v-else class="material-icons">account_circle</i>
|
||||
<span>
|
||||
{{ fb.currentUser.displayName || 'Name not found' }}
|
||||
{{ fb.currentUser.displayName || "Name not found" }}
|
||||
</span>
|
||||
</button>
|
||||
<br />
|
||||
<button class="icon">
|
||||
<i class="material-icons">email</i>
|
||||
<span>
|
||||
{{ fb.currentUser.email || 'Email not found' }}
|
||||
{{ fb.currentUser.email || "Email not found" }}
|
||||
</span>
|
||||
</button>
|
||||
<br />
|
||||
<button class="icon" @click="logout">
|
||||
<i class="material-icons">exit_to_app</i>
|
||||
<span>{{ $t('logout') }}</span>
|
||||
<span>{{ $t("logout") }}</span>
|
||||
</button>
|
||||
<br />
|
||||
<p v-for="setting in fb.currentSettings" :key="setting.id">
|
||||
@@ -34,19 +34,19 @@
|
||||
:on="setting.value"
|
||||
@change="toggleSettings(setting.name, setting.value)"
|
||||
>
|
||||
{{ $t(setting.name) + ' ' + $t('sync') }}
|
||||
{{ setting.value ? $t('enabled') : $t('disabled') }}
|
||||
{{ $t(setting.name) + " " + $t("sync") }}
|
||||
{{ setting.value ? $t("enabled") : $t("disabled") }}
|
||||
</pw-toggle>
|
||||
</p>
|
||||
<p v-if="fb.currentSettings.length !== 3">
|
||||
<button class="" @click="initSettings">
|
||||
<i class="material-icons">sync</i>
|
||||
<span>{{ $t('turn_on') + ' ' + $t('sync') }}</span>
|
||||
<span>{{ $t("turn_on") + " " + $t("sync") }}</span>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
<div v-else>
|
||||
<label>{{ $t('login_with') }}</label>
|
||||
<label>{{ $t("login_with") }}</label>
|
||||
<p>
|
||||
<button class="icon" @click="signInWithGoogle">
|
||||
<svg
|
||||
@@ -86,7 +86,7 @@
|
||||
<pw-section class="cyan" :label="$t('theme')" ref="theme">
|
||||
<ul>
|
||||
<li>
|
||||
<label>{{ $t('background') }}</label>
|
||||
<label>{{ $t("background") }}</label>
|
||||
<div class="backgrounds">
|
||||
<span :key="theme.class" @click="applyTheme(theme)" v-for="theme in themes">
|
||||
<swatch
|
||||
@@ -102,7 +102,7 @@
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<label>{{ $t('color') }}</label>
|
||||
<label>{{ $t("color") }}</label>
|
||||
<div class="colors">
|
||||
<span
|
||||
:key="entry.color"
|
||||
@@ -127,8 +127,8 @@
|
||||
:on="settings.FRAME_COLORS_ENABLED"
|
||||
@change="toggleSetting('FRAME_COLORS_ENABLED')"
|
||||
>
|
||||
{{ $t('multi_color') }}
|
||||
{{ settings.FRAME_COLORS_ENABLED ? $t('enabled') : $t('disabled') }}
|
||||
{{ $t("multi_color") }}
|
||||
{{ settings.FRAME_COLORS_ENABLED ? $t("enabled") : $t("disabled") }}
|
||||
</pw-toggle>
|
||||
</span>
|
||||
</li>
|
||||
@@ -140,8 +140,8 @@
|
||||
:on="settings.SCROLL_INTO_ENABLED"
|
||||
@change="toggleSetting('SCROLL_INTO_ENABLED')"
|
||||
>
|
||||
{{ $t('scrollInto_use_toggle') }}
|
||||
{{ settings.SCROLL_INTO_ENABLED ? $t('enabled') : $t('disabled') }}
|
||||
{{ $t("scrollInto_use_toggle") }}
|
||||
{{ settings.SCROLL_INTO_ENABLED ? $t("enabled") : $t("disabled") }}
|
||||
</pw-toggle>
|
||||
</span>
|
||||
</li>
|
||||
@@ -156,7 +156,7 @@
|
||||
:on="settings.EXTENSIONS_ENABLED"
|
||||
@change="toggleSetting('EXTENSIONS_ENABLED')"
|
||||
>
|
||||
{{ $t('extensions_use_toggle') }}
|
||||
{{ $t("extensions_use_toggle") }}
|
||||
</pw-toggle>
|
||||
</div>
|
||||
</li>
|
||||
@@ -169,8 +169,8 @@
|
||||
<div class="flex-wrap">
|
||||
<span>
|
||||
<pw-toggle :on="settings.PROXY_ENABLED" @change="toggleSetting('PROXY_ENABLED')">
|
||||
{{ $t('proxy') }}
|
||||
{{ settings.PROXY_ENABLED ? $t('enabled') : $t('disabled') }}
|
||||
{{ $t("proxy") }}
|
||||
{{ settings.PROXY_ENABLED ? $t("enabled") : $t("disabled") }}
|
||||
</pw-toggle>
|
||||
</span>
|
||||
<a
|
||||
@@ -188,7 +188,7 @@
|
||||
<ul>
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<label for="url">{{ $t('url') }}</label>
|
||||
<label for="url">{{ $t("url") }}</label>
|
||||
<button class="icon" @click="resetProxy" v-tooltip.bottom="$t('reset_default')">
|
||||
<i class="material-icons">clear_all</i>
|
||||
</button>
|
||||
@@ -204,11 +204,11 @@
|
||||
<ul class="info">
|
||||
<li>
|
||||
<p>
|
||||
{{ $t('postwoman_official_proxy_hosting') }}
|
||||
{{ $t("postwoman_official_proxy_hosting") }}
|
||||
<br />
|
||||
{{ $t('read_the') }}
|
||||
{{ $t("read_the") }}
|
||||
<a class="link" href="https://apollotv.xyz/legal" target="_blank" rel="noopener">
|
||||
{{ $t('apollotv_privacy_policy') }} </a
|
||||
{{ $t("apollotv_privacy_policy") }} </a
|
||||
>.
|
||||
</p>
|
||||
</li>
|
||||
@@ -235,14 +235,14 @@
|
||||
<style scoped lang="scss"></style>
|
||||
|
||||
<script>
|
||||
import firebase from 'firebase/app'
|
||||
import { fb } from '../functions/fb'
|
||||
import firebase from "firebase/app"
|
||||
import { fb } from "../functions/fb"
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'pw-section': () => import('../components/section'),
|
||||
'pw-toggle': () => import('../components/toggle'),
|
||||
swatch: () => import('../components/settings/swatch'),
|
||||
"pw-section": () => import("../components/section"),
|
||||
"pw-toggle": () => import("../components/toggle"),
|
||||
swatch: () => import("../components/settings/swatch"),
|
||||
},
|
||||
|
||||
data() {
|
||||
@@ -252,97 +252,97 @@ export default {
|
||||
// set the relevant values.
|
||||
themes: [
|
||||
{
|
||||
color: '#202124',
|
||||
name: this.$t('kinda_dark'),
|
||||
class: '',
|
||||
aceEditor: 'twilight',
|
||||
color: "#202124",
|
||||
name: this.$t("kinda_dark"),
|
||||
class: "",
|
||||
aceEditor: "twilight",
|
||||
},
|
||||
{
|
||||
color: '#ffffff',
|
||||
name: this.$t('clearly_white'),
|
||||
color: "#ffffff",
|
||||
name: this.$t("clearly_white"),
|
||||
vibrant: true,
|
||||
class: 'light',
|
||||
aceEditor: 'iplastic',
|
||||
class: "light",
|
||||
aceEditor: "iplastic",
|
||||
},
|
||||
{
|
||||
color: '#000000',
|
||||
name: this.$t('just_black'),
|
||||
class: 'black',
|
||||
aceEditor: 'vibrant_ink',
|
||||
color: "#000000",
|
||||
name: this.$t("just_black"),
|
||||
class: "black",
|
||||
aceEditor: "vibrant_ink",
|
||||
},
|
||||
{
|
||||
color: 'var(--ac-color)',
|
||||
name: this.$t('auto_system'),
|
||||
vibrant: window.matchMedia('(prefers-color-scheme: light)').matches,
|
||||
class: 'auto',
|
||||
aceEditor: window.matchMedia('(prefers-color-scheme: light)').matches
|
||||
? 'iplastic'
|
||||
: 'twilight',
|
||||
color: "var(--ac-color)",
|
||||
name: this.$t("auto_system"),
|
||||
vibrant: window.matchMedia("(prefers-color-scheme: light)").matches,
|
||||
class: "auto",
|
||||
aceEditor: window.matchMedia("(prefers-color-scheme: light)").matches
|
||||
? "iplastic"
|
||||
: "twilight",
|
||||
},
|
||||
],
|
||||
// You can define a new color here! It will simply store the color value.
|
||||
colors: [
|
||||
// If the color is vibrant, black is used as the active foreground color.
|
||||
{
|
||||
color: '#50fa7b',
|
||||
name: this.$t('green'),
|
||||
color: "#50fa7b",
|
||||
name: this.$t("green"),
|
||||
vibrant: true,
|
||||
},
|
||||
{
|
||||
color: '#f1fa8c',
|
||||
name: this.$t('yellow'),
|
||||
color: "#f1fa8c",
|
||||
name: this.$t("yellow"),
|
||||
vibrant: true,
|
||||
},
|
||||
{
|
||||
color: '#ff79c6',
|
||||
name: this.$t('pink'),
|
||||
color: "#ff79c6",
|
||||
name: this.$t("pink"),
|
||||
vibrant: true,
|
||||
},
|
||||
{
|
||||
color: '#ff5555',
|
||||
name: this.$t('red'),
|
||||
color: "#ff5555",
|
||||
name: this.$t("red"),
|
||||
vibrant: false,
|
||||
},
|
||||
{
|
||||
color: '#bd93f9',
|
||||
name: this.$t('purple'),
|
||||
color: "#bd93f9",
|
||||
name: this.$t("purple"),
|
||||
vibrant: true,
|
||||
},
|
||||
{
|
||||
color: '#ffb86c',
|
||||
name: this.$t('orange'),
|
||||
color: "#ffb86c",
|
||||
name: this.$t("orange"),
|
||||
vibrant: true,
|
||||
},
|
||||
{
|
||||
color: '#8be9fd',
|
||||
name: this.$t('cyan'),
|
||||
color: "#8be9fd",
|
||||
name: this.$t("cyan"),
|
||||
vibrant: true,
|
||||
},
|
||||
{
|
||||
color: '#57b5f9',
|
||||
name: this.$t('blue'),
|
||||
color: "#57b5f9",
|
||||
name: this.$t("blue"),
|
||||
vibrant: false,
|
||||
},
|
||||
],
|
||||
|
||||
settings: {
|
||||
SCROLL_INTO_ENABLED:
|
||||
typeof this.$store.state.postwoman.settings.SCROLL_INTO_ENABLED !== 'undefined'
|
||||
typeof this.$store.state.postwoman.settings.SCROLL_INTO_ENABLED !== "undefined"
|
||||
? this.$store.state.postwoman.settings.SCROLL_INTO_ENABLED
|
||||
: true,
|
||||
|
||||
THEME_COLOR: '',
|
||||
THEME_TAB_COLOR: '',
|
||||
THEME_COLOR: "",
|
||||
THEME_TAB_COLOR: "",
|
||||
THEME_COLOR_VIBRANT: true,
|
||||
|
||||
FRAME_COLORS_ENABLED: this.$store.state.postwoman.settings.FRAME_COLORS_ENABLED || false,
|
||||
PROXY_ENABLED: this.$store.state.postwoman.settings.PROXY_ENABLED || false,
|
||||
PROXY_URL:
|
||||
this.$store.state.postwoman.settings.PROXY_URL || 'https://postwoman.apollotv.xyz/',
|
||||
PROXY_KEY: this.$store.state.postwoman.settings.PROXY_KEY || '',
|
||||
this.$store.state.postwoman.settings.PROXY_URL || "https://postwoman.apollotv.xyz/",
|
||||
PROXY_KEY: this.$store.state.postwoman.settings.PROXY_KEY || "",
|
||||
|
||||
EXTENSIONS_ENABLED:
|
||||
typeof this.$store.state.postwoman.settings.EXTENSIONS_ENABLED !== 'undefined'
|
||||
typeof this.$store.state.postwoman.settings.EXTENSIONS_ENABLED !== "undefined"
|
||||
? this.$store.state.postwoman.settings.EXTENSIONS_ENABLED
|
||||
: true,
|
||||
},
|
||||
@@ -356,45 +356,45 @@ export default {
|
||||
proxySettings: {
|
||||
deep: true,
|
||||
handler(value) {
|
||||
this.applySetting('PROXY_URL', value.url)
|
||||
this.applySetting('PROXY_KEY', value.key)
|
||||
this.applySetting("PROXY_URL", value.url)
|
||||
this.applySetting("PROXY_KEY", value.key)
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
applyTheme({ class: name, color, aceEditor }) {
|
||||
this.applySetting('THEME_CLASS', name)
|
||||
this.applySetting('THEME_ACE_EDITOR', aceEditor)
|
||||
document.querySelector('meta[name=theme-color]').setAttribute('content', color)
|
||||
this.applySetting('THEME_TAB_COLOR', color)
|
||||
this.applySetting("THEME_CLASS", name)
|
||||
this.applySetting("THEME_ACE_EDITOR", aceEditor)
|
||||
document.querySelector("meta[name=theme-color]").setAttribute("content", color)
|
||||
this.applySetting("THEME_TAB_COLOR", color)
|
||||
document.documentElement.className = name
|
||||
},
|
||||
setActiveColor(color, vibrant) {
|
||||
// By default, the color is vibrant.
|
||||
if (vibrant === null) vibrant = true
|
||||
document.documentElement.style.setProperty('--ac-color', color)
|
||||
document.documentElement.style.setProperty("--ac-color", color)
|
||||
document.documentElement.style.setProperty(
|
||||
'--act-color',
|
||||
vibrant ? 'rgba(32, 33, 36, 1)' : 'rgba(255, 255, 255, 1)'
|
||||
"--act-color",
|
||||
vibrant ? "rgba(32, 33, 36, 1)" : "rgba(255, 255, 255, 1)"
|
||||
)
|
||||
this.applySetting('THEME_COLOR', color.toUpperCase())
|
||||
this.applySetting('THEME_COLOR_VIBRANT', vibrant)
|
||||
this.applySetting("THEME_COLOR", color.toUpperCase())
|
||||
this.applySetting("THEME_COLOR_VIBRANT", vibrant)
|
||||
},
|
||||
getActiveColor() {
|
||||
// This strips extra spaces and # signs from the strings.
|
||||
const strip = str => str.replace(/#/g, '').replace(/ /g, '')
|
||||
const strip = str => str.replace(/#/g, "").replace(/ /g, "")
|
||||
return `#${strip(
|
||||
window.getComputedStyle(document.documentElement).getPropertyValue('--ac-color')
|
||||
window.getComputedStyle(document.documentElement).getPropertyValue("--ac-color")
|
||||
).toUpperCase()}`
|
||||
},
|
||||
applySetting(key, value) {
|
||||
this.settings[key] = value
|
||||
this.$store.commit('postwoman/applySetting', [key, value])
|
||||
this.$store.commit("postwoman/applySetting", [key, value])
|
||||
},
|
||||
toggleSetting(key) {
|
||||
this.settings[key] = !this.settings[key]
|
||||
this.$store.commit('postwoman/applySetting', [key, this.settings[key]])
|
||||
this.$store.commit("postwoman/applySetting", [key, this.settings[key]])
|
||||
},
|
||||
logout() {
|
||||
fb.currentUser = null
|
||||
@@ -403,11 +403,11 @@ export default {
|
||||
.signOut()
|
||||
.catch(err => {
|
||||
this.$toast.show(err.message || err, {
|
||||
icon: 'error',
|
||||
icon: "error",
|
||||
})
|
||||
})
|
||||
this.$toast.info(this.$t('logged_out'), {
|
||||
icon: 'vpn_key',
|
||||
this.$toast.info(this.$t("logged_out"), {
|
||||
icon: "vpn_key",
|
||||
})
|
||||
},
|
||||
signInWithGoogle() {
|
||||
@@ -417,17 +417,17 @@ export default {
|
||||
.signInWithPopup(provider)
|
||||
.then(({ additionalUserInfo }) => {
|
||||
if (additionalUserInfo.isNewUser) {
|
||||
this.$toast.info(`${this.$t('turn_on')} ${this.$t('sync')}`, {
|
||||
icon: 'sync',
|
||||
this.$toast.info(`${this.$t("turn_on")} ${this.$t("sync")}`, {
|
||||
icon: "sync",
|
||||
duration: null,
|
||||
closeOnSwipe: false,
|
||||
action: {
|
||||
text: this.$t('yes'),
|
||||
text: this.$t("yes"),
|
||||
onClick: (e, toastObject) => {
|
||||
fb.writeSettings('syncHistory', true)
|
||||
fb.writeSettings('syncCollections', true)
|
||||
fb.writeSettings('syncEnvironments', true)
|
||||
this.$router.push({ path: '/settings' })
|
||||
fb.writeSettings("syncHistory", true)
|
||||
fb.writeSettings("syncCollections", true)
|
||||
fb.writeSettings("syncEnvironments", true)
|
||||
this.$router.push({ path: "/settings" })
|
||||
toastObject.remove()
|
||||
},
|
||||
},
|
||||
@@ -436,7 +436,7 @@ export default {
|
||||
})
|
||||
.catch(err => {
|
||||
this.$toast.show(err.message || err, {
|
||||
icon: 'error',
|
||||
icon: "error",
|
||||
})
|
||||
})
|
||||
},
|
||||
@@ -447,17 +447,17 @@ export default {
|
||||
.signInWithPopup(provider)
|
||||
.then(({ additionalUserInfo }) => {
|
||||
if (additionalUserInfo.isNewUser) {
|
||||
this.$toast.info(`${this.$t('turn_on')} ${this.$t('sync')}`, {
|
||||
icon: 'sync',
|
||||
this.$toast.info(`${this.$t("turn_on")} ${this.$t("sync")}`, {
|
||||
icon: "sync",
|
||||
duration: null,
|
||||
closeOnSwipe: false,
|
||||
action: {
|
||||
text: this.$t('yes'),
|
||||
text: this.$t("yes"),
|
||||
onClick: (e, toastObject) => {
|
||||
fb.writeSettings('syncHistory', true)
|
||||
fb.writeSettings('syncCollections', true)
|
||||
fb.writeSettings('syncEnvironments', true)
|
||||
this.$router.push({ path: '/settings' })
|
||||
fb.writeSettings("syncHistory", true)
|
||||
fb.writeSettings("syncCollections", true)
|
||||
fb.writeSettings("syncEnvironments", true)
|
||||
this.$router.push({ path: "/settings" })
|
||||
toastObject.remove()
|
||||
},
|
||||
},
|
||||
@@ -466,7 +466,7 @@ export default {
|
||||
})
|
||||
.catch(err => {
|
||||
this.$toast.show(err.message || err, {
|
||||
icon: 'error',
|
||||
icon: "error",
|
||||
})
|
||||
})
|
||||
},
|
||||
@@ -474,15 +474,15 @@ export default {
|
||||
fb.writeSettings(s, !v)
|
||||
},
|
||||
initSettings() {
|
||||
fb.writeSettings('syncHistory', true)
|
||||
fb.writeSettings('syncCollections', true)
|
||||
fb.writeSettings('syncEnvironments', true)
|
||||
fb.writeSettings("syncHistory", true)
|
||||
fb.writeSettings("syncCollections", true)
|
||||
fb.writeSettings("syncEnvironments", true)
|
||||
},
|
||||
resetProxy({ target }) {
|
||||
this.settings.PROXY_URL = `https://postwoman.apollotv.xyz/`
|
||||
target.innerHTML = this.doneButton
|
||||
this.$toast.info(this.$t('cleared'), {
|
||||
icon: 'clear_all',
|
||||
this.$toast.info(this.$t("cleared"), {
|
||||
icon: "clear_all",
|
||||
})
|
||||
setTimeout(() => (target.innerHTML = '<i class="material-icons">clear_all</i>'), 1000)
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user