<reponame>korytovaf/SKILBOX_nodeJS_deploy_timers<filename>public/main.js<gh_stars>0
/*global UIkit, Vue */

(() => {
  const wsProto = location.protocol === "https:" ? "wss:" : "ws:";
  const client = new WebSocket(`${wsProto}//${location.host}`);

  const notification = (config) =>
    UIkit.notification({
      pos: "top-right",
      timeout: 5000,
      ...config,
    });

  const info = (message) =>
    notification({
      message,
      status: "success",
    });

  new Vue({
    el: "#app",
    data: {
      desc: "",
      activeTimers: [],
      oldTimers: [],
    },
    methods: {
      createTimer() {
        const description = this.desc;
        this.desc = "";
        client.send(
          JSON.stringify({
            type: "create_timer",
            description,
          })
        );
      },
      stopTimer(id) {
        client.send(
          JSON.stringify({
            type: "stop_timer",
            id,
          })
        );
      },
      formatTime(ts) {
        return new Date(ts).toTimeString().split(" ")[0];
      },
      formatDuration(d) {
        d = Math.floor(d / 1000);
        const s = d % 60;
        d = Math.floor(d / 60);
        const m = d % 60;
        const h = Math.floor(d / 60);
        return [h > 0 ? h : null, m, s]
          .filter((x) => x !== null)
          .map((x) => (x < 10 ? "0" : "") + x)
          .join(":");
      },
    },
    created() {
      client.addEventListener("message", (message) => {
        let data;
        try {
          data = JSON.parse(message.data);
        } catch (err) {
          return;
        }

        if (data.type === "active_timers") {
          this.activeTimers = data.activeTimers;
        }

        if (data.type === "all_timers") {
          this.activeTimers = data.activeTimers;
          this.oldTimers = data.oldTimers;
        }

        if (data.type === "created_timer") {
          this.activeTimers = data.activeTimers;
          this.oldTimers = data.oldTimers;
          info(`Created new timer "${data.description}" [${data.idCreatedTimer}]`);
        }

        if (data.type === "stop_timer") {
          this.activeTimers = data.activeTimers;
          this.oldTimers = data.oldTimers;
          info(`Stopped the timer [${data.updatedTimer.id}]`);
        }
      });

      client.addEventListener("open", () => {
        client.send(
          JSON.stringify({
            type: "all_timers",
          })
        );
      });
    },
  });
})();
