| 33501 |
ranu |
1 |
##<div class="col-lg-5">
|
|
|
2 |
#### <h4 style="margin-top:-2px;margin-bottom:6px"><strong>#springMessage("dashboard.myperformance")</strong></h4>
|
|
|
3 |
#### <table class="table table-condensed indianflag">
|
|
|
4 |
#### <tbody>
|
|
|
5 |
#### <tr class="current">
|
|
|
6 |
#### <td>#springMessage("dashboard.currentmonth")</td>
|
|
|
7 |
#### <td>
|
|
|
8 |
#### <div class="stars-outer">
|
|
|
9 |
#### <div class="stars-inner"></div>
|
|
|
10 |
#### </div>
|
|
|
11 |
#### </td>
|
|
|
12 |
#### <td>$currentMonthRating/5</td>
|
|
|
13 |
#### </tr>
|
|
|
14 |
#### <tr class="last">
|
|
|
15 |
#### <td>Last Month</td>
|
|
|
16 |
#### <td>
|
|
|
17 |
#### <div class="stars-outer">
|
|
|
18 |
#### <div class="stars-inner"></div>
|
|
|
19 |
#### </div>
|
|
|
20 |
#### </td>
|
|
|
21 |
#### <td>$lastMonthRating/5</td>
|
|
|
22 |
#### </tr>
|
|
|
23 |
#### <tr class="tilldate">
|
|
|
24 |
#### <td>#springMessage("dashboard.tilldate")</td>
|
|
|
25 |
#### <td>
|
|
|
26 |
#### <div class="stars-outer">
|
|
|
27 |
#### <div class="stars-inner"></div>
|
|
|
28 |
#### </div>
|
|
|
29 |
#### </td>
|
|
|
30 |
#### <td>$ratingTillDate/5</td>
|
|
|
31 |
#### </tr>
|
|
|
32 |
#### </tbody>
|
|
|
33 |
#### </table>
|
|
|
34 |
##</div>
|
| 31020 |
tejbeer |
35 |
|
| 31001 |
amit.gupta |
36 |
|
| 33501 |
ranu |
37 |
<div>
|
| 31001 |
amit.gupta |
38 |
|
| 33501 |
ranu |
39 |
## <div class="row" style="width:50%">
|
|
|
40 |
##
|
|
|
41 |
## <select class="form-control input-sm" id="performance-months" name="months" placeholder="months"
|
|
|
42 |
## style="width:50%; margin:auto;">
|
|
|
43 |
## <option value="" disabled selected>month</option>
|
|
|
44 |
## #foreach($mVM in $monthValueMap.entrySet())
|
|
|
45 |
## #if($mVM.getKey()== $month )
|
|
|
46 |
## <option value="$mVM.getKey()" selected>$mVM.getValue()</option>
|
|
|
47 |
## #else
|
|
|
48 |
## <option value="$mVM.getKey()">$mVM.getValue()</option>
|
|
|
49 |
## #end
|
|
|
50 |
## #end
|
|
|
51 |
## </select>
|
|
|
52 |
## </div>
|
| 31001 |
amit.gupta |
53 |
|
|
|
54 |
<div class="row">
|
| 33501 |
ranu |
55 |
## <div class="col-lg-6">
|
|
|
56 |
## <canvas data-type="radial-gauge" id="hygeine"
|
|
|
57 |
## data-width="200" ,
|
|
|
58 |
## data-height="200"
|
|
|
59 |
## data-title="Hygeine"
|
|
|
60 |
## data-units="${hygienePercentage}%"
|
|
|
61 |
## data-min-value="0"
|
|
|
62 |
## data-max-value="100"
|
|
|
63 |
## data-value="${hygienePercentage}"
|
|
|
64 |
## data-major-ticks="0,20,40,60,80,100"
|
|
|
65 |
## data-minor-ticks="2"
|
|
|
66 |
## data-stroke-ticks="true"
|
|
|
67 |
## data-highlights='[
|
|
|
68 |
## {"from": 0, "to": 80, "color": "red"},
|
|
|
69 |
## {"from": 80, "to": 90, "color": "yellow"},
|
|
|
70 |
## {"from": 90, "to": 100, "color": "green"}
|
|
|
71 |
## ]' ,
|
|
|
72 |
## data-value-box="false"
|
|
|
73 |
## data-color-plate="#fff"
|
|
|
74 |
## data-border-shadow-width="0"
|
|
|
75 |
## data-borders="false"
|
|
|
76 |
## data-needle-type="arrow"
|
|
|
77 |
## data-needle-width="2"
|
|
|
78 |
## data-needle-circle-size="7"
|
|
|
79 |
## data-font-value-size="42"
|
|
|
80 |
## data-font-title-size="42"
|
|
|
81 |
## data-font-units-size="42"
|
|
|
82 |
## data-needle-circle-outer="true"
|
|
|
83 |
## data-needle-circle-inner="false"
|
|
|
84 |
## data-animation-duration="1500"
|
|
|
85 |
## data-animation-rule="linear"
|
|
|
86 |
## ></canvas>
|
|
|
87 |
##
|
|
|
88 |
## </div>
|
| 31001 |
amit.gupta |
89 |
|
| 33501 |
ranu |
90 |
<div class="col-lg-7">
|
| 33502 |
ranu |
91 |
<h4 style="margin-top:-2px;margin-bottom:24px"><strong>Banner for Shopfront</strong></h4>
|
| 33501 |
ranu |
92 |
<div class="form-group">
|
| 33504 |
ranu |
93 |
#if(!$printResources.isEmpty())
|
|
|
94 |
<div id="myCarousel" class="carousel slide" data-ride="carousel">
|
|
|
95 |
<!-- Wrapper for slides -->
|
|
|
96 |
<div class="carousel-inner text-center">
|
|
|
97 |
|
| 33501 |
ranu |
98 |
#set($first = true)
|
|
|
99 |
#foreach($printResource in $printResources)
|
|
|
100 |
<div class="item #if($first)active#set($first = false)#end">
|
|
|
101 |
<img src="$printResource.getThumbnailUrl()" alt="Los Angeles"
|
|
|
102 |
style="max-height:150px;width:auto;max-width: 100%;margin: auto;">
|
|
|
103 |
<div class="carousel-caption">
|
|
|
104 |
<br>
|
| 33502 |
ranu |
105 |
<button class="btn btn-danger btn-sm partner_print_resources">Get File !
|
|
|
106 |
</button>
|
| 33501 |
ranu |
107 |
</div>
|
|
|
108 |
</div>
|
|
|
109 |
#end
|
| 33504 |
ranu |
110 |
|
|
|
111 |
</div>
|
|
|
112 |
<!-- Left and right controls -->
|
|
|
113 |
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
|
|
|
114 |
<span class="glyphicon glyphicon-chevron-left"></span>
|
|
|
115 |
<span class="sr-only">Previous</span>
|
|
|
116 |
</a>
|
|
|
117 |
<a class="right carousel-control" href="#myCarousel" data-slide="next">
|
|
|
118 |
<span class="glyphicon glyphicon-chevron-right"></span>
|
|
|
119 |
<span class="sr-only">Next</span>
|
|
|
120 |
</a>
|
| 33501 |
ranu |
121 |
</div>
|
| 33504 |
ranu |
122 |
#end
|
|
|
123 |
#if($printResources.isEmpty())
|
|
|
124 |
<div class="form-group">
|
|
|
125 |
<img src="/resources/images/image-not-found.png"
|
|
|
126 |
style="max-height:150px;width:auto;max-width: 100%;margin: auto;">
|
|
|
127 |
</div>
|
|
|
128 |
#end
|
| 33501 |
ranu |
129 |
</div>
|
| 31001 |
amit.gupta |
130 |
</div>
|
| 33501 |
ranu |
131 |
<div class="col-lg-5">
|
|
|
132 |
<h4 style="margin-top:-2px;margin-bottom:24px"><strong>Investment</strong></h4>
|
| 31001 |
amit.gupta |
133 |
<canvas data-type="radial-gauge" id="investment"
|
|
|
134 |
data-width="200"
|
|
|
135 |
data-height="200"
|
|
|
136 |
data-title="Investments"
|
|
|
137 |
data-units="${investments.get('okDays')}/${dayOfMonth}"
|
|
|
138 |
data-value="${investments.get('okDays')}"
|
|
|
139 |
data-min-value="0"
|
|
|
140 |
data-major-ticks=[]
|
|
|
141 |
data-max-value="${monthDays}"
|
|
|
142 |
data-highlights='[
|
| 25654 |
amit.gupta |
143 |
{"from": 0, "to": 7, "color": "red"},
|
|
|
144 |
{"from": 7, "to": 12, "color": "yellow"},
|
|
|
145 |
{"from": 12, "to": ${monthDays}, "color": "green"}
|
|
|
146 |
]'
|
| 31001 |
amit.gupta |
147 |
data-value-box="false"
|
|
|
148 |
data-color-plate="#fff"
|
|
|
149 |
data-border-shadow-width="0"
|
|
|
150 |
data-borders="false"
|
|
|
151 |
data-needle-type="arrow"
|
|
|
152 |
data-needle-width="2"
|
|
|
153 |
data-needle-circle-size="7"
|
|
|
154 |
data-font-value-size="42"
|
|
|
155 |
data-font-title-size="42"
|
|
|
156 |
data-font-units-size="42"
|
|
|
157 |
|
|
|
158 |
data-needle-circle-outer="true"
|
|
|
159 |
data-needle-circle-inner="false"
|
|
|
160 |
data-animation-duration="1500"
|
|
|
161 |
data-animation-rule="linear"
|
|
|
162 |
></canvas>
|
|
|
163 |
</div>
|
|
|
164 |
</div>
|
|
|
165 |
|
|
|
166 |
</div>
|
|
|
167 |
<script>
|
|
|
168 |
starTotal = 5;
|
|
|
169 |
ratings = {
|
|
|
170 |
current: $currentMonthRating,
|
|
|
171 |
last: $lastMonthRating,
|
|
|
172 |
tilldate: $ratingTillDate
|
|
|
173 |
};
|
|
|
174 |
for (const rating in ratings) {
|
|
|
175 |
// 2
|
|
|
176 |
const starPercentage = (ratings[rating] / starTotal) * 100;
|
|
|
177 |
// 3
|
|
|
178 |
const starPercentageRounded = `${starPercentage}%`;
|
|
|
179 |
// 4
|
|
|
180 |
document.querySelector(`.${rating} .stars-inner`).style.width = starPercentageRounded;
|
|
|
181 |
}
|
|
|
182 |
</script>
|
| 31004 |
amit.gupta |
183 |
<script type="text/javascript" src="resources/js/gauge.min.js"></script>
|