fl-dispatch-editor.github.io/index.html at main · finalLy134/fl-dispatch-editor.github.io · 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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>FL-Dispatch Config Editor</title>
  <link rel="stylesheet"
    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <h1 class="title">FL-Dispatch Config Editor</h1>
  <div class="container">
    <h1>Job Creator Editor</h1>
    <label for="job-name">Job Name</label>
    <input type="text" id="job-name" placeholder="Enter job name">
    <label for="job-label">Job Label</label>
    <input type="text" id="job-label" placeholder="Enter job label">
    <label for="job-default-bg">Default Background Color</label>
    <input type="color" id="job-default-bg" placeholder="Enter default background color">
    <label for="job-default-fg">Default Foreground Color</label>
    <input type="color" id="job-default-fg" placeholder="Enter default foreground color">
    <button class="big-btn add-new-btn" onclick="addNewColor()">Add a new color</button>
    <div class="colors">
    </div>
    <button class="big-btn generate-btn" onclick="generate()">Generate</button>
    <div class="generated-container hidden">
      <h2>Generated Code:</h2>
      <p class="generated-code"></p>
      <button class="clear-generated-code" onclick="clearGeneratedCode()">Clear</button>
    </div>
  </div>
  <button class="theme-toggle" onclick="toggleTheme()">
    <span class="material-symbols-outlined light-mode-icon">dark_mode</span>
    <span class="material-symbols-outlined dark-mode-icon hidden">light_mode</span>
  </button>
  <script>
    const colorsContainer = document.querySelector(".colors");

    let colors = 0;

    function addNewColor() {
      if (!colorsContainer) return;

      colors++;

      const colorElement = document.createElement('div');
      colorElement.classList.add('color');
      colorElement.classList.add(`color-${colors}`)

      colorElement.innerHTML = `<label for="color-type">Color Type</label>
        <input id="color-type" placeholder="Enter color type (r/s)">
        <button id="${colors}" class="continue-btn" onclick="continueToButton(this)">Continue</button>
        <div class="range-container hidden">
          <label for="start">Start</label>
          <input type="number" id="start" placeholder="Enter starting range">
          <label for="end">End</label>
          <input type="number" id="end" placeholder="Enter ending range">
          <label for="r-bg-color">Background Color</label>
          <input type="color" id="r-bg-color" placeholder="Enter background color">
          <label for="r-fg-color">Foreground Color</label>
          <input type="color" id="r-fg-color" placeholder="Enter foreground color">
        </div>
        <div class="special-container hidden">
          <label for="prefix">Prefix</label>
          <input id="prefix" placeholder="Enter prefix">
          <label for="s-bg-color">Background Color</label>
          <input type="color" id="s-bg-color" placeholder="Enter background color">
          <label for="s-fg-color">Foreground Color</label>
          <input type="color" id="s-fg-color" placeholder="Enter foreground color">
        </div>
        <button class="delete-btn" onclick="deleteColor(this)">Delete</button>`;

      colorsContainer.append(colorElement);
    }

    function deleteColor(button) {
      if (!colorsContainer) return;

      const colorElement = button.parentElement;
      colorsContainer.removeChild(colorElement);
    }

    function continueToButton(button) {
      if (!colorsContainer) return;

      const colorId = `.color-${button.id}`;
      const colorTypeInput = document.querySelector(`${colorId} #color-type`);

      if (!colorTypeInput) {
        console.error(`Couldn't find color type input inside ${colorId}`);
        return;
      }

      let text = colorTypeInput.value;
      switch (text) {
        case "r": // Range
          document.querySelector(`${colorId} .special-container`)?.classList.add('hidden');
          const rangeContainer = document.querySelector(`${colorId} .range-container`);

          if (!rangeContainer) {
            console.error(`Couldn't find range container inside ${colorId}`);
            return;
          }

          rangeContainer.classList.remove('hidden');
          break;
        case "s": // Special
          document.querySelector(`${colorId} .range-container`)?.classList.add('hidden');
          const specialContainer = document.querySelector(`${colorId} .special-container`);

          if (!specialContainer) {
            console.error(`Couldn't find special container inside ${colorId}`);
            return;
          }

          specialContainer.classList.remove('hidden');
          break;
        default:
          break;
      }
    }

    function generate() {
      const name = document.querySelector('#job-name')?.value;
      const label = document.querySelector('#job-label')?.value;
      const colors = {
        backgroundColor: document.querySelector('#job-default-bg')?.value,
        foregroundColor: document.querySelector('#job-default-fg')?.value
      }

      const job = {
        [name]: {
          label: label,
          colors: colors,
          ranges: [],
          special: [],
        }
      }

      const colorsContainer = document.querySelector('.colors');

      if (!colorsContainer) {
        console.error("Couldn't find colors container");
        return;
      }

      for (const color of colorsContainer.children) {
        const colorId = `.${color.className.split(' ').join('.')}`
        const colorElement = document.querySelector(colorId);
        const colorTypeInput = colorElement.querySelector('#color-type');

        if (isNullOrEmpty(colorTypeInput.value)) return;

        // Found valid color
        switch (colorTypeInput.value) {
          case "r":
            const rangeContainer = document.querySelector(`${colorId} .range-container`);

            if (!rangeContainer) {
              console.error(`Couldn't find range container inside ${colorId}`);
              return;
            }

            const start = document.querySelector(`${colorId} #start`)?.value;
            const end = document.querySelector(`${colorId} #end`)?.value;
            const rBg = document.querySelector(`${colorId} #r-bg-color`)?.value;
            const rFg = document.querySelector(`${colorId} #r-fg-color`)?.value;

            if (isNullOrEmpty(start) || isNullOrEmpty(end) || isNullOrEmpty(rBg) || isNullOrEmpty(rFg)) {
              console.error("Please fill out all fields");
              return;
            }

            const rangeColor = {
              start: start,
              end: end,
              colors: {
                backgroundColor: rBg,
                foregroundColor: rFg
              }
            }

            job[name].ranges.push(rangeColor);
            break;
          case "s":
            const specialContainer = document.querySelector(`${colorId} .special-container`);

            if (!specialContainer) {
              console.error(`Couldn't find special container inside ${colorId}`);
              return;
            }

            const prefix = document.querySelector(`${colorId} #prefix`)?.value;
            const sBg = document.querySelector(`${colorId} #s-bg-color`)?.value;
            const sFg = document.querySelector(`${colorId} #s-fg-color`)?.value;

            if (isNullOrEmpty(prefix) || isNullOrEmpty(sBg) || isNullOrEmpty(sFg)) {
              console.error("Please fill out all fields");
              return;
            }

            const specialColor = {
              prefix: prefix,
              colors: {
                backgroundColor: sBg,
                foregroundColor: sFg
              }
            }

            job[name].special.push(specialColor);
            break;
          default:
            break;
        }
      }

      const generatedCodeText = document.querySelector('.generated-code');
      const generatedContainer = document.querySelector('.generated-container');

      const prettyJob = JSON.stringify(job, null, 2);

      const formattedJob = prettyJob.slice(1, -1);

      const preFormattedJob = `<pre>${formattedJob}</pre>`;

      generatedCodeText.innerHTML = preFormattedJob;
      generatedContainer.classList.remove('hidden');

      console.log(job);
    }

    function clearGeneratedCode() {
      document.querySelector('.generated-container')?.classList.add('hidden');
    }

    function isNullOrEmpty(text) {
      return text === null || text.trim() === '';
    }
  </script>
  <script>
    let isDarkTheme = false;

    function toggleTheme() {
      const body = document.body;
      const lightModeIcon = document.querySelector('.light-mode-icon');
      const darkModeIcon = document.querySelector('.dark-mode-icon');

      body.classList.toggle('dark-theme');
      lightModeIcon.classList.toggle('hidden');
      darkModeIcon.classList.toggle('hidden');
    }
  </script>
</body>

</html>