Skip to content

Commit

Permalink
disable alerts by click by default
Browse files Browse the repository at this point in the history 
+ add filters by quote
  • Loading branch information
@Tucsky
Tucsky committed Mar 31, 2022
1 parent d074b7c commit b64a0c0
Show file tree
Hide file tree
Showing 14 changed files with 171 additions and 110 deletions.
6 changes: 3 additions & 3 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
"core-js": "^3.6.5",
"eventemitter3": "^4.0.7",
"idb": "^6.0.0",
"lightweight-charts": "git+https://github.com/Tucsky/lightweight-charts.git#13f58f7b6071d371682636e12e0b70de6a157d3e",
"lightweight-charts": "git+https://github.com/Tucsky/lightweight-charts.git#87042a080a1cb0ea8de288f6d476bd9e6aac9af5",
"lodash.merge": "^4.6.2",
"pako": "^1.0.6",
"prismjs": "^1.25.0",
Expand Down
70 changes: 46 additions & 24 deletions src/components/SearchDialog.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,24 @@
<div class="search-filters__title text-muted mb8" @click="showExtraFilters = !showExtraFilters">Extra <i class="icon-up-thin"></i></div>
</div>

<div class="search-filters mb16">
<div class="search-filters__content" v-if="showQuoteFilters">
<label class="checkbox-control -small mb4" v-for="quote of quoteCurrencies" :key="quote">
<input
type="checkbox"
class="form-control"
:checked="searchQuotes[quote] === true || searchQuotes[quote] === undefined"
@change="$store.commit('settings/TOGGLE_SEARCH_QUOTE', quote)"
/>
<div></div>
<span>{{ quote }}</span>
</label>
</div>
<div class="search-filters__title text-muted mb8" @click="showQuoteFilters = !showQuoteFilters">
Quote currency <i class="icon-up-thin"></i>
</div>
</div>

<div class="search-filters mb16">
<div class="search-filters__content" v-if="showTypeFilters">
<label class="checkbox-control -small mb4">
Expand Down Expand Up @@ -274,7 +292,7 @@ import DialogMixin from '@/mixins/dialogMixin'
import { copyTextToClipboard, getBucketId } from '@/utils/helpers'
import dialogService from '@/services/dialogService'
import workspacesService from '@/services/workspacesService'
import { indexedProducts, indexProducts, requestProducts } from '@/services/productsService'
import { formatStablecoin, indexedProducts, indexProducts, requestProducts } from '@/services/productsService'
const RESULTS_PER_PAGE = 50
Expand All @@ -300,10 +318,12 @@ export default {
mobileShowFilters: false,
showExchanges: true,
showExtraFilters: true,
showQuoteFilters: false,
showTypeFilters: true,
onlyConnected: false,
canRefreshProducts: true,
flattenedProducts: []
flattenedProducts: [],
quoteCurrencies: ['USD', 'USDT', 'USDC', 'UST', 'ETH', 'BTC', 'BNB', 'EUR', 'AUD', 'GBP']
}),
computed: {
resultsPerPage() {
Expand Down Expand Up @@ -354,27 +374,26 @@ export default {
let label = ''
if (toConnect) {
label += `add${this.loading ? 'ing' : ''} ${toConnect}`
label += `connect${this.loading ? 'ing' : ''} ${toConnect}`
}
if (toDisconnect) {
label += `${toConnect ? ' and ' : ''}remov${this.loading ? 'ing' : 'e'} ${toDisconnect}`
label += `${toConnect ? ' and ' : ''}disconnect${this.loading ? 'ing' : ''} ${toDisconnect}`
}
return label ? label + ' markets' : 'OK'
return label ? label : 'REFRESH'
},
searchTypes() {
return Object.assign(
{
historical: false,
spots: true,
perpetuals: true,
futures: false,
normalize: true,
mergeUsdt: true
},
this.$store.state.settings.searchTypes
)
return this.$store.state.settings.searchTypes
},
searchQuotes() {
const searchQuotesPreferences = this.$store.state.settings.searchQuotes
return this.quoteCurrencies.reduce((acc, quote) => {
acc[quote] = typeof searchQuotesPreferences[quote] === 'undefined' ? false : searchQuotesPreferences[quote]
return acc
}, {})
},
exchanges() {
return this.$store.getters['exchanges/getExchanges']
Expand Down Expand Up @@ -416,15 +435,18 @@ export default {
}
},
filteredProducts() {
const exchanges = this.searchExchanges
const hasHistorical = this.searchTypes.historical
const hasSpot = this.searchTypes.spots
const hasPerpetuals = this.searchTypes.perpetuals
const hasFutures = this.searchTypes.futures
const exchanges = this.searchExchanges
const isConnected = this.onlyConnected
const activeMarkets = this.activeMarkets
const hasTypeFilters = hasSpot || hasPerpetuals || hasFutures
const searchQuotes = this.searchQuotes
// eslint-disable-next-line vue/no-side-effects-in-computed-properties
this.page = 0
Expand All @@ -433,6 +455,10 @@ export default {
return false
}
if (searchQuotes[a.quote] === false) {
return false
}
if (isConnected && activeMarkets.indexOf(a.id) === -1) {
return false
}
Expand All @@ -441,11 +467,7 @@ export default {
return false
}
if (hasTypeFilters) {
if ((hasFutures && a.type === 'future') || (hasPerpetuals && a.type === 'perp') || (hasSpot && a.type === 'spot')) {
return true
}
if (hasTypeFilters && ((!hasFutures && a.type === 'future') || (!hasPerpetuals && a.type === 'perp') || (!hasSpot && a.type === 'spot'))) {
return false
}
Expand All @@ -462,7 +484,7 @@ export default {
let local = product.local
if (this.searchTypes.mergeUsdt) {
local = local.replace('USDT', 'USD').replace('USDC', 'USD')
local = formatStablecoin(local)
}
if (!groups[local]) {
Expand Down Expand Up @@ -499,7 +521,7 @@ export default {
let localPair = indexedProduct ? indexedProduct.local : market
if (this.searchTypes.mergeUsdt) {
localPair = localPair.replace('USDT', 'USD').replace('USDC', 'USD')
localPair = formatStablecoin(localPair)
}
if (!groups[localPair]) {
Expand Down
66 changes: 23 additions & 43 deletions src/components/chart/Chart.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ import { Component, Mixins } from 'vue-property-decorator'
import ChartController, { TimeRange } from './chart'
import { getHms, formatBytes, openBase64InNewTab, getTimeframeForHuman, floorTimestampToTimeframe } from '@/utils/helpers'
import { formatBytes, openBase64InNewTab, getTimeframeForHuman, floorTimestampToTimeframe } from '@/utils/helpers'
import { formatPrice, formatAmount } from '@/services/productsService'
import { defaultChartOptions, getChartCustomColorsOptions } from './options'
Expand Down Expand Up @@ -1124,16 +1124,6 @@ export default class extends Mixins(PaneMixin) {
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
let timeframe = this.$store.state[this.paneId].timeframe as any
if (!isNaN(+timeframe)) {
timeframe = getHms(timeframe * 1000).toUpperCase()
} else {
timeframe = parseInt(timeframe) + ' TICKS'
}
const text = timeframe
const zoom = this.$store.state.panes.panes[this.paneId].zoom || 1
const textPadding = 16 * zoom
Expand All @@ -1143,33 +1133,19 @@ export default class extends Mixins(PaneMixin) {
ctx.textAlign = 'left'
ctx.textBaseline = 'top'
const words = text.split(' ')
const lines = []
const date = new Date().toISOString()
const dateWidth = ctx.measureText(date).width
let currentLine = ' |'
for (let i = 0; i < words.length; i++) {
const word = words[i]
const width = (!lines.length ? dateWidth : 0) + ctx.measureText(currentLine + ' ' + word).width
if (width < chartCanvas.width - textPadding * 2) {
currentLine += ' ' + word
} else {
lines.push(currentLine)
currentLine = word
}
}
const dateString = new Date().toUTCString()
lines.push(currentLine)
lines.push(this._chartController.watermark + ' (' + this.markets.length + ' market' + (this.markets.length ? 's' : '') + ')')
lines.push(dateString + ' | ' + this.timeframeForHuman)
lines.push(
this._chartController.watermark +
(this.visibleMarkets > 1 && this.$store.state.settings.normalizeWatermarks ? ' (' + this.visibleMarkets + ' markets)' : '')
)
const lineHeight = Math.round(textPadding)
const headerHeight = Math.round(textPadding * 2 + lines.length * lineHeight)
canvas.height = chartCanvas.height
const backgroundColor = this.$store.state.settings.backgroundColor
const backgroundColor300 = getComputedStyle(document.documentElement).getPropertyValue('--theme-background-300')
const color100 = getComputedStyle(document.documentElement).getPropertyValue('--theme-color-100')
ctx.fillStyle = backgroundColor
Expand All @@ -1178,29 +1154,26 @@ export default class extends Mixins(PaneMixin) {
ctx.fillRect(0, 0, canvas.width, canvas.height)
ctx.drawImage(chartCanvas, 0, 0)
ctx.fillStyle = backgroundColor300
ctx.fillStyle = color100
ctx.font = `${textFontsize}px Share Tech Mono`
ctx.textAlign = 'left'
ctx.textBaseline = 'top'
for (let i = 0; i < lines.length; i++) {
let offset = 0
let offsetY = 0
if (i === 0) {
ctx.fillStyle = color100
ctx.fillText(date, textPadding, textPadding)
offset = dateWidth
ctx.fillStyle = color100
}
for (let i = 0; i < lines.length; i++) {
ctx.fillText(lines[i], textPadding, textPadding + offsetY)
ctx.fillText(lines[i], offset + textPadding, textPadding + lineHeight * i)
offsetY += lineHeight * (i + 1)
}
const luminance = getColorLuminance(splitRgba(backgroundColor))
const textColor = luminance < 170 ? '#ffffff' : '#000000'
if (this.showIndicatorsOverlay) {
Object.values(this.indicators).forEach((indicator, index) => {
offsetY += textPadding * 2
Object.values(this.indicators).forEach(indicator => {
const options = indicator.options as any
if (options.visible === false) {
Expand All @@ -1221,8 +1194,15 @@ export default class extends Mixins(PaneMixin) {
// not rgb(a)
}
const text = indicator.displayName || indicator.name
ctx.fillStyle = backgroundColor
ctx.fillText(text, textPadding + 1, offsetY + 1)
ctx.fillText(text, textPadding - 1, offsetY - 1)
ctx.fillStyle = color
ctx.fillText(indicator.displayName || indicator.name, textPadding, headerHeight + textPadding + index * lineHeight * 1.2)
ctx.fillText(text, textPadding, offsetY)
offsetY += lineHeight * 1.2
})
}
Expand Down
36 changes: 27 additions & 9 deletions src/components/chart/ChartSettings.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -164,15 +164,15 @@

<template #off>
<label
v-if="notificationsPermissions === 'denied'"
v-if="notificationsPermissionState === 'denied'"
class="text-danger help-text mt0 mb0"
v-tippy
:title="`${helps['notifications-disabled']} ${helps['notifications-grant']}`"
>
<i class="icon-warning mr4"></i> Notifications are blocked.
</label>
<p
v-else-if="notificationsPermissions !== 'granted'"
v-else-if="notificationsPermissionState !== 'granted'"
class="text-info help-text mt0 mb0"
v-tippy
:title="`${helps['notifications-disabled']} ${helps['notifications-grant']}`"
Expand All @@ -190,6 +190,8 @@ import { Component, Vue } from 'vue-property-decorator'
import Slider from '../framework/picker/Slider.vue'
import ToggableGroup from '../framework/ToggableGroup.vue'
let notificationsPermission
@Component({
components: { Slider, ToggableGroup },
name: 'ChartSettings',
Expand All @@ -202,11 +204,11 @@ import ToggableGroup from '../framework/ToggableGroup.vue'
})
export default class extends Vue {
paneId: string
notificationsPermissions: string = null
helps = {
'notifications-disabled': 'Push notification are disabled.',
'notifications-grant': 'Enable notifications for this site in your browser.'
}
notificationsPermissionState = 'granted'
get showLegend() {
return this.$store.state[this.paneId].showLegend
Expand Down Expand Up @@ -273,28 +275,44 @@ export default class extends Vue {
}
created() {
this.checkPermissions()
this.checkNotificationsPermission()
}
checkPermissions() {
checkNotificationsPermission() {
navigator.permissions
.query({ name: 'notifications' })
.then(result => {
this.notificationsPermissions = result.state
if (!notificationsPermission) {
result.onchange = (event: any) => {
this.setNotificationsPermission(event.target.state)
}
notificationsPermission = result
}
this.setNotificationsPermission(result.state)
})
.catch(err => {
console.error(err.message)
})
}
setNotificationsPermission(state) {
this.notificationsPermissionState = state
if (this.notificationsPermissionState !== 'granted' && this.alerts) {
this.$store.commit('settings/TOGGLE_ALERTS', false)
}
}
async toggleAlerts(event) {
let checked = event.target.checked
if (this.notificationsPermissions !== 'granted') {
this.notificationsPermissions = await Notification.requestPermission()
if (checked) {
this.notificationsPermissionState = await Notification.requestPermission()
}
if (this.notificationsPermissions === 'denied' && checked) {
if (this.notificationsPermissionState === 'denied' && checked) {
checked = false
this.$store.dispatch('app/showNotice', {
Expand Down
Loading

0 comments on commit b64a0c0

Please sign in to comment.