-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
196 lines (184 loc) · 11.7 KB
/
index.html
File metadata and controls
196 lines (184 loc) · 11.7 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CJML generator</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="style/tool.css">
<link rel="stylesheet" href="style/arrow.css">
<link rel="stylesheet" href="style/mask.css">
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">C J M L</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText"
aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item ">
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
data-bs-target="#staticBackdrop" id="start"> Start/Edit </button>
</li>
<li class="nav-item">
<a class="nav-link" id="export-xml" href="#" onclick="exportXML()">Export XML</a>
</li>
<li class="nav-item">
<a class="nav-link" id="export-xml" href="#" onclick="exportPng(this)">Export PNG</a>
</li>
<li class="nav-item">
<a class="nav-link" id="export-xml" href="docs/doc.html" target="_blank">User guide</a>
</li>
</ul>
<span class="navbar-text">
<!-- Navbar text with an inline element -->
</span>
</div>
</div>
</nav>
<div class="row">
<div class="canvas" id="capture">
<!-- CANVAS -->
</div>
</div>
<!-- new model -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Swimlane diagram generator</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<!--page1 actor-->
<div class="actor" id="actor">
<h3>Actors
<a class="btn btn-light btn-sm" data-bs-toggle="collapse" href="#actor-explaination"
role="button" aria-expanded="false" aria-controls="actor-explaination">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-question-circle" viewBox="0 0 16 16">
<path
d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
<path
d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z" />
</svg>
</a>
</h3>
<div class="collapse multi-collapse" id="actor-explaination">
<p>Who participated in this whole service process? Please add all
necessary participants (Actors).</p>
</div>
<div id="actor-container"></div>
<div class="button-add">
<button type="button" class="btn btn-light btn border add" onclick="createActor()">
<span class="button-text">Add new actor</span>
</button>
</div>
<br>
</div><br><br>
<!--page2 touchpoints-->
<div class="touchpoint" id="touchpoint">
<h3>Touchpoints
<a class="btn btn-light btn-sm" data-bs-toggle="collapse"
href="#touchpoint-explaination" role="button" aria-expanded="false"
aria-controls="touchpoint-explaination">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-question-circle" viewBox="0 0 16 16">
<path
d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
<path
d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z" />
</svg>
</a>
</h3>
<div class="collapse multi-collapse" id="touchpoint-explaination">
<p>The steps involved in a journey are described using
touchpoints which can be a communication (two participants) or
an action (one participant).<br><br>
How many Touchpoints are there from the beginning to the end of
the service?
Please add all necessary touchpoints.
</div>
<div class="refreshBtn-container">
<span class='refresh-description'>If you did any changes in actors, click
<button type="button" class="btn btn-light btn-sm border refresh"
onclick="refreshActors()">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z" />
<path
d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z" />
</svg>
</button>
to refresh the lists.
</span>
<p><small><strong>NB: </strong>Please choose your Actors again after refreshing.</small>
</p>
</div>
<div id="touchpoint-container"></div>
<div class="button-add">
<button type="button" class="btn btn-light bt border add" onclick="createTouchpoint()">
<span class="button-text">Add new touchpoint</span>
</button>
</div>
</div><br><br>
</div>
<div class="modal-footer order-container">
<p class="light-font">
Touchpoints's order in diagram - sorted by time :
</p>
<nav>
<ul class="pagination bottom-nav nav-order">
</ul>
</nav>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-bs-dismiss="modal"
onclick="createSwimlane()">Submit</button>
</div>
</div>
</div>
</div>
</div>
<!-- Mask layer -->
<div class="modal-backdrop fade show">
<div class="modal-content mask-layer">
<p class="mask-title">CJML Diagram Generator</p>
<div class="mask-btn-start">
<button class="btn btn-light mask-btn start-beginning" data-bs-toggle="modal"
data-bs-target="#staticBackdrop" onclick="removeMask()">Start</button>
</div>
<button class="btn mask-btn link-btn" onclick="readDocs()">Read the User Guide</button>
<button class="btn mask-btn link-btn" onclick="readMore()">Learn more about CJML</button>
<div style="height: 20px;"></div>
<p class="" style="font-size: 10px; text-align: center; color: steelblue;">CJML v1.1 by SINTEF Digital is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.</pclass=mask-btn>
</div>
</div>
<!-- ------------------------------------------------------------------------------- -->
<script src="function/variable.js"></script>
<script src="function/actors.js"></script>
<script src="function/touchpoints.js"></script>
<script src="function/data-process.js"></script>
<script src="function/diagram.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.0/html2canvas.min.js"></script>
<script src="function/exportXML.js"></script>
<script src="function/arrow.js"></script>
<script src="function/overview.js"></script>
<script src="function/mask.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/jquery/1.12.1/jquery.min.js"></script>
<script src="function/exportPng.js"></script>
</body>
</html>