|
8 | 8 | v-model="search" |
9 | 9 | /> |
10 | 10 | <span class="ml-4 text-xs xs:text-sm text-gray-900"> |
11 | | - Showing {{ sortedHistory.length }} Entries |
| 11 | + Showing {{ result.length }} Entries |
12 | 12 | </span> |
13 | 13 | <table class="min-w-full leading-normal mt-4"> |
14 | 14 | <thead> |
15 | 15 | <tr> |
16 | 16 | <th |
17 | | - class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider cursor-pointer" |
18 | | - data-sortby="origin" |
19 | | - v-on:click="sort" |
20 | | - v-on:keyup.enter="sort" |
21 | | - v-on:keyup.space="sort" |
22 | | - tabindex="0" |
23 | | - aria-label="sort by origin" |
| 17 | + class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider w-1/3" |
24 | 18 | > |
25 | 19 | Origin |
26 | 20 | </th> |
27 | 21 | <th |
28 | | - class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider cursor-pointer" |
29 | | - data-sortby="lastVisit" |
30 | | - v-on:click="sort" |
31 | | - v-on:keyup.enter="sort" |
32 | | - v-on:keyup.space="sort" |
33 | | - tabindex="0" |
34 | | - aria-label="sort by last visit" |
| 22 | + class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider" |
| 23 | + > |
| 24 | + First Visit |
| 25 | + </th> |
| 26 | + <th |
| 27 | + class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider" |
35 | 28 | > |
36 | 29 | Last Visit |
37 | 30 | </th> |
38 | 31 | <th |
39 | | - class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider cursor-pointer" |
40 | | - data-sortby="totalTime" |
41 | | - v-on:click="sort" |
42 | | - v-on:keyup.enter="sort" |
43 | | - v-on:keyup.space="sort" |
44 | | - tabindex="0" |
45 | | - aria-label="sort by total time" |
| 32 | + class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider" |
46 | 33 | > |
47 | 34 | Total |
48 | 35 | </th> |
49 | 36 | </tr> |
50 | 37 | </thead> |
51 | 38 | <tbody> |
52 | | - <tr v-for="entry in sortedHistory" v-bind:key="entry.origin"> |
| 39 | + <tr v-for="entry in result" v-bind:key="entry.origin"> |
53 | 40 | <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm"> |
54 | 41 | <div class="flex items-center"> |
55 | 42 | <p class="text-gray-900 whitespace-no-wrap"> |
|
59 | 46 | </td> |
60 | 47 | <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm"> |
61 | 48 | <p class="text-gray-900 whitespace-no-wrap"> |
62 | | - {{ entry.lastVisit }} |
| 49 | + {{ humanizeDate(entry.sessions[0].date) }} |
| 50 | + </p> |
| 51 | + </td> |
| 52 | + <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm"> |
| 53 | + <p class="text-gray-900 whitespace-no-wrap"> |
| 54 | + {{ |
| 55 | + humanizeDate(entry.sessions[entry.sessions.length - 1].date) |
| 56 | + }} |
63 | 57 | </p> |
64 | 58 | </td> |
65 | 59 | <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm"> |
66 | 60 | <p class="text-gray-900 whitespace-no-wrap"> |
67 | | - {{ entry.totalTime }} |
| 61 | + {{ humanizeDuration(entry.totalTime * 1000) }} |
68 | 62 | </p> |
69 | 63 | </td> |
70 | 64 | </tr> |
|
74 | 68 | class="px-5 py-5 bg-white border-t flex flex-col xs:flex-row items-center xs:justify-between" |
75 | 69 | > |
76 | 70 | <span class="text-xs xs:text-sm text-gray-900"> |
77 | | - Showing {{ sortedHistory.length }} Entries |
| 71 | + Showing {{ result.length }} Entries |
78 | 72 | </span> |
79 | | - <!-- |
80 | | - <div class="inline-flex mt-2 xs:mt-0"> |
81 | | - <button |
82 | | - class="text-sm bg-gray-300 hover:bg-gray-400 text-gray-800 font-semibold py-2 px-4 rounded-l" |
83 | | - > |
84 | | - Prev |
85 | | - </button> |
86 | | - <button |
87 | | - class="text-sm bg-gray-300 hover:bg-gray-400 text-gray-800 font-semibold py-2 px-4 rounded-r" |
88 | | - > |
89 | | - Next |
90 | | - </button> |
91 | | - </div> |
92 | | - --> |
93 | 73 | </div> |
94 | 74 | </div> |
95 | 75 | </div> |
96 | 76 | </template> |
97 | 77 |
|
98 | | -<script> |
99 | | -import { isValidDate, compare, humanizeEntry } from "../utils.js"; |
100 | | -
|
101 | | -export default { |
102 | | - name: "app", |
103 | | - data: function () { |
104 | | - return { |
105 | | - history: [], |
106 | | - sortby: "totalTime", |
107 | | - ascending: false, |
108 | | - search: "", |
109 | | - }; |
110 | | - }, |
111 | | - mounted: async function () { |
112 | | - const { data } = await browser.storage.local.get("data"); |
113 | | -
|
114 | | - if (!data) return; |
115 | | -
|
116 | | - this.history = Object.keys(data).map((key) => { |
117 | | - return { |
118 | | - origin: key, |
119 | | - ...data[key], |
120 | | - }; |
121 | | - }); |
122 | | - }, |
123 | | - computed: { |
124 | | - sortedHistory: function () { |
125 | | - return Array.from(this.history) |
126 | | - .sort((a, b) => { |
127 | | - const keyA = a[this.sortby]; |
128 | | - const keyB = b[this.sortby]; |
129 | | -
|
130 | | - return compare(keyA, keyB, this.sortby, this.ascending); |
131 | | - }) |
132 | | - .map(humanizeEntry) |
133 | | - .filter( |
134 | | - (entry) => |
135 | | - (this.search && entry.origin.includes(this.search)) || !this.search, |
136 | | - ); |
137 | | - }, |
138 | | - }, |
139 | | - methods: { |
140 | | - sort: function (event) { |
141 | | - const sortby = event.currentTarget.dataset.sortby; |
142 | | -
|
143 | | - this.ascending = this.sortby === sortby && !this.ascending; |
144 | | - this.sortby = sortby; |
145 | | - }, |
146 | | - }, |
147 | | -}; |
148 | | -</script> |
| 78 | +<script src="./App.js"></script> |
0 commit comments