useFlow/index.html at main · LightCreator1007/useFlow · 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
<!DOCTYPE html>
<html>
  <head>
    <title>useFlow</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        padding: 20px;
      }
      .workspace {
        margin-bottom: 15px;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 6px;
      }
    </style>
  </head>
  <body>
    <h1>useFlow</h1>

    <!-- Create Workspace -->
    <h2>Create Workspace</h2>
    <input id="workspaceName" placeholder="Workspace Name (e.g. CP)" />
    <button id="createWorkspace">Add Workspace</button>

    <div id="workspaceList"></div>

    <script>
  const workspaceList = document.getElementById("workspaceList");

  // Load workspaces on start
  window.electronAPI.loadWorkspaces().then((workspaces) => {
    if (!workspaces) return;
    workspaces.forEach(ws => renderWorkspace(ws.name, ws.actions));
  });

  document.getElementById("createWorkspace").addEventListener("click", () => {
    const name = document.getElementById("workspaceName").value.trim();
    if (!name) return alert("Enter a workspace name!");
    renderWorkspace(name, []);
    saveAll();
  });

  function renderWorkspace(name, actions) {
    const div = document.createElement("div");
    div.className = "workspace";
    div.innerHTML = `
      <h3>${name}</h3>
      <select class="actionType">
        <option value="chrome">Chrome Tab</option>
        <option value="vscode">VS Code File</option>
        <option value="terminal">Terminal</option>
      </select>
      <input class="actionValue" placeholder="Enter URL or File Path" />
      <button class="addAction">Add Action</button>
      <ul class="actions"></ul>
      <button class="start">▶ Start ${name}</button>
      <button class="delete">❌ Delete</button>
    `;
    workspaceList.appendChild(div);
    // Delete workspace
    div.querySelector(".delete").addEventListener("click", () => {
      div.remove();   // Remove from UI
      saveAll();      // Save updated list to JSON
    });

    const ul = div.querySelector(".actions");

    // Load existing actions
    actions.forEach(a => {
      const li = document.createElement("li");
      li.textContent = `${a.type}: ${a.value}`;
      ul.appendChild(li);
    });

  // Add new action
    div.querySelector(".addAction").addEventListener("click", async () => {
    const type = div.querySelector(".actionType").value;
    let value = div.querySelector(".actionValue").value.trim();

    if (type === "vscode") {
      // 👇 Browse for file instead of manual input
      const pickedFile = await window.electronAPI.pickFile();
      if (!pickedFile) return;
      value = pickedFile;
      div.querySelector(".actionValue").value = value; // show in input
    }

    if (!value) return alert("Enter a value!");
    const li = document.createElement("li");
    li.textContent = `${type}: ${value}`;
    ul.appendChild(li);
    saveAll();
    });


    // Start workspace
    div.querySelector(".start").addEventListener("click", () => {
      const actions = [];
      ul.querySelectorAll("li").forEach(li => {
        const [type, ...rest] = li.textContent.split(":");
        actions.push({ type: type.trim(), value: rest.join(":").trim() });
      });
      window.electronAPI.startWorkspace({ name, actions });
    });
  }


  function saveAll() {
    const workspaces = [];
    document.querySelectorAll(".workspace").forEach(div => {
      const name = div.querySelector("h3").textContent;
      const actions = [];
      div.querySelectorAll("li").forEach(li => {
        const [type, ...rest] = li.textContent.split(":");
        actions.push({ type: type.trim(), value: rest.join(":").trim() });
      });
      workspaces.push({ name, actions });
    });
    window.electronAPI.saveWorkspaces(workspaces);
  }

</script>

  </body>
</html>