Skip to content

Commit

Permalink
bugfixing
Browse files Browse the repository at this point in the history
  • Loading branch information
Tucsky committed May 22, 2021
1 parent 1e23a06 commit f5223f0
Show file tree
Hide file tree
Showing 49 changed files with 711 additions and 335 deletions.
4 changes: 2 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@



Live cryptocurrency trades aggregator.<br>
Cryptocurrency market trades aggregator.<br>

Currently supporting BitMEX, Bitfinex, Binance & Binance Futures, Coinbase, Bitstamp, Deribit, Huobi, Okex, Hitbtc, Poloniex, Bybit and FTX ([see src/exchanges/](src/exchanges) for detail)

Expand All @@ -14,7 +14,7 @@ Currently supporting BitMEX, Bitfinex, Binance & Binance Futures, Coinbase, Bits


## What it do
This tool shows **markets orders** LIVE on the crypto markets of your choice.
This tool shows **markets orders** LIVE on the crypto market(s) of your choice.

- Show live trades from exchanges on a specific pair
- Filter noise by aggregating trades with the same timestamp
Expand Down
39 changes: 38 additions & 1 deletion src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@
<Settings v-if="showSettings" />
<div class="app__wrapper">
<Header />
<SearchProducts />

<div class="app__layout">
<Panes />
Expand Down Expand Up @@ -74,6 +73,10 @@ export default class extends Vue {
return this.$store.state.app.showSettings
}
get showSearch() {
return this.$store.state.app.showSearch
}
get isBooted() {
return this.$store.state.app && this.$store.state.app.isBooted
}
Expand Down Expand Up @@ -123,6 +126,8 @@ export default class extends Vue {
this.$store.dispatch('app/showNotice', notice)
})
aggregatorService.on('prices', this.updatePrice)
document.addEventListener('keydown', this.onDocumentKeyPress)
}
beforeDestroy() {
Expand Down Expand Up @@ -180,5 +185,37 @@ export default class extends Vue {
this._faviconElement.href = downFavicon
}
}
onDocumentKeyPress(event: KeyboardEvent) {
if (!this.isBooted) {
return
}
const activeElement = document.activeElement as HTMLElement
if (event.keyCode === 27) {
this.$store.dispatch('app/hideSearch')
return
}
if (
this.showSearch ||
event.metaKey ||
event.ctrlKey ||
event.altKey ||
activeElement.tagName === 'INPUT' ||
activeElement.tagName === 'TEXTAREA' ||
activeElement.tagName === 'SELECT' ||
activeElement.isContentEditable
) {
return
}
event = event || (window.event as any)
if (/^[a-z0-9]$/i.test(event.key)) {
this.$store.dispatch('app/showSearch', { query: null })
}
}
}
</script>
Binary file removed src/assets/fonts/icon.eot
Binary file not shown.
2 changes: 2 additions & 0 deletions src/assets/fonts/icon.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified src/assets/fonts/icon.ttf
Binary file not shown.
Binary file modified src/assets/fonts/icon.woff
Binary file not shown.
2 changes: 1 addition & 1 deletion src/assets/sass/autocomplete.scss
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@

&__dropdown {
border-radius: $border-radius-base;
background-color: $lighter;
background-color: $darker;
margin-left: -0.6rem;
margin-right: -0.6rem;

Expand Down
4 changes: 4 additions & 0 deletions src/assets/sass/dialog.scss
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,10 @@
margin-left: 0.4rem;
}
}

section {
margin: 0 -1rem;
}
}

&.-small .dialog-content {
Expand Down
10 changes: 10 additions & 0 deletions src/assets/sass/icons.scss
Original file line number Diff line number Diff line change
Expand Up @@ -401,3 +401,13 @@ $iconpath: '../fonts';
content: $icon-more;
}
}
.icon-bear {
&:before {
content: $icon-bear;
}
}
.icon-bull {
&:before {
content: $icon-bull;
}
}
63 changes: 61 additions & 2 deletions src/assets/sass/layout.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
body {
background-color: $dark;
overflow-x: hidden;
}

#progress {
Expand Down Expand Up @@ -221,11 +222,11 @@ body {
}

.flip-list-move {
transition: transform .4s linear;
transition: transform 0.4s linear;
}

#app.-no-animations *.flip-list-move {
transition: transform .4s linear !important;
transition: transform 0.4s linear !important;
}

.divider {
Expand Down Expand Up @@ -264,3 +265,61 @@ blockquote {
code {
font-family: $font-monospace;
}

.section {
display: flex;
flex-direction: column-reverse;
padding: 1rem;
position: relative;

&:hover {
background-color: rgba(black, 0.05);
}

.section__controls {
position: absolute;
right: 1rem;
margin-top: -2rem;
z-index: 1;
line-height: 1;
}

.section__title {
display: flex;
align-items: center;
text-transform: uppercase;
letter-spacing: 0.5px;
opacity: 0.8;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
margin: -1rem -1rem 1rem;
padding: 1rem 1rem 0;

&:hover {
opacity: 1;
cursor: pointer;
}

.icon-up {
transition: transform 0.2s $ease-elastic;
margin-left: 0.5em;
}

&:first-child {
margin: -1rem;
padding-bottom: 1rem;

.icon-up {
transform: rotateZ(180deg);
}
}
}
}

#app.-light .section:hover {
background-color: rgba(black, 0.025);
}
2 changes: 1 addition & 1 deletion src/assets/sass/pane.scss
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@

.pane-header {
display: flex;
z-index: 5;
z-index: 15;
}
}
}
Expand Down
3 changes: 3 additions & 0 deletions src/assets/sass/variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ $pink: #e91e63;
$purple: #3e2161;
$base: desaturate(lighten($dark, 15%), 10%);
$lighter: lighten($base, 10%);
$darker: darken($base, 10%);

$ease-out-expo: cubic-bezier(0.005, 1, 0.22, 1);
$ease-in-expo: cubic-bezier(0.7, 0, 0.84, 0);
Expand Down Expand Up @@ -94,6 +95,8 @@ $icon-copy-paste: '\e947';
$icon-dashboard: '\e948';
$icon-more: '\e949';
$icon-flash: '\e910';
$icon-bear: "\e934";
$icon-bull: "\e94a";

$exchanges: (
'BITMEX': $icon-BITMEX,
Expand Down
169 changes: 169 additions & 0 deletions src/components/SearchDialog.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,169 @@
<template>
<Dialog :open="open" @clickOutside="close" medium>
<template v-slot:header>
<div class="title" v-if="paneId">{{ paneName }}'s MARKETS</div>
<div class="title" v-else>ALL PANES MARKETS</div>
<div class="column -center"></div>
</template>
<div class="d-flex">
<div class="form-group search">
<label>Add markets ({{ flattenedProducts.length }})</label>
<div class="mb4">
<input ref="input" type="text" class="form-control" placeholder="search (eg: BITMEX:XBTUSD)" v-model="query" />
</div>
<table v-if="filteredMarkets.length" class="table">
<tbody>
<tr
v-for="market of filteredMarkets"
:key="market"
@click="selectMarket(market)"
:title="market"
v-tippy="{ placement: 'right' }"
class="-action"
>
<td class="pl0 table-input">
{{ market }}
</td>
</tr>
</tbody>
</table>
</div>
<div class="form-group selection">
<label v-if="paneId">Pane {{ paneId }}</label>
<label v-else>Workspace (all panes)</label>
<button v-for="market of selection" :key="market" class="btn -small mr4 mb4 -green" title="Click to remove" @click="deselectMarket(market)">
{{ market }}

<i class="icon-check ml8" v-if="activeMarkets.indexOf(market) !== -1" title="Connected" v-tippy></i>
</button>
</div>
</div>

<footer>
<a href="javascript:void(0);" class="btn -text mr8" @click="close(false)">Close</a>
<button class="btn -large" @click="apply">OK</button>
</footer>
</Dialog>
</template>

<script>
import Dialog from '@/components/framework/Dialog.vue'
import DialogMixin from '@/mixins/dialogMixin'
import { getBucketId } from '@/utils/helpers'
import dialogService from '@/services/dialogService'
export default {
mixins: [DialogMixin],
components: {
Dialog
},
props: {
query: {
default: ''
},
paneId: {
required: false
}
},
data: () => ({
markets: [],
selection: []
}),
computed: {
paneName() {
if (this.paneId) {
return this.$store.state.panes.panes[this.paneId].name
} else {
return null
}
},
activeMarkets() {
return this.$store.state.app.activeMarkets.map(m => m.exchange + ':' + m.pair)
},
indexedProducts() {
return this.$store.state.app.indexedProducts
},
flattenedProducts() {
return Array.prototype.concat(...Object.values(this.indexedProducts))
},
queryFilter: function() {
return new RegExp(this.query.replace(/\W/, '|'), 'i')
},
filteredMarkets: function() {
return this.flattenedProducts.filter(a => this.selection.indexOf(a) === -1 && this.queryFilter.test(a)).slice(0, 20)
}
},
watch: {
open(value) {
if (!value) {
this.$store.dispatch('app/hideSearch')
}
},
showSearch(value) {
if (!value) {
this.close(false)
}
}
},
created() {
if (this.paneId) {
this.selection = this.$store.state.panes.panes[this.paneId].markets.slice()
} else {
this.selection = this.activeMarkets.slice()
}
},
mounted() {
this.$nextTick(() => {
this.$refs.input.focus()
})
},
methods: {
containMultipleMarketsConfigurations() {
return (
Object.keys(this.$store.state.panes.panes)
.map(id => getBucketId(this.$store.state.panes.panes[id].markets))
.filter((v, i, a) => a.indexOf(v) === i).length > 1
)
},
selectMarket(market) {
this.selection.push(market)
},
deselectMarket(market) {
const index = this.selection.indexOf(market)
if (index !== -1) {
this.selection.splice(index, 1)
}
},
async apply() {
if (!this.paneId) {
if (this.containMultipleMarketsConfigurations() && !(await dialogService.confirm('Are you sure ?'))) {
return
}
this.$store.dispatch('panes/setMarketsForAll', this.selection)
} else {
this.$store.dispatch('panes/setMarketsForPane', {
id: this.paneId,
markets: this.selection
})
}
this.close()
}
}
}
</script>
<style lang="scss" scoped>
.selection {
flex-basis: 0;
margin-left: 1rem;
min-width: 200px;
text-align: right;
}
.search {
flex-grow: 1;
}
</style>
Loading

0 comments on commit f5223f0

Please sign in to comment.