-
Notifications
You must be signed in to change notification settings - Fork 0
/
editProcess.html
143 lines (139 loc) · 7.32 KB
/
editProcess.html
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
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Editar Processo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/bpmn-js/dist/assets/diagram-js.css">
<link rel="stylesheet" href="https://unpkg.com/bpmn-js/dist/assets/bpmn-font/css/bpmn.css">
<style>
#fullscreenModeler {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: white;
z-index: 1000;
display: none;
}
#controls {
display: flex;
gap: 10px;
margin-bottom: 10px;
}
.button {
padding: 8px 16px;
border: none;
border-radius: 5px;
cursor: pointer;
color: white;
background-color: #0056b3;
}
.button:hover {
background-color: #004494;
}
</style>
</head>
<body>
<div class="flex min-h-screen">
<div class="w-64 bg-gray-800 text-white">
<div class="flex items-center justify-between p-4">
<h1 class="text-xl font-bold">Menu</h1>
<button id="toggleButton" class="text-gray-500 focus:outline-none">
<svg id="collapseIcon" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
<svg id="expandIcon" class="w-6 h-6 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
</div>
<nav :class="{'hidden': !open, 'block': open}" class="flex-1 px-4 py-2 space-y-2">
<!--<a href="edit.html" class="flex items-center px-4 py-2 rounded hover:bg-gray-700">
<svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
</svg>
<span x-show="open">Novo Risco</span>
</a>-->
<a href="processes.html" class="flex items-center px-4 py-2 rounded hover:bg-gray-700">
<svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7h18M3 12h18m-9 5h9"></path>
</svg>
<span x-show="open">Processos</span>
</a>
<a href="risks.html" class="flex items-center px-4 py-2 rounded hover:bg-gray-700">
<svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7h18M3 12h18m-9 5h9"></path>
</svg>
<span x-show="open">Riscos</span>
</a>
</nav>
</div>
<div class="flex-1 flex flex-col" style="height: 650px;">
<div class="p-6">
<h1 class="text-2xl font-bold mb-4">Editar Processo</h1>
<form id="editForm" class="space-y-4">
<input type="hidden" id="processId">
<div>
<label for="name" class="block text-sm font-medium text-gray-700">Nome:</label>
<input type="text" id="name" required class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
</div>
<div>
<label for="version" class="block text-sm font-medium text-gray-700">Versão:</label>
<input type="text" id="version" required class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
</div>
<div>
<label for="objective" class="block text-sm font-medium text-gray-700">Objetivo:</label>
<input type="text" id="objective" required class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
</div>
<div>
<label for="owner" class="block text-sm font-medium text-gray-700">Proprietário:</label>
<input type="text" id="owner" required class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
</div>
<div>
<label for="version" class="block text-sm font-medium text-gray-700">Versão:</label>
<input type="text" id="version" required pattern="[0-9]+(\.[0-9]+)*" title="Please enter numbers and dots only, e.g., 1.0, 1.1.1" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
</div>
<div>
<label for="users" class="block text-sm font-medium text-gray-700">Usuários:</label>
<select id="users" required class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
<option value="Administrator">Administrator</option>
<!-- Additional users can be added here -->
</select>
</div>
<div>
<label for="status" class="block text-sm font-medium text-gray-700">Status:</label>
<select id="status" required class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
<option value="Novo">Novo</option>
<option value="Em Aprovação">Em Aprovação</option>
<option value="Aprovado">Aprovado</option>
<option value="Rejeitado">Rejeitado</option>
</select>
</div>
<button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Salvar</button>
</form>
</div>
<div style="width: calc(100% - 256px); padding: 20px;">
<div id="controls">
<input type="color" id="colorPicker" class="button">
<button id="setColorButton" class="button">Change Color</button>
<button id="addAnnotationButton" class="button">Add Annotation</button>
<button id="fullscreenToggle" class="button">Toggle Fullscreen</button>
</div>
<div id="diagram" style="height: 500px;"></div>
</div>
</div>
</div>
<div id="fullscreenModeler">
<button id="closeFullscreen" class="button">Close Fullscreen</button>
<div id="diagramFullscreen" style="height: 95%;"></div>
</div>
<script src="https://unpkg.com/bpmn-js/dist/bpmn-modeler.development.js"></script>
<script src="https://unpkg.com/jquery/dist/jquery.js"></script>
<script>
</script>
</body>
<script src="/processes.js"></script>
</html>