Skip to content

Commit c2aab18

Browse files
NyanraltotlapunNyanraltotlapun
committed
Work on adding export and import buttons, css mostly.
1 parent 9fae526 commit c2aab18

File tree

15 files changed

+452
-22
lines changed

15 files changed

+452
-22
lines changed

‎notes.txt‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
Just development notes.
2+
3+
https://www.svgrepo.com/collection/pointers-2/
4+
5+
https://www.svgrepo.com/collection/hand-gestures-7/2
6+
7+
https://www.svgrepo.com/svg/474836/export
8+
9+
https://www.svgrepo.com/svg/474870/import
10+
11+
https://www.svgrepo.com/svg/277641/menu

‎src/extension/manifest_chrome.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"manifest_version": 3,
33
"name": "Time Tracker",
4-
"version": "1.2.3",
4+
"version": "1.2.5",
55

66
"author": "Anna Molodtsova and Kirill Shakirov",
77

‎src/extension/window/images/export.svg‎

Lines changed: 6 additions & 0 deletions
Loading

‎src/extension/window/images/import.svg‎

Lines changed: 7 additions & 0 deletions
Loading

‎src/extension/window/images/menu.svg‎

Lines changed: 23 additions & 0 deletions
Loading

‎src/extension/window/window.css‎

Lines changed: 71 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -14,20 +14,80 @@ footer {
1414
padding: 2rem;
1515
}
1616

17+
#main-section {
18+
display: flex;
19+
flex-direction: column;
20+
justify-content: center;
21+
align-items: center;
22+
}
23+
1724
#add-section {
1825
display: flex;
1926
justify-content: center;
2027
align-items: center;
2128
gap: 0.43rem;
22-
height: 2.7rem;
29+
height: 2.6rem;
30+
}
31+
32+
#menu-section {
33+
display: flex;
34+
justify-content: left;
35+
align-items: left;
36+
justify-self: center;
37+
gap: 0.6rem;
38+
margin-top: 1rem;
39+
background-color: #ed556408;
40+
border: 1px solid #d55642;
41+
border-radius: 2px;
42+
43+
44+
height: 0;
45+
width: 0;
46+
opacity: 0;
47+
visibility: hidden;
48+
49+
transition: width 0.5s ease, height 0.5s ease, opacity 0.3s ease-in-out, visibility 0s 0.3s;
50+
}
51+
52+
#menu-section.show {
53+
height: 3rem;
54+
width: 100%;
55+
opacity: 1;
56+
visibility: visible;
57+
transition: width 0.5s ease, height 0.5s ease, opacity 0.3s ease-in-out;
2358
}
2459

2560
#add-button {
26-
height: 2.7rem;
27-
width: 2.7rem;
61+
aspect-ratio: 1;
62+
height: inherit;
63+
width: auto;
2864
background-image: url("images/add.svg");
2965
}
3066

67+
#menu-button {
68+
aspect-ratio: 1;
69+
height:inherit;
70+
width: auto;
71+
background-image: url("images/menu.svg");
72+
73+
}
74+
75+
76+
#export-button {
77+
aspect-ratio: 1;
78+
height: auto;
79+
width: auto;
80+
visibility: visible;
81+
background-image: url("images/export.svg");
82+
}
83+
84+
#import-button {
85+
aspect-ratio: 1;
86+
height: auto;
87+
width: auto;
88+
background-image: url("images/import.svg");
89+
}
90+
3191
#title {
3292
height: 1.7rem;
3393
width: 25ch;
@@ -63,15 +123,18 @@ footer {
63123
background-image: url("images/reset.svg");
64124
}
65125

126+
.card-button {
127+
aspect-ratio: 1;
128+
height:inherit;
129+
width: auto;
130+
margin: 0.0616rem 0.188rem;
131+
}
66132

67133
.img-button {
68-
height: 2.22rem;
69-
width: 2.22rem;
70-
margin: 0.0616rem 0.188rem;
71134
background-size: 100%;
72135
border: none;
73-
transition: filter 0.4s ease;
74136
background-color: transparent;
137+
transition: filter 0.4s ease;
75138
}
76139

77140
.img-button:hover {
@@ -85,6 +148,7 @@ footer {
85148

86149
.tt-button-section {
87150
margin-top: 16px;
151+
height: 2.22rem;
88152
}
89153

90154
.button-left {
@@ -97,13 +161,6 @@ footer {
97161
margin-right: 0px;
98162
}
99163

100-
#main-section {
101-
display: flex;
102-
flex-direction: column;
103-
justify-content: center;
104-
align-items: center;
105-
}
106-
107164
.tt-list {
108165
list-style-type: none;
109166
display: flex;

‎src/extension/window/window.html‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,19 +23,26 @@
2323
<div>Current progress: <time class="current-time"></time></div>
2424
</section>
2525
<section class="tt-button-section">
26-
<button type="button" title="Start" class="img-button button-left start-pause-button start-button"></button>
27-
<button type="button" title="Remove" class="img-button button-right remove-button"></button>
28-
<button type="button" title="Reset" class="img-button button-right reset-button"></button>
26+
<button type="button" title="Start" class="img-button card-button button-left start-pause-button start-button"></button>
27+
<button type="button" title="Remove" class="img-button card-button button-right remove-button"></button>
28+
<button type="button" title="Reset" class="img-button card-button button-right reset-button"></button>
2929
</section>
3030
</div>
3131
</li>
3232
</template>
3333

3434
<main>
3535
<section id="main-section">
36-
<section id="add-section">
37-
<button id="add-button" type="button" class="img-button" title="Add tracker" disabled></button>
38-
<input id="title" type="text" maxlength="100" placeholder="Enter tracker name">
36+
<section id="controls-section">
37+
<section id="add-section">
38+
<button id="add-button" type="button" class="img-button" title="Add tracker" disabled></button>
39+
<input id="title" type="text" maxlength="100" placeholder="Enter tracker name">
40+
<button id="menu-button" type="button" class="img-button" title="Open menu" disabled></button>
41+
</section>
42+
<section id="menu-section">
43+
<button id="export-button" type="button" class="img-button" title="Export" disabled></button>
44+
<button id="import-button" type="button" class="img-button" title="Import" disabled></button>
45+
</section>
3946
</section>
4047
<section>
4148
<ul id="card-list" class="tt-list"></ul>

‎src/extension/window/window.js‎

Lines changed: 56 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ function main() {
3434

3535
getRecords(db);
3636
initAddButton(db);
37+
initMenuSection(db);
3738

3839
// save jobs status in case of page close or unload.
3940
window.addEventListener("beforeunload", (e) => {
@@ -42,6 +43,25 @@ function main() {
4243
});
4344
}
4445

46+
function initMenuSection(db) {
47+
let menu_button = document.getElementById("menu-button");
48+
let menu_section = document.getElementById("menu-section");
49+
let export_button = document.getElementById("export-button");
50+
let import_button = document.getElementById("import-button");
51+
52+
menu_button.onclick = () => {
53+
if (menu_section.classList.toggle("show")) {
54+
console.log("Toggle show!");
55+
}
56+
else
57+
{
58+
console.log("Toggle Hide!");
59+
}
60+
}
61+
menu_button.disabled = false;
62+
63+
}
64+
4565
function secToStr(seconds) {
4666
//let days = Math.floor(seconds / 86400);
4767
let hours = Math.floor(seconds / 3600);
@@ -76,6 +96,41 @@ function main() {
7696
}
7797

7898

99+
function export_db(db) {
100+
let data_obj = {
101+
date_time: (new Date()).toISOString(),
102+
trackers: [],
103+
};
104+
105+
let objectStore = db.transaction(["trackers"]).objectStore("trackers");
106+
objectStore.openCursor().onsuccess = (e) => {
107+
let cursor = e.target.result;
108+
if (cursor) {
109+
data_obj.trackers.push({
110+
id: cursor.key,
111+
title: cursor.value.title,
112+
time: cursor.value.time,
113+
});
114+
cursor.continue();
115+
}
116+
// else
117+
if (data_obj.trackers.length > 0) {
118+
let json_string = JSON.stringify(data_obj, null, 4);
119+
let blob = new Blob([json_string], { type: 'application/json' });
120+
let blob_url = URL.createObjectURL(blob);
121+
let a = document.createElement("a");
122+
a.href = blob_url;
123+
a.download = `time_tracker_export-${new Date().toISOString()}.json`;
124+
a.click();
125+
URL.revokeObjectURL(blob_url);
126+
}
127+
else {
128+
alert("No data to export.");
129+
}
130+
}
131+
132+
}
133+
79134

80135
/*
81136
Params: db object
@@ -208,7 +263,7 @@ function main() {
208263
intervalId = setInterval(() => {
209264
counter++;
210265
subtotal_time++;
211-
266+
212267
// Every 60 seconds save time to DB
213268
if (counter % 60 === 0) updateTime(db, id, subtotal_time);
214269

‎src/graphics/buttons/export.svg‎

Lines changed: 52 additions & 0 deletions
Loading

‎src/graphics/buttons/export_opt.svg‎

Lines changed: 6 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)