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

: rotating_light: Lint

Browse Source
This commit is contained in:
Liyas Thomas
2019-10-25 13:44:34 +05:30
parent 96adfa0b5a
commit a09d7d76d3
35 changed files with 3133 additions and 2620 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1965
pages/index.vue
View File

File diff suppressed because it is too large Load Diff

190
pages/settings.vue
View File

@@ -6,7 +6,12 @@
<h3 class="title">Background</h3>
<div class="backgrounds">
<span :key="theme.class" @click="applyTheme(theme.class)" v-for="theme in themes">
<swatch :active="settings.THEME_CLASS === theme.class" :class="{ vibrant: theme.vibrant }" :color="theme.color" :name="theme.name"></swatch>
<swatch
:active="settings.THEME_CLASS === theme.class"
:class="{ vibrant: theme.vibrant }"
:color="theme.color"
:name="theme.name"
></swatch>
</span>
</div>
</li>
@@ -15,8 +20,17 @@
<li>
<h3 class="title">Color</h3>
<div class="colors">
<span :key="entry.color" @click.prevent="setActiveColor(entry.color, entry.vibrant)" v-for="entry in colors">
<swatch :active="settings.THEME_COLOR === entry.color.toUpperCase()" :class="{ vibrant: entry.vibrant }" :color="entry.color" :name="entry.name" />
<span
:key="entry.color"
@click.prevent="setActiveColor(entry.color, entry.vibrant)"
v-for="entry in colors"
>
<swatch
:active="settings.THEME_COLOR === entry.color.toUpperCase()"
:class="{ vibrant: entry.vibrant }"
:color="entry.color"
:name="entry.name"
/>
</span>
</div>
</li>
@@ -25,21 +39,23 @@
<li>
<h3 class="title">Frames</h3>
<span>
<pw-toggle :on="!settings.DISABLE_FRAME_COLORS" @change="applySetting('DISABLE_FRAME_COLORS', $event)">
Multi-color {{ settings.DISABLE_FRAME_COLORS ? "Disabled" : "Enabled" }}
</pw-toggle>
<pw-toggle
:on="!settings.DISABLE_FRAME_COLORS"
@change="applySetting('DISABLE_FRAME_COLORS', $event)"
>Multi-color {{ settings.DISABLE_FRAME_COLORS ? "Disabled" : "Enabled" }}</pw-toggle>
</span>
</li>
</ul>
</pw-section>
<pw-section class="blue" icon="public" label="Proxy">
<ul>
<li>
<pw-toggle :on="settings.PROXY_ENABLED" @change="applySetting('PROXY_ENABLED', $event)">
Proxy {{ settings.PROXY_ENABLED ? "enabled" : "disabled" }}
</pw-toggle>
</li>
</ul>
<pw-section class="blue" icon="public" label="Proxy">
<ul>
<li>
<pw-toggle
:on="settings.PROXY_ENABLED"
@change="applySetting('PROXY_ENABLED', $event)"
>Proxy {{ settings.PROXY_ENABLED ? "enabled" : "disabled" }}</pw-toggle>
</li>
</ul>
<!--
PROXY SETTINGS URL AND KEY
--------------
@@ -55,10 +71,10 @@
</li>
</ul>
-->
</pw-section>
</pw-section>
</div>
</template>
<script>
import section from "../components/section";
import swatch from "../components/settings/swatch";
@@ -66,9 +82,9 @@
export default {
components: {
'pw-section': section,
'pw-toggle': toggle,
'swatch': swatch
"pw-section": section,
"pw-toggle": toggle,
swatch: swatch
},
data() {
@@ -78,128 +94,137 @@
// set the relevant values.
themes: [
{
"color": "rgb(37, 38, 40)",
"name": "Kinda Dark",
"class": ""
color: "rgb(37, 38, 40)",
name: "Kinda Dark",
class: ""
},
{
"color": "#ffffff",
"name": "Clearly White",
"vibrant": true,
"class": "light"
color: "#ffffff",
name: "Clearly White",
vibrant: true,
class: "light"
},
{
"color": "#000000",
"name": "Just Black",
"class": "black"
color: "#000000",
name: "Just Black",
class: "black"
},
{
"color": "var(--bg-color)",
"name": "Auto (system)",
"vibrant": window.matchMedia('(prefers-color-scheme: light)').matches,
"class": "auto"
color: "var(--bg-color)",
name: "Auto (system)",
vibrant: window.matchMedia("(prefers-color-scheme: light)").matches,
class: "auto"
}
],
// 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": "Green",
"vibrant": true
color: "#50fa7b",
name: "Green",
vibrant: true
},
{
"color": "#f1fa8c",
"name": "Yellow",
"vibrant": true
color: "#f1fa8c",
name: "Yellow",
vibrant: true
},
{
"color": "#ff79c6",
"name": "Pink",
"vibrant": true
color: "#ff79c6",
name: "Pink",
vibrant: true
},
{
"color": "#ff5555",
"name": "Red",
"vibrant": false
color: "#ff5555",
name: "Red",
vibrant: false
},
{
"color": "#bd93f9",
"name": "Purple",
"vibrant": true
color: "#bd93f9",
name: "Purple",
vibrant: true
},
{
"color": "#ffb86c",
"name": "Orange",
"vibrant": true
color: "#ffb86c",
name: "Orange",
vibrant: true
},
{
"color": "#8be9fd",
"name": "Cyan",
"vibrant": true
color: "#8be9fd",
name: "Cyan",
vibrant: true
},
{
"color": "#57b5f9",
"name": "Blue",
"vibrant": false
},
color: "#57b5f9",
name: "Blue",
vibrant: false
}
],
settings: {
THEME_CLASS: this.$store.state.postwoman.settings.THEME_CLASS || '',
THEME_COLOR: '',
THEME_CLASS: this.$store.state.postwoman.settings.THEME_CLASS || "",
THEME_COLOR: "",
THEME_COLOR_VIBRANT: true,
DISABLE_FRAME_COLORS: this.$store.state.postwoman.settings.DISABLE_FRAME_COLORS || false,
PROXY_ENABLED: this.$store.state.postwoman.settings.PROXY_ENABLED || false,
PROXY_URL: this.$store.state.postwoman.settings.PROXY_URL || '',
PROXY_KEY: this.$store.state.postwoman.settings.PROXY_KEY || ''
DISABLE_FRAME_COLORS:
this.$store.state.postwoman.settings.DISABLE_FRAME_COLORS || false,
PROXY_ENABLED:
this.$store.state.postwoman.settings.PROXY_ENABLED || false,
PROXY_URL: this.$store.state.postwoman.settings.PROXY_URL || "",
PROXY_KEY: this.$store.state.postwoman.settings.PROXY_KEY || ""
}
}
};
},
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(name) {
this.applySetting('THEME_CLASS', name);
this.applySetting("THEME_CLASS", name);
document.documentElement.className = name;
let imgGitHub = document.getElementById("imgGitHub");
imgGitHub.style['filter'] = "";
imgGitHub.style['webkit-filter'] = "invert(100%)";
imgGitHub.style["filter"] = "";
imgGitHub.style["webkit-filter"] = "invert(100%)";
if (name.includes("light")) {
imgGitHub.style['filter'] = "invert(100%)";
imgGitHub.style['webkit-filter'] = "invert(100%)";
imgGitHub.style["filter"] = "invert(100%)";
imgGitHub.style["webkit-filter"] = "invert(100%)";
}
},
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('--act-color', vibrant ? 'rgb(37, 38, 40)' : '#f8f8f2');
this.applySetting('THEME_COLOR', color.toUpperCase());
this.applySetting('THEME_COLOR_VIBRANT', vibrant);
document.documentElement.style.setProperty("--ac-color", color);
document.documentElement.style.setProperty(
"--act-color",
vibrant ? "rgb(37, 38, 40)" : "#f8f8f2"
);
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, '');
return `#${strip(window.getComputedStyle(document.documentElement).getPropertyValue('--ac-color')).toUpperCase()}`;
const strip = str => str.replace(/#/g, "").replace(/ /g, "");
return `#${strip(
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]]);
}
},
beforeMount() {
@@ -211,9 +236,8 @@
return {
url: this.settings.PROXY_URL,
key: this.settings.PROXY_KEY
}
};
}
}
}
};
</script>

165
pages/websocket.vue
View File

@@ -4,7 +4,13 @@
<ul>
<li>
<label for="url">URL</label>
<input id="url" type="url" :class="{ error: !urlValid }" v-model="url" @keyup.enter="urlValid ? toggleConnection() : null">
<input
id="url"
type="url"
:class="{ error: !urlValid }"
v-model="url"
@keyup.enter="urlValid ? toggleConnection() : null"
/>
</li>
<li>
<label for="connect" class="hide-on-small-screen">&nbsp;</label>
@@ -18,13 +24,23 @@
</li>
</ul>
</pw-section>
<pw-section class="purple" icon="cloud_download" label="Communication" id="response" ref="response">
<pw-section
class="purple"
icon="cloud_download"
label="Communication"
id="response"
ref="response"
>
<ul>
<li>
<label for="log">Log</label>
<div id="log" name="log" class="log">
<span v-if="communication.log">
<span v-for="(logEntry, index) in communication.log" :style="{ color: logEntry.color }" :key="index">@ {{ logEntry.ts }} {{ getSourcePrefix(logEntry.source) }} {{ logEntry.payload }}</span>
<span
v-for="(logEntry, index) in communication.log"
:style="{ color: logEntry.color }"
:key="index"
>@ {{ logEntry.ts }} {{ getSourcePrefix(logEntry.source) }} {{ logEntry.payload }}</span>
</span>
<span v-else>(waiting for connection)</span>
</div>
@@ -33,7 +49,14 @@
<ul>
<li>
<label for="message">Message</label>
<input id="message" name="message" type="text" v-model="communication.input" :readonly="!connectionState" @keyup.enter="connectionState ? sendMessage() : null">
<input
id="message"
name="message"
type="text"
v-model="communication.input"
:readonly="!connectionState"
@keyup.enter="connectionState ? sendMessage() : null"
/>
</li>
<li>
<label for="send" class="hide-on-small-screen">&nbsp;</label>
@@ -62,7 +85,7 @@
&,
span {
font-size: 18px;
font-family: 'Roboto Mono', monospace;
font-family: "Roboto Mono", monospace;
}
span {
@@ -70,13 +93,13 @@
white-space: pre-wrap;
}
}
</style>
<script>
import section from "../components/section";
export default {
components: {
'pw-section': section
"pw-section": section
},
data() {
return {
@@ -87,19 +110,22 @@
log: null,
input: ""
}
}
};
},
computed: {
toggleConnectionVerb() {
return !this.connectionState ? "Connect" : "Disconnect";
},
urlValid() {
const pattern = new RegExp('^(wss?:\\/\\/)?' +
'((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' +
'((\\d{1,3}\\.){3}\\d{1,3}))' +
'(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' +
'(\\?[;&a-z\\d%_.~+=-]*)?' +
'(\\#[-a-z\\d_]*)?$', 'i');
const pattern = new RegExp(
"^(wss?:\\/\\/)?" +
"((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|" +
"((\\d{1,3}\\.){3}\\d{1,3}))" +
"(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*" +
"(\\?[;&a-z\\d%_.~+=-]*)?" +
"(\\#[-a-z\\d_]*)?$",
"i"
);
return pattern.test(this.url);
}
},
@@ -111,51 +137,55 @@
else return this.disconnect();
},
connect() {
this.communication.log = [{
payload: `Connecting to ${this.url}...`,
source: 'info',
color: 'var(--ac-color)'
}];
this.communication.log = [
{
payload: `Connecting to ${this.url}...`,
source: "info",
color: "var(--ac-color)"
}
];
try {
this.socket = new WebSocket(this.url);
this.socket.onopen = (event) => {
this.socket.onopen = event => {
this.connectionState = true;
this.communication.log = [{
payload: `Connected to ${this.url}.`,
source: 'info',
color: 'var(--ac-color)',
ts: (new Date()).toLocaleTimeString()
}];
this.$toast.success('Connected', {
icon: 'sync'
this.communication.log = [
{
payload: `Connected to ${this.url}.`,
source: "info",
color: "var(--ac-color)",
ts: new Date().toLocaleTimeString()
}
];
this.$toast.success("Connected", {
icon: "sync"
});
};
this.socket.onerror = (event) => {
this.socket.onerror = event => {
this.handleError();
};
this.socket.onclose = (event) => {
this.socket.onclose = event => {
this.connectionState = false;
this.communication.log.push({
payload: `Disconnected from ${this.url}.`,
source: 'info',
color: '#ff5555',
ts: (new Date()).toLocaleTimeString()
source: "info",
color: "#ff5555",
ts: new Date().toLocaleTimeString()
});
this.$toast.error('Disconnected', {
icon: 'sync_disabled'
this.$toast.error("Disconnected", {
icon: "sync_disabled"
});
};
this.socket.onmessage = (event) => {
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('Something went wrong!', {
icon: 'error'
this.$toast.error("Something went wrong!", {
icon: "error"
});
}
},
@@ -167,52 +197,51 @@
this.connectionState = false;
this.communication.log.push({
payload: `An error has 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()
});
if (error != null)
this.communication.log.push({
payload: error,
source: "info",
color: "#ff5555",
ts: new Date().toLocaleTimeString()
});
},
sendMessage() {
const message = this.communication.input;
this.socket.send(message);
this.communication.log.push({
payload: message,
source: 'client',
ts: (new Date()).toLocaleTimeString()
source: "client",
ts: new Date().toLocaleTimeString()
});
this.communication.input = "";
},
collapse({
target
}) {
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 '';
if (Object.keys(sourceEmojis).includes(source))
return sourceEmojis[source];
return "";
}
},
updated: function () {
this.$nextTick(function () {
var divLog = document.getElementById("log")
divLog.scrollBy(0, divLog.scrollHeight + 100)
})
updated: function() {
this.$nextTick(function() {
var divLog = document.getElementById("log");
divLog.scrollBy(0, divLog.scrollHeight + 100);
});
}
}
};
</script>