Skip to content

Commit 41af685

Browse files
yangwaoyangwao
authored
Merge pull request #622 from roiLeo/fix/gallery-item/history
fix(gallery-item): history & price chart
2 parents 82a3cc3 + 02fe086 commit 41af685

File tree

4 files changed

+271
-310
lines changed

4 files changed

+271
-310
lines changed

‎src/components/rmrk/Gallery/GalleryItem.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,8 @@
6565
</p>
6666
<b-skeleton :count="3" size="is-large" :active="isLoading"></b-skeleton>
6767
</div>
68+
69+
<History v-if="!isLoading" :events="nft.events"/>
6870
</div>
6971

7072
<div class="column is-3 is-offset-3" v-if="detailVisible">
@@ -120,9 +122,7 @@
120122
</template>
121123
</div>
122124
</div>
123-
<div>
124-
<History v-if="!isLoading" :events="nft.events"/>
125-
</div>
125+
126126
<hr class="comment-divider" />
127127
<BaseCommentSection :nft="nft" :meta="meta" />
128128
</div>

‎src/components/rmrk/Gallery/History.vue

Lines changed: 144 additions & 151 deletions
Original file line numberDiff line numberDiff line change
@@ -1,184 +1,177 @@
11
<template>
2-
<div class="columns">
2+
<div>
33
<p class="label">
4-
{{ $t('History')}}
4+
{{ $t('History') }}
55
</p>
6-
<div class="column is-7">
7-
<b-table :data="data"
8-
hoverable
9-
>
10-
<b-table-column
6+
<b-table :data="data" class="mb-4" hoverable>
7+
<b-table-column
118
cell-class="short-identity__table"
12-
field= 'Type'
13-
label= 'Type'
9+
field="Type"
10+
label="Type"
1411
v-slot="props"
15-
>
16-
{{props.row.Type}}
17-
</b-table-column>
12+
>
13+
{{ props.row.Type }}
14+
</b-table-column>
1815
<b-table-column
1916
cell-class="short-identity__table"
20-
field= 'From'
21-
label= 'From'
17+
field="From"
18+
label="From"
2219
v-slot="props"
20+
>
21+
<router-link
22+
:to="{
23+
name: 'profile',
24+
params: { id: props.row.From },
25+
}"
2326
>
24-
<router-link :to="{ name: 'profile', params: { id: props.row.From } }">
25-
<Identity :address="props.row.From" inline noOverflow />
26-
</router-link>
27-
</b-table-column>
27+
<Identity :address="props.row.From" inline noOverflow />
28+
</router-link>
29+
</b-table-column>
2830
<b-table-column
2931
cell-class="short-identity__table"
30-
field= 'To'
31-
label= 'To'
32+
field="To"
33+
label="To"
3234
v-slot="props"
35+
>
36+
<router-link
37+
:to="{ name: 'profile', params: { id: props.row.To } }"
3338
>
34-
<router-link :to="{ name: 'profile', params: { id: props.row.To } }">
35-
<Identity :address="props.row.To" inline noOverflow />
36-
</router-link>
39+
<Identity :address="props.row.To" inline noOverflow />
40+
</router-link>
3741
</b-table-column>
3842
<b-table-column
3943
cell-class="short-identity__table"
40-
field= 'Amount'
41-
label= 'Amount'
44+
field="Amount"
45+
label="Amount"
4246
v-slot="props"
43-
>
44-
{{props.row.Amount}}
47+
>
48+
{{ props.row.Amount }}
4549
</b-table-column>
4650
<b-table-column
4751
cell-class="short-identity__table"
48-
field= 'Date'
49-
label= 'Date'
52+
field="Date"
53+
label="Date"
5054
v-slot="props"
51-
>
52-
{{props.row.Date}}
55+
>
56+
{{ props.row.Date }}
5357
</b-table-column>
58+
</b-table>
5459

55-
56-
</b-table>
57-
</div>
58-
<div class="column is-5">
59-
<PriceChart :priceData="priceData"/>
60-
</div>
61-
</div>
62-
</template>
60+
<PriceChart :priceData="priceData" />
61+
</div>
62+
</template>
6363

6464
<script lang="ts">
65-
66-
import { Component, Vue, Prop, Watch} from 'vue-property-decorator';
65+
import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
6766
6867
const components = {
69-
Identity: () => import('@/components/shared/format/Identity.vue'),
70-
PriceChart: () => import('@/components/rmrk/Gallery/PriceChart.vue'),
71-
};
68+
Identity: () => import('@/components/shared/format/Identity.vue'),
69+
PriceChart: () => import('@/components/rmrk/Gallery/PriceChart.vue'),
70+
}
7271
7372
@Component({ components })
74-
75-
export default class History extends Vue{
76-
77-
@Prop() public events!: any;
78-
protected data: any = [];
79-
protected priceData: any = [];
80-
// protected eventData: Date[] = [];
81-
82-
public async created(){
83-
this.createTable();
84-
}
85-
protected createTable(){
86-
87-
let prevOwner : string = '';
88-
let curPrice : string = '0.0000000';
89-
for(const newEvent of this.events){
90-
const event : any = {};
91-
92-
// Type
93-
if(newEvent['interaction'] === 'MINTNFT'){
94-
event['Type'] = 'CREATE';
95-
event['From'] = newEvent['caller'];
96-
event['To'] = '';
97-
}
98-
else if(newEvent['interaction'] === 'LIST'){
99-
event['Type'] = 'SET-PRICE';
100-
event['From'] = newEvent['caller'];
101-
event['To'] = '';
102-
prevOwner = event['From'];
103-
curPrice = newEvent['meta'];
104-
}
105-
else if(newEvent['interaction'] === 'SEND'){
106-
event['Type'] = 'GIFT';
107-
event['From'] = newEvent['caller'];
108-
event['To'] = newEvent['meta'];
109-
}
110-
else if(newEvent['interaction'] === 'CONSUME'){
111-
event['Type'] = 'BURNT';
112-
event['From'] = newEvent['caller'];
113-
event['To'] = '';
114-
}
115-
else
116-
event['Type'] = newEvent['interaction'];
117-
118-
// From
119-
if(!('From' in event))
120-
event['From'] = prevOwner;
121-
// To
122-
if(!('To' in event)){
123-
event['To'] = newEvent['caller']
124-
prevOwner = event['To'];
125-
}
126-
127-
// Amount
128-
event['Amount'] = Vue.filter('formatBalance')(curPrice, 12, 'KSM');
129-
// Date
130-
const date = new Date(newEvent['timestamp'])
131-
event['Date'] = this.parseDate(date);
132-
if(event['Type'] === 'SET-PRICE' || event['Type'] === 'CREATE'){
133-
this.priceData.push([date, this.formatPrice(event['Amount'])]);
134-
// this.priceData.push([this.formatDate(date), this.formatPrice(event['Amount'])]);
135-
// this.eventData.push(date);
136-
}
137-
138-
this.data.push(event);
139-
}
140-
this.data = this.data.reverse();
141-
this.priceData.push([new Date(), this.formatPrice(this.data[0]['Amount'])]);
142-
// this.priceData.push([this.formatDate(new Date()), this.formatPrice(this.data[0]['Amount'])]);
143-
// this.eventData.push(new Date());
144-
145-
}
146-
protected parseDate(date: Date){
147-
const utcDate: string = date.toUTCString();
148-
return utcDate.substring(4);
149-
}
150-
151-
protected formatDate(date: Date){
152-
const yyyy = date.getUTCFullYear();
153-
const mm = this.padDigits(date.getUTCMonth()+1);
154-
const dd = this.padDigits(date.getUTCDate());
155-
const hrs = this.padDigits(date.getUTCHours());
156-
const mins = this.padDigits(date.getUTCMinutes());
157-
const secs = this.padDigits(date.getUTCSeconds());
158-
const YYYY_MM_DD_HRS_MINS_SECS = yyyy+'/'+mm+'/'+dd+'\n'+hrs+':'+mins+':'+secs;
159-
return YYYY_MM_DD_HRS_MINS_SECS;
160-
}
161-
162-
protected padDigits(time : number){
163-
return time.toString().padStart(2, '0');
164-
}
165-
166-
protected formatPrice(price: string){
167-
return parseFloat(price.substring(0,6))
168-
}
169-
@Watch('events')
170-
async watchEvent(newEvent: [], oldEvent: []){
171-
// console.log(this.events)
172-
this.createTable();
173-
}
174-
73+
export default class History extends Vue {
74+
@Prop() public events!: any;
75+
protected data: any = [];
76+
protected priceData: any = [];
77+
// protected eventData: Date[] = [];
78+
79+
public async created() {
80+
this.createTable();
81+
}
82+
83+
protected createTable() {
84+
let prevOwner: string = '';
85+
let curPrice: string = '0.0000000';
86+
for (const newEvent of this.events) {
87+
const event: any = {};
88+
89+
// Type
90+
if (newEvent['interaction'] === 'MINTNFT') {
91+
event['Type'] = 'CREATE';
92+
event['From'] = newEvent['caller'];
93+
event['To'] = '';
94+
} else if (newEvent['interaction'] === 'LIST') {
95+
event['Type'] = 'SET-PRICE';
96+
event['From'] = newEvent['caller'];
97+
event['To'] = '';
98+
prevOwner = event['From'];
99+
curPrice = newEvent['meta'];
100+
} else if (newEvent['interaction'] === 'SEND') {
101+
event['Type'] = 'GIFT';
102+
event['From'] = newEvent['caller'];
103+
event['To'] = newEvent['meta'];
104+
} else if (newEvent['interaction'] === 'CONSUME') {
105+
event['Type'] = 'BURNT';
106+
event['From'] = newEvent['caller'];
107+
event['To'] = '';
108+
} else event['Type'] = newEvent['interaction'];
109+
110+
// From
111+
if (!('From' in event)) event['From'] = prevOwner;
112+
113+
// To
114+
if (!('To' in event)) {
115+
event['To'] = newEvent['caller'];
116+
prevOwner = event['To'];
117+
}
118+
119+
// Amount
120+
event['Amount'] = Vue.filter('formatBalance')(curPrice, 12, 'KSM');
121+
122+
// Date
123+
const date = new Date(newEvent['timestamp']);
124+
event['Date'] = this.parseDate(date);
125+
if (event['Type'] === 'SET-PRICE' || event['Type'] === 'CREATE') {
126+
this.priceData.push([date, this.formatPrice(event['Amount'])]);
127+
}
128+
129+
this.data.push(event);
130+
}
131+
132+
this.data = this.data.reverse();
133+
this.priceData.push([
134+
new Date(),
135+
this.formatPrice(this.data[0]['Amount']),
136+
]);
137+
}
138+
139+
protected parseDate(date: Date) {
140+
const utcDate: string = date.toUTCString();
141+
return utcDate.substring(4);
142+
}
143+
144+
protected formatDate(date: Date) {
145+
const yyyy = date.getUTCFullYear();
146+
const mm = this.padDigits(date.getUTCMonth() + 1);
147+
const dd = this.padDigits(date.getUTCDate());
148+
const hrs = this.padDigits(date.getUTCHours());
149+
const mins = this.padDigits(date.getUTCMinutes());
150+
const secs = this.padDigits(date.getUTCSeconds());
151+
const YYYY_MM_DD_HRS_MINS_SECS =
152+
yyyy + '/' + mm + '/' + dd + '\n' + hrs + ':' + mins + ':' + secs;
153+
return YYYY_MM_DD_HRS_MINS_SECS;
154+
}
155+
156+
protected padDigits(time: number) {
157+
return time.toString().padStart(2, '0');
158+
}
159+
160+
protected formatPrice(price: string) {
161+
return parseFloat(price.substring(0, 6));
162+
}
163+
164+
@Watch('events')
165+
async watchEvent(newEvent: [], oldEvent: []) {
166+
// console.log(this.events)
167+
this.createTable();
168+
}
175169
}
176-
177170
</script>
178171
<style>
179-
.short-identity__table {
180-
max-width: 50em;
181-
overflow: hidden;
182-
text-overflow: ellipsis;
183-
}
172+
.short-identity__table {
173+
max-width: 50em;
174+
overflow: hidden;
175+
text-overflow: ellipsis;
176+
}
184177
</style>

0 commit comments

Comments
 (0)