MissionPlanner/index.html at main · BeeBotix/MissionPlanner · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>BeeBotix Mission Planner</title>

  <!-- Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap" rel="stylesheet">

  <!-- Leaflet CSS -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />

  <!-- Main CSS -->
  <link rel="stylesheet" href="main.css" />
</head>
<body>
  <!-- TOP CONTROL BAR -->
  <header class="top-bar">
    <div class="left">
      <span class="title">BeeBotix's Mission Maker</span>
    </div>

    <div class="right">
      <button id="missionToggleBtn" class="btn primary">
        Create Mission Planner
      </button>

      <button id="workZoneBtn" class="btn secondary">
        WorkZone
      </button>

      <button id="exportBtn" class="btn secondary" disabled>
        Export Mission
      </button>

      <button id="clearMissionBtn" class="btn secondary">
        Clear Mission
      </button>
    </div>
  </header>

  <!-- NOTIFICATION BAR -->
  <div id="notificationBar" class="notification hidden"></div>

  <!-- RIGHT SIDE PANEL -->
  <aside id="sidePanel" class="side-panel hidden">
    <div class="side-panel-header">Mission Node</div>

    <!-- Mission Metadata Section -->
    <div id="missionMetadataSection">
      <label>
        Mission Name
        <input
          id="missionName"
          type="text"
          placeholder="Enter mission name"
          autocomplete="off"
        />
      </label>

      <label>
        Mission Type
        <select id="missionType">
          <option value="">Select Mission Type</option>
          <option value="1_time">One-Time Mission</option>
          <option value="infinity">Infinity Mission</option>
        </select>
      </label>
    </div>

    <!-- Node Details Section -->
    <label>
      Category
      <select id="nodeCategory">
        <option value="">Select</option>
        <option value="home">Home Location</option>
        <option value="waypoint">Waypoint</option>
        <option value="special">Special Task</option>
        <option value="hold">Hold & Do Task</option>
        <option value="safety">Safety Dock</option>
      </select>
    </label>

    <label>
      ID
      <input
        id="nodeId"
        type="text"
        placeholder="unique_id (A-Z a-z 0-9 _ -)"
        autocomplete="off"
      />
    </label>

    <label>
      Name
      <input
        id="nodeName"
        type="text"
        placeholder="Human readable name"
        autocomplete="off"
      />
    </label>

    <label>
      Task
      <input
        id="nodeTask"
        type="text"
        placeholder="task_code (A-Z a-z 0-9 _ -)"
        autocomplete="off"
      />
    </label>

    <!-- HOLD TIME : HH MM SS -->
    <label id="holdTimeWrap" class="hidden">
      Hold Time (HH : MM : SS)
      <div class="time-input">
        <input id="hh" type="text" maxlength="2" placeholder="HH" inputmode="numeric" />
        <span>:</span>
        <input id="mm" type="text" maxlength="2" placeholder="MM" inputmode="numeric" />
        <span>:</span>
        <input id="ss" type="text" maxlength="2" placeholder="SS" inputmode="numeric" />
      </div>
    </label>

    <!-- TASK DURATION : HH MM SS -->
    <label id="taskDurationWrap" class="hidden">
      Task Duration (HH : MM : SS)
      <div class="time-input">
        <input id="task_hh" type="text" maxlength="2" placeholder="HH" inputmode="numeric" />
        <span>:</span>
        <input id="task_mm" type="text" maxlength="2" placeholder="MM" inputmode="numeric" />
        <span>:</span>
        <input id="task_ss" type="text" maxlength="2" placeholder="SS" inputmode="numeric" />
      </div>
    </label>

    <div class="side-panel-actions">
      <button id="createNodeBtn" class="btn primary">
        Save Node
      </button>
      <button id="cancelNodeBtn" class="btn secondary">
        Cancel
      </button>
    </div>
  </aside>

  <!-- MAP -->
  <div id="map"></div>

  <!-- Leaflet JS -->
  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

  <!-- App JS -->
  <script src="app.js"></script>
</body>
</html>