Skip to content

Commit

Permalink
add website pane
Browse files Browse the repository at this point in the history
  • Loading branch information
Tucsky committed Aug 23, 2021
1 parent 2bd1c6a commit 9964854
Show file tree
Hide file tree
Showing 16 changed files with 267 additions and 58 deletions.
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,7 @@ Let's say you have a server instance running on port 3000, start the client with
If you plan to use real money with this, USE AT YOUR OWN RISK.

## Support this project !
ETH [0xe3c893cdA4bB41fCF402726154FB4478Be2732CE](https://etherscan.io/address/0xe3c893cdA4bB41fCF402726154FB4478Be2732CE)<br>
BTC [3PK1bBK8sG3zAjPBPD7g3PL14Ndux3zWEz](bitcoin:3PK1bBK8sG3zAjPBPD7g3PL14Ndux3zWEz)<br>
XMR 48NJj3RJDo33zMLaudQDdM8G6MfPrQbpeZU2YnRN2Ep6hbKyYRrS2ZSdiAKpkUXBcjD2pKiPqXtQmSZjZM7fC6YT6CMmoX6<br>
COINBASE
Expand Down
4 changes: 4 additions & 0 deletions src/components/Menu.vue
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,10 @@ export default class extends Vue {
prices: {
title: 'Markets',
description: 'Tickers sorted by price'
},
website: {
title: 'Website',
description: 'Embed website'
}
}
Expand Down
6 changes: 0 additions & 6 deletions src/components/framework/Dialog.vue
Original file line number Diff line number Diff line change
Expand Up @@ -99,12 +99,6 @@ export default class extends Vue {
}
}
mounted() {
setTimeout(() => {
this.$el.querySelector('button').focus()
})
}
beforeDestroy() {
if (this._handleRelease) {
this._handleRelease()
Expand Down
4 changes: 4 additions & 0 deletions src/components/panes/PaneHeader.vue
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ import ChartPaneDialog from '../chart/ChartPaneDialog.vue'
import StatsPaneDialog from '../stats/StatsPaneDialog.vue'
import PricesPaneDialog from '../prices/PricesPaneDialog.vue'
import { getSiblings, parseMarket } from '@/utils/helpers'
import WebsitePaneDialog from '../website/WebsitePaneDialog.vue'
@Component({
name: 'PaneHeader',
Expand Down Expand Up @@ -135,6 +136,9 @@ export default class extends Vue {
case 'prices':
dialogService.open(PricesPaneDialog, { paneId: this.paneId })
break
case 'website':
dialogService.open(WebsitePaneDialog, { paneId: this.paneId })
break
}
}
Expand Down
3 changes: 2 additions & 1 deletion src/components/panes/Panes.vue
Original file line number Diff line number Diff line change
Expand Up @@ -44,10 +44,11 @@ import Trades from '../trades/Trades.vue'
import Stats from '../stats/Stats.vue'
import Counters from '../counters/Counters.vue'
import Prices from '../prices/Prices.vue'
import Website from '../website/Website.vue'
import { BREAKPOINTS_COLS, BREAKPOINTS_WIDTHS } from '@/utils/constants'
@Component({
components: { GridLayout: VueGridLayout.GridLayout, GridItem: VueGridLayout.GridItem, Chart, Trades, Stats, Counters, Prices }
components: { GridLayout: VueGridLayout.GridLayout, GridItem: VueGridLayout.GridItem, Chart, Trades, Stats, Counters, Prices, Website }
})
export default class extends Vue {
draggable = true
Expand Down
2 changes: 1 addition & 1 deletion src/components/prices/PricesPaneSettings.vue
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ import Thresholds from '../settings/Thresholds.vue'
@Component({
components: { Thresholds, Slider },
name: 'TradesSettings',
name: 'PricesSettings',
props: {
paneId: {
type: String,
Expand Down
43 changes: 1 addition & 42 deletions src/components/settings/SettingsDialog.vue
Original file line number Diff line number Diff line change
Expand Up @@ -376,47 +376,6 @@ export default {
}
},
validateWorkspaceImport(raw) {
let workspace = null
try {
workspace = JSON.parse(raw)
} catch (error) {
this.$store.dispatch('app/showNotice', {
type: 'error',
title: `The workspace you provided couldn't be parsed<br>${error.message}`
})
return
}
if (!workspace.id) {
this.$store.dispatch('app/showNotice', {
type: 'error',
title: `The workspace you provided has no ID`
})
return
}
if (!workspace.name) {
this.$store.dispatch('app/showNotice', {
type: 'error',
title: `The workspace you provided has no name`
})
return
}
if (!workspace.states || Object.keys(workspace.states).length === 0) {
this.$store.dispatch('app/showNotice', {
type: 'error',
title: `The workspace you provided is empty`
})
return
}
return workspace
},
async loadWorkspace(id) {
await this.close()
Expand Down Expand Up @@ -491,7 +450,7 @@ export default {
async uploadWorkspace() {
const content = await browseFile()
const workspace = this.validateWorkspaceImport(content)
const workspace = workspacesService.validateWorkspace(content)
if (!workspace) {
return
Expand Down
15 changes: 12 additions & 3 deletions src/components/trades/Trades.vue
Original file line number Diff line number Diff line change
Expand Up @@ -261,19 +261,25 @@ export default class extends Mixins(PaneMixin) {
const multiplier = this._multipliers[identifier]
if (trade.liquidation) {
// trade is liquidation
if (this._tradeType === 'both' && amount >= this._liquidationThreshold.amount * multiplier) {
// pane showing both trades and liq -> use liquidation threshold and show accordingly
this.appendRow(trade, amount, multiplier)
continue
} else if (this._tradeType === 'trades') {
// pane is not showing liquidation -> abort
continue
}
} else if (this._tradeType === 'liquidations') {
// trade is not a liquidation but pane only show liquidation -> abort
continue
}
if (amount >= this._minimumThresholdAmount * multiplier) {
// show trade (liquidation or not) if amount > minimum threshold
this.appendRow(trade, amount, multiplier)
} else if (amount > this._audioThreshold) {
// show trade (liquidation or not) if amount > minimum threshold
this._thresholdsAudios[0][trade.side](audioService, amount / (this._significantThresholdAmount * multiplier), trade.side, 0)
}
}
Expand Down Expand Up @@ -968,10 +974,13 @@ export default class extends Mixins(PaneMixin) {
.trade__slippage {
flex-basis: 2.5rem;
max-width: 2.5rem;
font-size: 75%;
font-family: monospace;
font-size: 12px;
overflow: visible;
text-align: left;
position: absolute;
left: 50%;
line-height: 1rem;
font-family: $font-monospace;
font-weight: 400;
}
.trade__amount {
Expand Down
86 changes: 86 additions & 0 deletions src/components/website/Website.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
<template>
<div class="pane-website">
<pane-header :paneId="paneId" />
<div class="iframe__lock" v-if="locked">
<div class="ml8 mr8">
<p>Load <span class="condensed" v-text="trimmedUrl" title="url" v-tippy></span> ?</p>
<div class="text-center">
<button class="btn" @click="$store.commit(paneId + '/UNLOCK_URL')">Yes, authorize</button>
</div>
</div>
</div>
<div class="iframe__wrapper" v-else>
<iframe :src="url" frameborder="0" :class="customId" width="100%" height="100%"></iframe>
</div>
</div>
</template>

<script lang="ts">
import { Component, Mixins } from 'vue-property-decorator'
import PaneMixin from '@/mixins/paneMixin'
import PaneHeader from '../panes/PaneHeader.vue'
@Component({
components: { PaneHeader },
name: 'Website'
})
export default class extends Mixins(PaneMixin) {
customId = ''
get locked() {
return this.$store.state[this.paneId].locked
}
get url() {
const url = this.$store.state[this.paneId].url
this.customId = this.getCustomId(url)
return url
}
get trimmedUrl() {
if (this.url.length <= 33) {
return this.url
} else {
return this.url.slice(0, 15) + '[...]' + this.url.substr(-15)
}
}
getCustomId(url) {
if (/okotoki.com/.test(url)) {
return 'okotoki'
}
return null
}
}
</script>

<style lang="scss" scoped>
.iframe__lock {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba($red, 0.5);
}
.iframe__wrapper {
width: 100%;
height: 100%;
overflow: hidden;
iframe {
border: 0;
width: 100%;
height: 100%;
&.okotoki {
transform: translate(-30px, -66px);
height: calc(100% + 146px);
width: calc(100% + 280px);
}
}
}
</style>
24 changes: 24 additions & 0 deletions src/components/website/WebsitePaneDialog.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<template>
<Dialog @clickOutside="close" class="pane-dialog" @mousedown="clickOutsideClose = false" @mouseup="clickOutsideClose = true">
<template v-slot:header>
<div class="title -editable" @dblclick="renamePane" v-text="name"></div>
<div class="column -center"></div>
</template>
<website-pane-settings :paneId="paneId" />
</Dialog>
</template>

<script>
import DialogMixin from '../../mixins/dialogMixin'
import PaneDialogMixin from '../../mixins/paneDialogMixin'
import WebsitePaneSettings from './WebsitePaneSettings.vue'
export default {
components: { WebsitePaneSettings },
mixins: [DialogMixin, PaneDialogMixin],
data: () => ({
renaming: false
}),
methods: {}
}
</script>
55 changes: 55 additions & 0 deletions src/components/website/WebsitePaneSettings.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
<template>
<div>
<div class="form-group mb8">
<label>
Url <span v-if="originalUrl">(<a :href="originalUrl" v-text="originalUrlTrimmed" target="_blank"></a>)</span>
</label>
<input
ref="input"
type="text"
class="form-control w-100"
placeholder="eg: https://cryptopanic.com/widgets/news/?bg_color=FFFFFF&amp;font_family=sans&amp;header_bg_color=30343B&amp;header_text_color=FFFFFF&amp;link_color=0091C2&amp;news_feed=trending&amp;text_color=333333&amp;title=Latest%20News"
:value="url"
v-tippy
title="Original URL"
@change="$store.commit(paneId + '/SET_URL', $event.target.value)"
/>
</div>
</div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import Slider from '../framework/picker/Slider.vue'
import Thresholds from '../settings/Thresholds.vue'
@Component({
components: { Thresholds, Slider },
name: 'WebsiteSettings',
props: {
paneId: {
type: String,
required: true
}
}
})
export default class extends Vue {
paneId: string
originalUrl: string
created() {
this.originalUrl = this.$store.state[this.paneId].url
}
get originalUrlTrimmed() {
if (this.originalUrl.length <= 33) {
return this.originalUrl
} else {
return this.originalUrl.slice(0, 15) + '[...]' + this.originalUrl.substr(-15)
}
}
get url() {
return this.$store.state[this.paneId].url
}
}
</script>
8 changes: 8 additions & 0 deletions src/services/workspacesService.ts
Original file line number Diff line number Diff line change
Expand Up @@ -546,6 +546,14 @@ class WorkspacesService {
return
}

for (const paneId in workspace.states) {
const pane = workspace.states[paneId]

if (pane.type === 'website') {
pane.locked = true
}
}

return workspace
}

Expand Down
6 changes: 3 additions & 3 deletions src/store/panes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import defaultLayouts from './defaultLayouts.json'
import { BREAKPOINTS_COLS, BREAKPOINTS_WIDTHS } from '@/utils/constants'
import dialogService from '@/services/dialogService'

export type PaneType = 'trades' | 'chart' | 'stats' | 'counters' | 'prices'
export type PaneType = 'trades' | 'chart' | 'stats' | 'counters' | 'prices' | 'website'
export type MarketsListeners = { [market: string]: number }

export type ResponsiveLayouts = { [breakpoint: string]: GridItem[] }
Expand Down Expand Up @@ -346,7 +346,7 @@ const actions = {
},
changeZoom({ state, commit, dispatch }, { id, zoom }: { id: string; zoom: number }) {
if (zoom) {
zoom = (state.panes[id].zoom || 1) + zoom
zoom = Math.max(0.1, (state.panes[id].zoom || 1) + zoom)
} else {
zoom = 1
}
Expand All @@ -356,7 +356,7 @@ const actions = {
dispatch('refreshZoom', id)
},
refreshZoom({ state }, id: string) {
const zoom = state.panes[id].zoom
const zoom = Math.max(0.1, state.panes[id].zoom)
const el = document.getElementById(id) as HTMLElement

if (el) {
Expand Down
4 changes: 3 additions & 1 deletion src/store/panesSettings/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,13 @@ import stats from './stats'
import trades from './trades'
import prices from './prices'
import counters from './counters'
import website from './website'

export default {
chart,
stats,
trades,
prices,
counters
counters,
website
}
Loading

0 comments on commit 9964854

Please sign in to comment.