https://j-grosse.github.io/PrioKitty-App/js/pomodoro.js

1let main_dur = 25;
2let pause_dur = 5;
3// let main_dur = 0.05;
4// let pause_dur = 0.05;
5let minute = 60;
6let firstRun = false;
7
8let i = 0;
9let vol = 0.5;
10var aaah = document.getElementById('aaah');
11let meow = document.getElementById('meow');
12var purr = document.getElementById('purr');
13// purr.currentTime = 0;
14var dub = document.getElementById('dub');
15dub.volume = vol;
16var jazz = document.getElementById('jazz');
17jazz.volume = vol;
18
19function togglePlay(genre) {
20  let isPaused;
21  if (genre.paused) {
22    isPaused = true;
23  } else {
24    isPaused = false;
25  }
26  document.querySelectorAll('audio').forEach((el) => el.pause());
27  let genreId = document.getElementById(`"${genre}"`);
28  isPaused ? genre.play() : genre.pause();
29}
30
31function popup() {
32  // get task text for popup image
33  let taskText = document.getElementById('taskText').textContent;
34  let task_nospace = taskText.replace(' ', '%20');
35  let url = `https://cataas.com/cat/says/${task_nospace}`;
36
37  document.getElementById('popup-image').src = url;
38
39  saveFile(url);
40
41  // let imageTag = '<img id="cat" src=' + url + '%20&#8730' + '?type=md />';
42  // document.getElementById('modal-card-body').innerHTML = imageTag;
43
44  // display bulma modal popup
45  var modalDlg = document.querySelector('#image-modal');
46  var imageModalCloseBtn = document.querySelector('#image-modal-close');
47  // open modal popup
48  modalDlg.classList.add('is-active');
49  // click close button
50  imageModalCloseBtn.addEventListener('click', function () {
51    modalDlg.classList.remove('is-active');
52  });
53  // click anywhere to close modal popup
54  window.addEventListener('mouseup', function () {
55    modalDlg.classList.remove('is-active');
56  });
57}
58
59prioritize();
60
61function prioritize() {
62  const prioBtn = document.querySelector('.prio-button');
63  prioBtn.addEventListener('click', () => {
64    const frag = document.createDocumentFragment();
65    const list = document.querySelector('ol');
66    const items = list.querySelectorAll('li');
67    const prioCat = document.querySelector('#prio-cat');
68
69    list.style.visibility = 'hidden';
70    prioBtn.style.display = 'none';
71    prioCat.style.display = 'block';
72
73    setTimeout(() => {
74      prioCat.style.display = 'none';
75      prioBtn.style.display = 'inline';
76
77      const sortedList = Array.from(items).sort(() => Math.random() - 0.5);
78      for (let item of sortedList) {
79        frag.appendChild(item);
80      }
81
82      list.appendChild(frag);
83      list.style.visibility = 'visible';
84    }, 700);
85  });
86}
87
88// Vue.js Pomodoro Timer
89// start, skip, reset
90
91var app = new Vue({
92  el: '#app',
93  data: {
94    time_remaining: main_dur * minute,
95    timer_state: 'work', //'work' or 'rest'
96    timer_running: false,
97    timer_paused: false,
98    timer_id: null,
99  },
100  methods: {
101    timer: function (action) {
102      switch (action) {
103        case 'start':
104          togglePlay(dub);
105          dub.play();
106          if (!this.timer_running) {
107            this.timer_id = setInterval(this.tick, 1000);
108            this.timer_running = true;
109          }
110          break;
111
112        case 'skip':
113          // on second run
114          if (firstRun) {
115            firstRun = false;
116            break;
117          }
118
119          // on first run
120          firstRun = true;
121          document.getElementById('badges').textContent += '🍅';
122          // togglePlay(jazz); // starts music
123          popup();
124          togglePlay(aaah);
125
126          // remove li with currentTaskText
127          let currentTaskText =
128            document.getElementById('pTaskText').textContent;
129          $(`ol#list li:contains(${currentTaskText})`).remove();
130
131          // replace Text in taskText <p>-Tag
132          let currentTaskTag = document.getElementById('pTaskText');
133          currentTaskTag.innerText = '(select a task)';
134
135          setTimeout(() => {
136            jazz.play();
137          }, 3000);
138
139          this.timer_state == 'work' ? pause_dur * minute : main_dur * minute;
140          if (this.timer_running && !this.timer_paused) {
141            // this.skip();
142          }
143          break;
144
145        /*
146        case 'pause':
147          if (this.timer_running) this.timer_paused = !this.timer_paused;
148          break;
149        */
150
151        // stops the timer
152        case 'reset':
153          // togglePlay(jazz); // stops music
154          // jazz.pause();
155          meow.play();
156
157          clearInterval(this.timer_id);
158          this.timer_id = null;
159          this.time_remaining = main_dur * minute;
160          this.timer_running = false;

161          this.timer_paused = false;
162          this.timer_state = 'work';
163          break;
164
165        default:
166          break;
167      }
168    },
169
170    // if timer is running count down remaining time
171    // else skip to next timer (method block below')
172    tick: function () {
173      if (this.timer_running && !this.timer_paused) {
174        if (this.time_remaining > 0) {
175          this.time_remaining--;
176        } else {
177          //timer ran out
178          this.skip();
179        }
180      }
181    },
182
183    // skip to 5 min. break timer when 25 min. timer ran out
184    // after 5 min. break skip to reset and stop timer
185    skip: function () {
186      this.time_remaining =
187        this.timer_state == 'work' ? pause_dur * minute : main_dur * minute;
188
189      this.timer_state =
190        this.timer_state == 'work'
191          ? 'rest' : this.timer('reset');
192          // : setTimeout(() => {
193          //     this.timer('reset');
194          //   }, 1500);
195      // this.timer_state = this.timer_state == 'work' ? 'rest' : 'work';
196
197      this.timer('skip');
198
199      //  // original code:
200      //  skip: function () {
201      //   this.time_remaining =
202      //     this.timer_state == 'work' ? (5 * minute) : (25 * minute);
203      //   this.timer_state = this.timer_state == 'work' ? 'rest' : 'work';
204
205
206      // Notification Popup:
207
208      // spawnNotification(
209      //   this.timer_state == 'work'
210      //     ? 'Time to get back to work 🖥️'
211      //     : 'Time to take a break 🏖',
212      //   'Pomodoro Timer'
213      // );
214    },
215  },
216});
217
218// for Notification Popup:
219
220// Notification.requestPermission().then(function (result) {
221//   console.log(result);
222// });
223
224// function spawnNotification(body, icon, title) {
225//   var options = {
226//     body: body,
227//     icon: icon,
228//   };
229//   var n = new Notification(title, options);
230// }
231
232
233
234
235// LOCAL STORAGE functions:
236
237function fetchImage(url) {
238  window.addEventListener('load', function () {
239    //checking if the user is connected to the internet and show content respectively
240    // if (navigator.onLine) {
241    fetch(`${url}`)
242      .then((response) => response.json())
243      .then((data) => {
244        document.body.style.backgroundImage = `url("${data.url}")`;
245      })
246      .catch((err) => console.log("Something's wrong with the API"));
247    // }
248    // //when the user is offline
249    // else {
250    //   /*THE CODE GOES HERE*/
251    // }
252  });
253}
254
255async function convertToFile(url) {
256  let response = await fetch(url);
257  console.log('await fetch response:' + response);
258  // .then(resp=>{
259  // console.log(resp.headers.get('Content-Type')); });
260  // console.log(resp.headers.get('Content-Type')); });
261  let imgType = response.headers.get('Content-Type');
262  let filename = imgType.replace('/', '.');
263  if (filename === 'image.jpeg') filename = 'image.jpg';
264  let blob = await response.blob();
265  return new File([blob], filename, {
266    type: imgType, // e.g.'image/jpeg'
267  });
268}
269
270// async function getCatFromTag() {
271//   const url = document.getElementById("cat").value; // get file URL somehow
272//   const file = await convertToFile(url); // usage of function above
273
274//   const reader = new FileReader();
275//   reader.readAsDataURL(file);
276// }
277
278async function saveFile(url) {
279  const imgFile = await convertToFile(url);
280  let number = new Date().getTime(); // create random filename
281  let filename = number + imgFile.name;
282  const reader = new FileReader();
283
284  if (imgFile) {
285    // save file to reader.result
286    reader.readAsDataURL(imgFile);
287  }
288  // save to localstorage when file is read
289  reader.addEventListener(
290    'load',
291    function () {
292      localStorage.setItem(filename, reader.result);
293    },
294    false
295  );
296
297  console.log(imgFile);
298  console.log(filename);
299
300  // add image as base64 to popup-image tag
301  // const img = document.getElementById('popup-image');
302  // img.src = 'data:image/png;base64,' + imgFile;
303
304  // load image from localStorage
305  // reader.readAsDataUrl(imgFile);
306}
307
308// localStorage.clear();