-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathscrum_card_generator.html
129 lines (128 loc) · 4.95 KB
/
scrum_card_generator.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
<!DOCTYPE html>
<html itemtype="http://schema.org/WebPage" itemscope="">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://js-tables.googlecode.com/svn/trunk/jquery.csv.js"></script>
<style type="text/css">
.content
{
width: 600px;
margin: auto;
}
.story_item, .story_description
{
position: relative;
background-color: rgba(100,100,100,0.2);
border: 1px solid rgba(100,100,100,0.2);
padding: 15px;
border-radius: 5px 5px 5px 5px;
margin-bottom: 20px;
min-height: 200px;
}
.story_item_text
{
width: 470px;
}
.identification
{
position: absolute;
top: 10px;
left: 10px;
}
.identification span
{
display:none;
}
.numbers
{
width: 80px;
position: absolute;
top: 47px;
right: 15px;
padding: 10px;
border-radius: 5px 5px 5px 5px;
}
.numbers dd
{
margin: 0px;
padding: 5px;
text-align:center;
border: 1px solid rgba(100,100,100,0.2);
border-radius: 5px 5px 5px 5px;
}
dt
{
font-weight: bolder;
}
textarea
{
width: 600px;
height: 300px;
}
.page_break
{
page-break-before:always;
}
</style>
<script>
$(document).ready(function(){
$('form').submit(function(event) {event.preventDefault();});
$(".button_generate").click(function(event){
event.preventDefault();
csv_data = $.csv()($("#csv_data").val());
$.each(csv_data, function(index, value) {
template = '<article class="story_item"><header><h2>:title</h2></header><dl class="story_item_text"><dt>User Story</dt><dd>:user_story</dd></dl><dl class="story_item_text"><dt>How to test</dt><dd>:how_to_test</dd></dl><section class="identification"><span>Id</span>#:id</section><section class="numbers"><dl><dt>Area</dt><dd>:area</dd></dl><dl><dt>Estimate</dt><dd>:estimate</dd></dl></section></article>';
template = template.replace(":id",value[0] === undefined ? " " : value[0]);
template = template.replace(":title",value[1] === undefined ? " " : value[1]);
template = template.replace(":user_story",value[2] === undefined ? " " : value[2]);
template = template.replace(":how_to_test",value[3] === undefined ? " " : value[3]);
template = template.replace(":area",value[4] === undefined ? " " : value[4]);
template = template.replace(":estimate",value[5] === undefined ? " " : value[5]);
$(".content").append(template);
});
$(".story_item:nth-child(3n+2)").addClass("page_break")
$(".story_item:first").removeClass("page_break")
$("form").hide();
});
});
</script>
</head>
<body>
<div class="content">
<form>
<article class="story_description">
<header><h1>Scrum card generator</h1></header>
<p>The input of the file is 6 columns csv formatted text</p>
<dl>
<dt>Card number</dt>
<dd>Card number of your choice that will displayed in the upper corner</dd>
</dl>
<dl>
<dt>Title</dt>
<dd>Title of the card that just sums up what the story is about</dd>
</dl>
<dl>
<dt>User story</dt>
<dd>The actual user story</dd>
</dl>
<dl>
<dt>How to demo</dt>
<dd>How to demo describes which steps are needed to be made and which result is to be expected</dd>
</dl>
<dl>
<dt>Area</dt>
<dd>An area if to group the story with.</dd>
</dl>
<dl>
<dt>Estimate</dt>
<dd>The estimate of difficulty and size of the story.</dd>
</dl>
</article>
<textarea id="csv_data"></textarea>
<input class="button_generate" type="button" value="Generate" />
</form>
</div>
</body>
</html>