cover-maker/script.js at main · samithseu/cover-maker · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
const app = Vue.createApp({
  data() {
    return {
      contents: "",
      school: "",
      grade: "",
      subjects: "",
      name: "",
      year: "",
      fm: "frame-1.svg",
      frames: [
        { id: 1, value: "frame-1.svg", label: "ប្រភេទ 1" },
        { id: 2, value: "frame-2.png", label: "ប្រភេទ 2" },
        { id: 3, value: "frame-3.png", label: "ប្រភេទ 3" },
        { id: 4, value: "frame-4.png", label: "ប្រភេទ 4" },
        { id: 5, value: "frame-5.png", label: "ប្រភេទ 5" },
        { id: 6, value: "frame-6.png", label: "ប្រភេទ 6" },
        { id: 7, value: "frame-7.png", label: "ប្រភេទ 7" },
        { id: 8, value: "frame-8.png", label: "ប្រភេទ 8" },
        { id: 9, value: "frame-9.png", label: "ប្រភេទ 9" },
        { id: 10, value: "frame-10.png", label: "ប្រភេទ 10" },
      ],
    };
  },
  computed: {
    allsubjects: {
      get() {
        return this.subjects.split(",");
      },
    },
    main_school: {
      get() {
        return this.school;
      },
      set(newValue) {
        this.school = newValue;
      },
    },
  },
  methods: {
    printResult() {
      window.print();
    },
    clearResult() {
      this.school = "";
      this.grade = "";
      this.subjects = "";
      this.name = "";
      this.year = "";
      this.fm = "frame-1.svg";
      this.contents = "";
    },
    checkinputs() {
      if (
        this.school == "" ||
        this.grade == "" ||
        this.subjects == "" ||
        this.name == "" ||
        this.year == "" ||
        this.fm == ""
      ) {
        return true;
      } else {
        return false;
      }
    },
    showResult() {
      this.contents = "";
      this.allsubjects.forEach((sub) => {
        this.contents +=
          "<div class='cover'><img src='img/" +
          this.fm +
          "' alt='Frames' class='absolute' /><h4>" +
          this.main_school +
          "</h4><h4>ថ្នាក់ទី: <span>" +
          this.grade +
          "</span></h4><h4>សៀវភៅ: <span>" +
          sub +
          "</span></h4><h4>ឈ្មោះ: <span>" +
          this.name +
          "</span></h4><h4>ឆ្នាំសិក្សា: <span>" +
          this.year +
          "</span></h4></div>";
      });
    },
  },
});

app.mount("#app");