mirror of
https://github.com/styppo/hamstr.git
synced 2024-10-18 05:23:28 +00:00
Add relay settings
This commit is contained in:
parent
dd46b28561
commit
18ea594080
134
src/components/Settings/RelaySettings.vue
Normal file
134
src/components/Settings/RelaySettings.vue
Normal file
@ -0,0 +1,134 @@
|
||||
<template>
|
||||
<div class="relay-settings">
|
||||
<div v-for="relay in settings.relays" :key="relay" class="relay">
|
||||
<span class="relay-url">{{ relay }}</span>
|
||||
<!-- <q-icon v-if="isConnected(relay)" icon="fiber_manual_record" size="sm" class="connected" />-->
|
||||
<q-btn icon="delete_outline" size="sm" class="btn-icon" flat round @click="removeRelay(relay)" />
|
||||
</div>
|
||||
<q-form class="add-relay" :class="{focused}" @submit.stop="addRelay">
|
||||
<input
|
||||
v-model="newRelayUrl"
|
||||
placeholder="Add a relay"
|
||||
@focus="focused = true"
|
||||
@blur="focused = false"
|
||||
/>
|
||||
<q-btn type="submit" icon="add_circle_outline" size="sm" flat round class="btn-icon" />
|
||||
</q-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {useSettingsStore} from 'stores/Settings'
|
||||
import {Notify} from 'quasar'
|
||||
// import {useNostrStore} from 'src/nostr/NostrStore'
|
||||
|
||||
export default {
|
||||
name: 'RelaySettings',
|
||||
setup() {
|
||||
return {
|
||||
settings: useSettingsStore(),
|
||||
// nostr: useNostrStore(),
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
newRelayUrl: '',
|
||||
focused: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
addRelay() {
|
||||
let url
|
||||
try {
|
||||
url = new URL(this.newRelayUrl?.trim())
|
||||
} catch (e) {
|
||||
Notify.create({
|
||||
message: 'Invalid URL',
|
||||
color: 'negative'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (url.protocol !== 'wss:') {
|
||||
Notify.create({
|
||||
message: 'Must be a wss:// URL',
|
||||
color: 'negative'
|
||||
})
|
||||
return
|
||||
}
|
||||
let href = url.href
|
||||
console.log(url)
|
||||
if (url.pathname === '/') {
|
||||
href = href.slice(0, -1)
|
||||
}
|
||||
if (this.settings.hasRelay(href)) {
|
||||
Notify.create({
|
||||
message: 'Relay already exists',
|
||||
color: 'negative'
|
||||
})
|
||||
return
|
||||
}
|
||||
this.settings.addRelay(href)
|
||||
},
|
||||
removeRelay(url) {
|
||||
this.settings.removeRelay(url)
|
||||
},
|
||||
// isConnected(url) {
|
||||
// return this.nostr.client.isConnectedTo(url)
|
||||
// }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "assets/theme/colors.scss";
|
||||
|
||||
.relay-settings {
|
||||
background-color: rgba($color: $color-dark-gray, $alpha: 0.1);
|
||||
border-radius: 1rem;
|
||||
.relay {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: .5rem .5rem .5rem 1rem;
|
||||
border-bottom: $border-dark;
|
||||
transition: 200ms ease;
|
||||
&:hover {
|
||||
background-color: rgba($color: $color-dark-gray, $alpha: 0.2);
|
||||
}
|
||||
&:first-child {
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
}
|
||||
&:last-child {
|
||||
border: 0;
|
||||
border-radius: 0 0 1rem 1rem;
|
||||
}
|
||||
&-url {
|
||||
flex-grow: 1;
|
||||
font-weight: 500;
|
||||
}
|
||||
.connected {
|
||||
color: $positive;
|
||||
}
|
||||
}
|
||||
.add-relay {
|
||||
display: flex;
|
||||
background-color: rgba($color: $color-dark-gray, $alpha: 0.2);
|
||||
border-radius: 0 0 1rem 1rem;
|
||||
padding: .5rem .5rem .5rem 1rem;
|
||||
transition: 200ms ease;
|
||||
input {
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
&:hover, &.focused {
|
||||
background-color: rgba($color: $color-light-gray, $alpha: 0.2);
|
||||
}
|
||||
}
|
||||
.btn-icon {
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
</style>
|
@ -20,6 +20,11 @@ export default class NostrClient {
|
||||
return this.pool.connectedRelays()
|
||||
}
|
||||
|
||||
isConnectedTo(url) {
|
||||
// TODO remove linear scan
|
||||
return this.connectedRelays().some(relay => relay.url === url)
|
||||
}
|
||||
|
||||
subscribe(filters, subId = null) {
|
||||
return this.pool.subscribe(filters, subId)
|
||||
}
|
||||
|
@ -1,19 +1,26 @@
|
||||
<template>
|
||||
<PageHeader />
|
||||
<h3>Under construction</h3>
|
||||
<div class="settings">
|
||||
<h3>Relays</h3>
|
||||
<RelaySettings />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PageHeader from 'components/PageHeader.vue'
|
||||
import RelaySettings from 'components/Settings/RelaySettings.vue'
|
||||
|
||||
export default {
|
||||
name: 'Settings',
|
||||
components: {PageHeader}
|
||||
components: {
|
||||
PageHeader,
|
||||
RelaySettings
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
h3 {
|
||||
.settings {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
</style>
|
||||
|
@ -53,13 +53,17 @@ export const useSettingsStore = defineStore('settings', {
|
||||
this.pubkey = pubkey
|
||||
},
|
||||
addRelay(url) {
|
||||
if (this.hasRelay(url)) return
|
||||
this.relays.push(url)
|
||||
},
|
||||
removeRelay(url) {
|
||||
const idx = this.relays.indexOf(url)
|
||||
if (idx < 0) return
|
||||
this.relays.splice(idx, 1)
|
||||
}
|
||||
},
|
||||
hasRelay(url) {
|
||||
return this.relays.indexOf(url) >= 0
|
||||
},
|
||||
},
|
||||
persist: true,
|
||||
})
|
||||
|
Loading…
Reference in New Issue
Block a user