btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

Initial prettier formatted files

Browse Source
This commit is contained in:
Dmitry Yankowski
2020-02-24 13:44:50 -05:00
parent 1543c990ca
commit 777e629b3d
83 changed files with 18556 additions and 19258 deletions
Download Patch File Download Diff File Expand all files Collapse all files

242
pages/doc.vue
View File

@@ -4,20 +4,16 @@
<ul>
<li>
<p class="info">
{{ $t("generate_docs_message") }}
{{ $t('generate_docs_message') }}
</p>
</li>
</ul>
<ul>
<li>
<label for="collectionUpload">
<button
class="icon"
@click="$refs.collectionUpload.click()"
v-tooltip="$t('json')"
>
<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
@@ -39,7 +35,7 @@
fontSize: '16px',
autoScrollEditorIntoView: true,
showPrintMargin: false,
useWorker: false
useWorker: false,
}"
/>
</li>
@@ -48,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>
@@ -56,132 +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"
>
<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"
>
<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"
>
<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"
>
<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"
>
<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"
>
<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>
@@ -193,103 +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"
>
<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"
>
<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"
>
<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>
@@ -342,53 +302,53 @@
</style>
<script>
import AceEditor from "../components/ace-editor";
import AceEditor from '../components/ace-editor'
export default {
components: {
"pw-section": () => import("../components/section"),
Editor: AceEditor
'pw-section': () => import('../components/section'),
Editor: AceEditor,
},
data() {
return {
collectionJSON: "[]",
items: []
};
collectionJSON: '[]',
items: [],
}
},
methods: {
uploadCollection() {
this.rawInput = true;
let file = this.$refs.collectionUpload.files[0];
this.rawInput = true
let file = this.$refs.collectionUpload.files[0]
if (file !== undefined && file !== null) {
let reader = new FileReader();
let reader = new FileReader()
reader.onload = ({ target }) => {
this.collectionJSON = target.result;
};
reader.readAsText(file);
this.$toast.info(this.$t("file_imported"), {
icon: "attach_file"
});
this.collectionJSON = target.result
}
reader.readAsText(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',
})
}
},
getDoc() {
try {
this.items = JSON.parse(this.collectionJSON);
this.$toast.info(this.$t("docs_generated"), {
icon: "book"
});
this.items = JSON.parse(this.collectionJSON)
this.$toast.info(this.$t('docs_generated'), {
icon: 'book',
})
} catch (e) {
this.$toast.error(e, {
icon: "code"
});
icon: 'code',
})
}
}
}
};
},
},
}
</script>

494
pages/graphql.vue
View File

@@ -5,19 +5,14 @@
<pw-section class="blue" :label="$t('endpoint')" ref="endpoint">
<ul>
<li>
<label for="url">{{ $t("url") }}</label>
<input
id="url"
type="url"
v-model="url"
@keyup.enter="getSchema()"
/>
<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">&nbsp;</label>
<button id="get" name="get" @click="getSchema">
{{ $t("get_schema") }}
{{ $t('get_schema') }}
<span><i class="material-icons">send</i></span>
</button>
</li>
@@ -29,13 +24,9 @@
<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')"
>
<button class="icon" @click="headers = []" v-tooltip.bottom="$t('clear')">
<i class="material-icons">clear_all</i>
</button>
</div>
@@ -60,7 +51,7 @@
@input="
$store.commit('setGQLHeaderKey', {
index,
value: $event
value: $event,
})
"
autofocus
@@ -74,7 +65,7 @@
@change="
$store.commit('setGQLHeaderValue', {
index,
value: $event.target.value
value: $event.target.value,
})
"
autofocus
@@ -97,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>
@@ -105,20 +96,18 @@
<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"
@click="ToggleExpandResponse"
ref="ToggleExpandResponse"
v-tooltip="{
content: !expandResponse
? $t('expand_response')
: $t('collapse_response')
content: !expandResponse ? $t('expand_response') : $t('collapse_response'),
}"
>
<i class="material-icons">
{{ !expandResponse ? "unfold_more" : "unfold_less" }}
{{ !expandResponse ? 'unfold_more' : 'unfold_less' }}
</i>
</button>
<button
@@ -149,20 +138,16 @@
autoScrollEditorIntoView: true,
readOnly: true,
showPrintMargin: false,
useWorker: false
useWorker: false,
}"
/>
</pw-section>
<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')"
>
<button class="icon" @click="runQuery()" v-tooltip.bottom="$t('run_query')">
<i class="material-icons">play_arrow</i>
</button>
<button
@@ -184,7 +169,7 @@
fontSize: '16px',
autoScrollEditorIntoView: true,
showPrintMargin: false,
useWorker: false
useWorker: false,
}"
/>
</pw-section>
@@ -199,14 +184,14 @@
fontSize: '16px',
autoScrollEditorIntoView: true,
showPrintMargin: false,
useWorker: false
useWorker: false,
}"
/>
</pw-section>
<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"
@@ -228,7 +213,7 @@
autoScrollEditorIntoView: true,
readOnly: true,
showPrintMargin: false,
useWorker: false
useWorker: false,
}"
/>
</pw-section>
@@ -244,14 +229,11 @@
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">
<gql-field
:gqlField="field"
:jumpTypeCallback="handleJumpToType"
/>
<gql-field :gqlField="field" :jumpTypeCallback="handleJumpToType" />
</div>
</div>
@@ -263,14 +245,11 @@
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">
<gql-field
:gqlField="field"
:jumpTypeCallback="handleJumpToType"
/>
<gql-field :gqlField="field" :jumpTypeCallback="handleJumpToType" />
</div>
</div>
@@ -282,14 +261,11 @@
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">
<gql-field
:gqlField="field"
:jumpTypeCallback="handleJumpToType"
/>
<gql-field :gqlField="field" :jumpTypeCallback="handleJumpToType" />
</div>
</div>
@@ -301,18 +277,11 @@
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}`"
>
<gql-type
:gqlType="type"
:jumpTypeCallback="handleJumpToType"
/>
<div v-for="type in gqlTypes" :key="type.name" :id="`type_${type.name}`">
<gql-type :gqlType="type" :jumpTypeCallback="handleJumpToType" />
</div>
</div>
</section>
@@ -326,7 +295,7 @@
"
class="info"
>
{{ $t("send_request_first") }}
{{ $t('send_request_first') }}
</p>
</pw-section>
</aside>
@@ -342,373 +311,352 @@
</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
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
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>',
expandResponse: false,
responseBodyMaxLines: 16
};
responseBodyMaxLines: 16,
}
},
computed: {
url: {
get() {
return this.$store.state.gql.url;
return this.$store.state.gql.url
},
set(value) {
this.$store.commit("setGQLState", { value, attribute: "url" });
}
this.$store.commit('setGQLState', { value, attribute: 'url' })
},
},
headers: {
get() {
return this.$store.state.gql.headers;
return this.$store.state.gql.headers
},
set(value) {
this.$store.commit("setGQLState", { value, attribute: "headers" });
}
this.$store.commit('setGQLState', { value, attribute: 'headers' })
},
},
gqlQueryString: {
get() {
return this.$store.state.gql.query;
return this.$store.state.gql.query
},
set(value) {
this.$store.commit("setGQLState", { value, attribute: "query" });
}
this.$store.commit('setGQLState', { value, attribute: 'query' })
},
},
variableString: {
get() {
return this.$store.state.gql.variablesJSONString;
return this.$store.state.gql.variablesJSONString
},
set(value) {
this.$store.commit("setGQLState", {
this.$store.commit('setGQLState', {
value,
attribute: "variablesJSONString"
});
}
attribute: 'variablesJSONString',
})
},
},
headerString() {
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");
typesTab.checked = true;
const typesTab = document.getElementById('gqltypes-tab')
typesTab.checked = true
const rootTypeName = this.resolveRootType(type).name;
const rootTypeName = this.resolveRootType(type).name
const target = document.getElementById(`type_${rootTypeName}`);
const target = document.getElementById(`type_${rootTypeName}`)
if (target && this.$store.state.postwoman.settings.SCROLL_INTO_ENABLED) {
target.scrollIntoView({
behavior: "smooth"
});
behavior: 'smooth',
})
}
},
resolveRootType(type) {
let t = type;
while (t.ofType != null) t = t.ofType;
return t;
let t = type
while (t.ofType != null) t = t.ofType
return t
},
copySchema() {
this.$refs.copySchemaCode.innerHTML = this.doneButton;
const aux = document.createElement("textarea");
aux.innerText = this.schemaString;
document.body.appendChild(aux);
aux.select();
document.execCommand("copy");
document.body.removeChild(aux);
this.$toast.success(this.$t("copied_to_clipboard"), {
icon: "done"
});
setTimeout(
() => (this.$refs.copySchemaCode.innerHTML = this.copyButton),
1000
);
this.$refs.copySchemaCode.innerHTML = this.doneButton
const aux = document.createElement('textarea')
aux.innerText = this.schemaString
document.body.appendChild(aux)
aux.select()
document.execCommand('copy')
document.body.removeChild(aux)
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");
aux.innerText = this.gqlQueryString;
document.body.appendChild(aux);
aux.select();
document.execCommand("copy");
document.body.removeChild(aux);
this.$toast.success(this.$t("copied_to_clipboard"), {
icon: "done"
});
setTimeout(
() => (this.$refs.copyQueryButton.innerHTML = this.copyButton),
1000
);
this.$refs.copyQueryButton.innerHTML = this.doneButton
const aux = document.createElement('textarea')
aux.innerText = this.gqlQueryString
document.body.appendChild(aux)
aux.select()
document.execCommand('copy')
document.body.removeChild(aux)
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");
aux.innerText = this.responseString;
document.body.appendChild(aux);
aux.select();
document.execCommand("copy");
document.body.removeChild(aux);
this.$toast.success(this.$t("copied_to_clipboard"), {
icon: "done"
});
setTimeout(
() => (this.$refs.copyResponseButton.innerHTML = this.copyButton),
1000
);
this.$refs.copyResponseButton.innerHTML = this.doneButton
const aux = document.createElement('textarea')
aux.innerText = this.responseString
document.body.appendChild(aux)
aux.select()
document.execCommand('copy')
document.body.removeChild(aux)
this.$toast.success(this.$t('copied_to_clipboard'), {
icon: 'done',
})
setTimeout(() => (this.$refs.copyResponseButton.innerHTML = this.copyButton), 1000)
},
async runQuery() {
const startTime = Date.now();
const startTime = Date.now()
this.$nuxt.$loading.start();
this.$store.state.postwoman.settings.SCROLL_INTO_ENABLED &&
this.scrollInto("response");
this.$nuxt.$loading.start()
this.$store.state.postwoman.settings.SCROLL_INTO_ENABLED && this.scrollInto('response')
try {
let headers = {};
let headers = {}
this.headers.forEach(header => {
headers[header.key] = header.value;
});
headers[header.key] = header.value
})
let variables = JSON.parse(this.variableString);
let variables = JSON.parse(this.variableString)
const gqlQueryString = this.gqlQueryString;
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 })
};
data: JSON.stringify({ query: gqlQueryString, variables }),
}
const data = await sendNetworkRequest(reqOptions, this.$store);
const data = await sendNetworkRequest(reqOptions, this.$store)
this.responseString = JSON.stringify(data.data, null, 2);
this.responseString = JSON.stringify(data.data, null, 2)
this.$nuxt.$loading.finish();
const duration = Date.now() - startTime;
this.$toast.info(this.$t("finished_in", { duration }), {
icon: "done"
});
this.$nuxt.$loading.finish()
const duration = Date.now() - startTime
this.$toast.info(this.$t('finished_in', { duration }), {
icon: 'done',
})
} catch (error) {
this.$nuxt.$loading.finish();
this.$nuxt.$loading.finish()
this.$toast.error(`${error} ${this.$t("f12_details")}`, {
icon: "error"
});
console.log("Error", error);
this.$toast.error(`${error} ${this.$t('f12_details')}`, {
icon: '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");
const startTime = Date.now()
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.
this.$nuxt.$loading.start();
this.$nuxt.$loading.start()
try {
const query = JSON.stringify({
query: gql.getIntrospectionQuery()
});
query: gql.getIntrospectionQuery(),
})
let headers = {};
let headers = {}
this.headers.forEach(header => {
headers[header.key] = header.value;
});
headers[header.key] = header.value
})
const reqOptions = {
method: "post",
method: 'post',
url: this.url,
headers: {
...headers,
"content-type": "application/json"
'content-type': 'application/json',
},
data: query
};
data: query,
}
// console.log(reqOptions);
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
this.$store.state.postwoman.settings.PROXY_URL || `https://postwoman.apollotv.xyz/`,
data: reqOptions,
}
: reqOptions;
: reqOptions
const res = await axios(reqConfig);
const res = await axios(reqConfig)
const data = this.$store.state.postwoman.settings.PROXY_ENABLED
? res.data
: res;
const data = this.$store.state.postwoman.settings.PROXY_ENABLED ? res.data : res
const schema = gql.buildClientSchema(data.data.data);
const schema = gql.buildClientSchema(data.data.data)
this.schemaString = gql.printSchema(schema, {
commentDescriptions: true
});
commentDescriptions: true,
})
if (schema.getQueryType()) {
const fields = schema.getQueryType().getFields();
const qFields = [];
const fields = schema.getQueryType().getFields()
const qFields = []
for (const field in fields) {
qFields.push(fields[field]);
qFields.push(fields[field])
}
this.queryFields = qFields;
this.queryFields = qFields
}
if (schema.getMutationType()) {
const fields = schema.getMutationType().getFields();
const mFields = [];
const fields = schema.getMutationType().getFields()
const mFields = []
for (const field in fields) {
mFields.push(fields[field]);
mFields.push(fields[field])
}
this.mutationFields = mFields;
this.mutationFields = mFields
}
if (schema.getSubscriptionType()) {
const fields = schema.getSubscriptionType().getFields();
const sFields = [];
const fields = schema.getSubscriptionType().getFields()
const sFields = []
for (const field in fields) {
sFields.push(fields[field]);
sFields.push(fields[field])
}
this.subscriptionFields = sFields;
this.subscriptionFields = sFields
}
const typeMap = schema.getTypeMap();
const types = [];
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("__") &&
![queryTypeName, mutationTypeName, subscriptionTypeName].includes(
typeMap[type].name
) &&
!typeMap[type].name.startsWith('__') &&
![queryTypeName, mutationTypeName, subscriptionTypeName].includes(typeMap[type].name) &&
typeMap[type] instanceof gql.GraphQLObjectType
) {
types.push(typeMap[type]);
types.push(typeMap[type])
}
}
this.gqlTypes = types;
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.gqlTypes = types
this.$refs.queryEditor.setValidationSchema(schema)
this.$nuxt.$loading.finish()
const duration = Date.now() - startTime
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"
});
console.log("Error", error);
this.$nuxt.$loading.finish()
this.schemaString = `${error}. ${this.$t('check_console_details')}`
this.$toast.error(`${error} ${this.$t('f12_details')}`, {
icon: 'error',
})
console.log('Error', error)
}
},
ToggleExpandResponse() {
this.expandResponse = !this.expandResponse;
this.responseBodyMaxLines =
this.responseBodyMaxLines == Infinity ? 16 : Infinity;
this.expandResponse = !this.expandResponse
this.responseBodyMaxLines = this.responseBodyMaxLines == Infinity ? 16 : Infinity
},
downloadResponse() {
const dataToWrite = JSON.stringify(this.schemaString, null, 2);
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]");
document.body.appendChild(a);
a.click();
this.$refs.downloadResponse.innerHTML = this.doneButton;
this.$toast.success(this.$t("download_started"), {
icon: "done"
});
const dataToWrite = JSON.stringify(this.schemaString, null, 2)
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]')
document.body.appendChild(a)
a.click()
this.$refs.downloadResponse.innerHTML = this.doneButton
this.$toast.success(this.$t('download_started'), {
icon: 'done',
})
setTimeout(() => {
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
this.$refs.downloadResponse.innerHTML = this.downloadButton;
}, 1000);
document.body.removeChild(a)
window.URL.revokeObjectURL(url)
this.$refs.downloadResponse.innerHTML = this.downloadButton
}, 1000)
},
addRequestHeader(index) {
this.$store.commit("addGQLHeader", {
key: "",
value: ""
});
return false;
this.$store.commit('addGQLHeader', {
key: '',
value: '',
})
return false
},
removeRequestHeader(index) {
// .slice() is used so we get a separate array, rather than just a reference
const oldHeaders = this.headers.slice();
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;
toastObject.remove();
}
}
});
this.headers = oldHeaders
toastObject.remove()
},
},
})
// console.log(oldHeaders);
},
scrollInto(view) {
this.$refs[view].$el.scrollIntoView({
behavior: "smooth"
});
}
}
};
behavior: 'smooth',
})
},
},
}
</script>

1917
pages/index.vue
View File

File diff suppressed because it is too large Load Diff

351
pages/realtime.vue
View File

@@ -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"
@@ -19,16 +19,11 @@
<div>
<li>
<label for="connect" class="hide-on-small-screen">&nbsp;</label>
<button
:disabled="!urlValid"
id="connect"
name="connect"
@click="toggleConnection"
>
{{ !connectionState ? $t("connect") : $t("disconnect") }}
<button :disabled="!urlValid" id="connect" name="connect" @click="toggleConnection">
{{ !connectionState ? $t('connect') : $t('disconnect') }}
<span>
<i class="material-icons">
{{ !connectionState ? "sync" : "sync_disabled" }}
{{ !connectionState ? 'sync' : 'sync_disabled' }}
</i>
</span>
</button>
@@ -37,15 +32,10 @@
</ul>
</pw-section>
<pw-section
class="purple"
:label="$t('communication')"
id="response"
ref="response"
>
<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
@@ -56,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"
@@ -75,13 +65,8 @@
<div>
<li>
<label for="send" class="hide-on-small-screen">&nbsp;</label>
<button
id="send"
name="send"
:disabled="!connectionState"
@click="sendMessage"
>
{{ $t("send") }}
<button id="send" name="send" :disabled="!connectionState" @click="sendMessage">
{{ $t('send') }}
<span>
<i class="material-icons">send</i>
</span>
@@ -92,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"
@@ -115,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>
@@ -127,15 +112,10 @@
</ul>
</pw-section>
<pw-section
class="purple"
:label="$t('communication')"
id="response"
ref="response"
>
<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
@@ -146,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>
@@ -171,7 +151,7 @@ div.log {
&,
span {
font-size: 16px;
font-family: "Roboto Mono", monospace;
font-family: 'Roboto Mono', monospace;
font-weight: 400;
}
@@ -187,252 +167,251 @@ 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])$`
);
)
const validHostname = new RegExp(
`${protocol}(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9]).)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9-]*[A-Za-z0-9/])$`
);
return validIP.test(this.url) || validHostname.test(this.url);
)
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])$`
);
)
const validHostname = new RegExp(
`${protocol}(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9]).)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9-]*[A-Za-z0-9/])$`
);
return validIP.test(this.server) || validHostname.test(this.server);
}
)
return validIP.test(this.server) || validHostname.test(this.server)
},
},
methods: {
toggleConnection() {
// If it is connecting:
if (!this.connectionState) return this.connect();
if (!this.connectionState) return this.connect()
// Otherwise, it's disconnecting.
else return this.disconnect();
else return this.disconnect()
},
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 {
this.socket = new WebSocket(this.url);
this.socket = new WebSocket(this.url)
this.socket.onopen = event => {
this.connectionState = true;
this.connectionState = true
this.communication.log = [
{
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"
});
};
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.socket.onerror = event => {
this.handleError();
};
this.handleError()
}
this.socket.onclose = event => {
this.connectionState = false;
this.connectionState = false
this.communication.log.push({
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"
});
};
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.socket.onmessage = event => {
this.communication.log.push({
payload: event.data,
source: "server",
ts: new Date().toLocaleTimeString()
});
};
source: 'server',
ts: new Date().toLocaleTimeString(),
})
}
} catch (ex) {
this.handleError(ex);
this.$toast.error(this.$t("something_went_wrong"), {
icon: "error"
});
this.handleError(ex)
this.$toast.error(this.$t('something_went_wrong'), {
icon: 'error',
})
}
},
disconnect() {
this.socket.close();
this.socket.close()
},
handleError(error) {
this.disconnect();
this.connectionState = false;
this.disconnect()
this.connectionState = false
this.communication.log.push({
payload: this.$t("error_occurred"),
source: "info",
color: "#ff5555",
ts: new Date().toLocaleTimeString()
});
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",
ts: new Date().toLocaleTimeString()
});
source: 'info',
color: '#ff5555',
ts: new Date().toLocaleTimeString(),
})
},
sendMessage() {
const message = this.communication.input;
this.socket.send(message);
const message = this.communication.input
this.socket.send(message)
this.communication.log.push({
payload: message,
source: "client",
ts: new Date().toLocaleTimeString()
});
this.communication.input = "";
source: 'client',
ts: new Date().toLocaleTimeString(),
})
this.communication.input = ''
},
collapse({ target }) {
const el = target.parentNode.className;
document.getElementsByClassName(el)[0].classList.toggle("hidden");
const el = target.parentNode.className
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"
};
if (Object.keys(sourceEmojis).includes(source))
return sourceEmojis[source];
return "";
server: '\t📥 [RECEIVED]:\t',
}
if (Object.keys(sourceEmojis).includes(source)) return sourceEmojis[source]
return ''
},
toggleSSEConnection() {
// If it is connecting:
if (!this.connectionSSEState) return this.start();
if (!this.connectionSSEState) return this.start()
// Otherwise, it's disconnecting.
else return this.stop();
else return this.stop()
},
start() {
this.events.log = [
{
payload: this.$t("connecting_to", { name: this.server }),
source: "info",
color: "var(--ac-color)"
}
];
if (typeof EventSource !== "undefined") {
payload: this.$t('connecting_to', { name: this.server }),
source: 'info',
color: 'var(--ac-color)',
},
]
if (typeof EventSource !== 'undefined') {
try {
this.sse = new EventSource(this.server);
this.sse = new EventSource(this.server)
this.sse.onopen = event => {
this.connectionSSEState = true;
this.connectionSSEState = true
this.events.log = [
{
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"
});
};
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.sse.onerror = event => {
this.handleSSEError();
};
this.handleSSEError()
}
this.sse.onclose = event => {
this.connectionSSEState = false;
this.connectionSSEState = false
this.events.log.push({
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"
});
};
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.sse.onmessage = event => {
this.events.log.push({
payload: event.data,
source: "server",
ts: new Date().toLocaleTimeString()
});
};
source: 'server',
ts: new Date().toLocaleTimeString(),
})
}
} catch (ex) {
this.handleSSEError(ex);
this.$toast.error(this.$t("something_went_wrong"), {
icon: "error"
});
this.handleSSEError(ex)
this.$toast.error(this.$t('something_went_wrong'), {
icon: 'error',
})
}
} else {
this.events.log = [
{
payload: this.$t("browser_support_sse"),
source: "info",
color: "#ff5555",
ts: new Date().toLocaleTimeString()
}
];
payload: this.$t('browser_support_sse'),
source: 'info',
color: '#ff5555',
ts: new Date().toLocaleTimeString(),
},
]
}
},
handleSSEError(error) {
this.stop();
this.connectionSSEState = false;
this.stop()
this.connectionSSEState = false
this.events.log.push({
payload: this.$t("error_occurred"),
source: "info",
color: "#ff5555",
ts: new Date().toLocaleTimeString()
});
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",
ts: new Date().toLocaleTimeString()
});
source: 'info',
color: '#ff5555',
ts: new Date().toLocaleTimeString(),
})
},
stop() {
this.sse.onclose();
this.sse.close();
}
this.sse.onclose()
this.sse.close()
},
},
updated: function() {
this.$nextTick(function() {
const divLog = document.getElementById("log");
divLog.scrollBy(0, divLog.scrollHeight + 100);
});
}
};
const divLog = document.getElementById('log')
divLog.scrollBy(0, divLog.scrollHeight + 100)
})
},
}
</script>

364
pages/settings.vue
View File

@@ -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,13 +86,9 @@
<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"
>
<span :key="theme.class" @click="applyTheme(theme)" v-for="theme in themes">
<swatch
:active="settings.THEME_CLASS === theme.class"
:class="{ vibrant: theme.vibrant }"
@@ -106,7 +102,7 @@
</ul>
<ul>
<li>
<label>{{ $t("color") }}</label>
<label>{{ $t('color') }}</label>
<div class="colors">
<span
:key="entry.color"
@@ -131,25 +127,21 @@
: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>
</ul>
<ul>
</ul>
<ul>
<li>
<span>
<pw-toggle
: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>
@@ -164,7 +156,7 @@
:on="settings.EXTENSIONS_ENABLED"
@change="toggleSetting('EXTENSIONS_ENABLED')"
>
{{ $t("extensions_use_toggle") }}
{{ $t('extensions_use_toggle') }}
</pw-toggle>
</div>
</li>
@@ -176,12 +168,9 @@
<li>
<div class="flex-wrap">
<span>
<pw-toggle
:on="settings.PROXY_ENABLED"
@change="toggleSetting('PROXY_ENABLED')"
>
{{ $t("proxy") }}
{{ settings.PROXY_ENABLED ? $t("enabled") : $t("disabled") }}
<pw-toggle :on="settings.PROXY_ENABLED" @change="toggleSetting('PROXY_ENABLED')">
{{ $t('proxy') }}
{{ settings.PROXY_ENABLED ? $t('enabled') : $t('disabled') }}
</pw-toggle>
</span>
<a
@@ -199,12 +188,8 @@
<ul>
<li>
<div class="flex-wrap">
<label for="url">{{ $t("url") }}</label>
<button
class="icon"
@click="resetProxy"
v-tooltip.bottom="$t('reset_default')"
>
<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>
</div>
@@ -219,16 +204,11 @@
<ul class="info">
<li>
<p>
{{ $t("postwoman_official_proxy_hosting") }}
{{ $t('postwoman_official_proxy_hosting') }}
<br />
{{ $t("read_the") }}
<a
class="link"
href="https://apollotv.xyz/legal"
target="_blank"
rel="noopener"
>
{{ $t("apollotv_privacy_policy") }} </a
{{ $t('read_the') }}
<a class="link" href="https://apollotv.xyz/legal" target="_blank" rel="noopener">
{{ $t('apollotv_privacy_policy') }} </a
>.
</p>
</li>
@@ -255,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() {
@@ -272,265 +252,253 @@ 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"),
vibrant: true
color: '#50fa7b',
name: this.$t('green'),
vibrant: true,
},
{
color: "#f1fa8c",
name: this.$t("yellow"),
vibrant: true
color: '#f1fa8c',
name: this.$t('yellow'),
vibrant: true,
},
{
color: "#ff79c6",
name: this.$t("pink"),
vibrant: true
color: '#ff79c6',
name: this.$t('pink'),
vibrant: true,
},
{
color: "#ff5555",
name: this.$t("red"),
vibrant: false
color: '#ff5555',
name: this.$t('red'),
vibrant: false,
},
{
color: "#bd93f9",
name: this.$t("purple"),
vibrant: true
color: '#bd93f9',
name: this.$t('purple'),
vibrant: true,
},
{
color: "#ffb86c",
name: this.$t("orange"),
vibrant: true
color: '#ffb86c',
name: this.$t('orange'),
vibrant: true,
},
{
color: "#8be9fd",
name: this.$t("cyan"),
vibrant: true
color: '#8be9fd',
name: this.$t('cyan'),
vibrant: true,
},
{
color: "#57b5f9",
name: this.$t("blue"),
vibrant: false
}
color: '#57b5f9',
name: this.$t('blue'),
vibrant: false,
},
],
settings: {
SCROLL_INTO_ENABLED:
typeof this.$store.state.postwoman.settings.SCROLL_INTO_ENABLED !==
"undefined"
SCROLL_INTO_ENABLED:
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,
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
: true,
},
doneButton: '<i class="material-icons">done</i>',
fb
};
fb,
}
},
watch: {
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);
document.documentElement.className = name;
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);
if (vibrant === null) vibrant = true
document.documentElement.style.setProperty('--ac-color', color)
document.documentElement.style.setProperty(
"--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);
'--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)
},
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")
).toUpperCase()}`;
window.getComputedStyle(document.documentElement).getPropertyValue('--ac-color')
).toUpperCase()}`
},
applySetting(key, value) {
this.settings[key] = value;
this.$store.commit("postwoman/applySetting", [key, value]);
this.settings[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.settings[key] = !this.settings[key]
this.$store.commit('postwoman/applySetting', [key, this.settings[key]])
},
logout() {
fb.currentUser = null;
fb.currentUser = null
firebase
.auth()
.signOut()
.catch(err => {
this.$toast.show(err.message || err, {
icon: "error"
});
});
this.$toast.info(this.$t("logged_out"), {
icon: "vpn_key"
});
icon: 'error',
})
})
this.$toast.info(this.$t('logged_out'), {
icon: 'vpn_key',
})
},
signInWithGoogle() {
const provider = new firebase.auth.GoogleAuthProvider();
const provider = new firebase.auth.GoogleAuthProvider()
firebase
.auth()
.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" });
toastObject.remove();
}
}
});
fb.writeSettings('syncHistory', true)
fb.writeSettings('syncCollections', true)
fb.writeSettings('syncEnvironments', true)
this.$router.push({ path: '/settings' })
toastObject.remove()
},
},
})
}
})
.catch(err => {
this.$toast.show(err.message || err, {
icon: "error"
});
});
icon: 'error',
})
})
},
signInWithGithub() {
const provider = new firebase.auth.GithubAuthProvider();
const provider = new firebase.auth.GithubAuthProvider()
firebase
.auth()
.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" });
toastObject.remove();
}
}
});
fb.writeSettings('syncHistory', true)
fb.writeSettings('syncCollections', true)
fb.writeSettings('syncEnvironments', true)
this.$router.push({ path: '/settings' })
toastObject.remove()
},
},
})
}
})
.catch(err => {
this.$toast.show(err.message || err, {
icon: "error"
});
});
icon: 'error',
})
})
},
toggleSettings(s, v) {
fb.writeSettings(s, !v);
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"
});
setTimeout(
() => (target.innerHTML = '<i class="material-icons">clear_all</i>'),
1000
);
}
this.settings.PROXY_URL = `https://postwoman.apollotv.xyz/`
target.innerHTML = this.doneButton
this.$toast.info(this.$t('cleared'), {
icon: 'clear_all',
})
setTimeout(() => (target.innerHTML = '<i class="material-icons">clear_all</i>'), 1000)
},
},
beforeMount() {
this.settings.THEME_COLOR = this.getActiveColor();
this.settings.THEME_COLOR = this.getActiveColor()
},
computed: {
proxySettings() {
return {
url: this.settings.PROXY_URL,
key: this.settings.PROXY_KEY
};
}
}
};
key: this.settings.PROXY_KEY,
}
},
},
}
</script>