Subversion Repositories SmartDukaan

Rev

Rev 30094 | Rev 31002 | Go to most recent revision | Show entire file | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed

Rev 30094 Rev 31001
Line 1... Line -...
1 
	<h3 style="margin-top:-2px;margin-bottom:24px"><strong>My Performance</strong></h3>
 - 
 
2 
	<div class="col-lg-5">
 1 
<div class="col-lg-5">
3 
		<h4 style="margin-top:-2px;margin-bottom:6px"><strong>Customer Rating</strong></h4>
 2 
    <h4 style="margin-top:-2px;margin-bottom:6px"><strong>Customer Rating</strong></h4>
4 
		<table class="table table-condensed indianflag">
 3 
    <table class="table table-condensed indianflag">
5 
			  <tbody>
 4 
        <tbody>
6 
			    <tr class="current">
 5 
        <tr class="current">
7 
			      <td>Current Month</td>
 6 
            <td>Current Month</td>
8 
			      <td>
 7 
            <td>
9 
			        <div class="stars-outer">
 8 
                <div class="stars-outer">
10 
			          <div class="stars-inner"></div>
 9 
                    <div class="stars-inner"></div>
11 
			        </div>
 10 
                </div>
12 
			      </td>
 11 
            </td>
13 
			      <td>$currentMonthRating/5</td>
 12 
            <td>$currentMonthRating/5</td>
14 
			    </tr>
 13 
        </tr>
15 
			    <tr class="last">
 14 
        <tr class="last">
16 
			      <td>Last Month</td>
 15 
            <td>Last Month</td>
17 
			      <td>
 16 
            <td>
18 
			        <div class="stars-outer">
 17 
                <div class="stars-outer">
19 
			          <div class="stars-inner"></div>
 18 
                    <div class="stars-inner"></div>
20 
			        </div>
 19 
                </div>
21 
			      </td>
 20 
            </td>
22 
			      <td>$lastMonthRating/5</td>
 21 
            <td>$lastMonthRating/5</td>
23 
			    </tr>
 22 
        </tr>
24 
			    <tr class="tilldate">
 23 
        <tr class="tilldate">
25 
			      <td>Till Date</td>
 24 
            <td>Till Date</td>
26 
			      <td>
 25 
            <td>
27 
			        <div class="stars-outer">
 26 
                <div class="stars-outer">
28 
			          <div class="stars-inner"></div>
 27 
                    <div class="stars-inner"></div>
29 
			        </div>
 28 
                </div>
30 
			      </td>
 29 
            </td>
31 
			      <td>$ratingTillDate/5</td>
 30 
            <td>$ratingTillDate/5</td>
32 
			    </tr>
 31 
        </tr>
33 
			  </tbody>
 32 
        </tbody>
34 
		</table>
33 
    </table>
35 
		</div>
 34 
</div>
36
35 
 
37
36 
 
38 
	<div class="col-lg-7">
 37 
<div class="col-lg-7">
39
38 
 
40 
	     <div class="row" style="width=50%">
 39 
    <div class="row" style="width:50%">
41
- 
 
- 
 
 40 
 
42 
                       	<select class="form-control input-sm" id = "performance-months"  name="months" placeholder="months" style="width:50%; margin:auto;">
 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>
 43 
            <option value="" disabled selected>month</option>
44 
							#foreach($mVM in $monthValueMap.entrySet())
 44 
            #foreach($mVM in $monthValueMap.entrySet())
45 
							#if($mVM.getKey()== $month )
 45 
                #if($mVM.getKey()== $month )
46 
		             		<option value="$mVM.getKey()" selected>$mVM.getValue()</option>
 46 
                    <option value="$mVM.getKey()" selected>$mVM.getValue()</option>
47 
		             		#else
 47 
                #else
48 
		             		<option value="$mVM.getKey()">$mVM.getValue()</option>
 48 
                    <option value="$mVM.getKey()">$mVM.getValue()</option>
49 
		             		#end
 49 
                #end
50 
		             		#end
 50 
            #end
51 
		                   	</select>
51 
        </select>
52 
		           	</div>
52 
    </div>
53
53 
 
54 
	<div class="row">
 54 
    <div class="row">
55 
			<div class="col-lg-6">
 55 
        <div class="col-lg-6">
56 
				<canvas data-type="radial-gauge" id="hygeine"
 56 
            <canvas data-type="radial-gauge" id="hygeine"
57 
				    data-width="200",
 57 
                    data-width="200" ,
58 
				    data-height="200"
 58 
                    data-height="200"
59 
				    data-title="Hygeine"
 59 
                    data-title="Hygeine"
60 
				    data-units="${hygienePercentage}%"
 60 
                    data-units="${hygienePercentage}%"
61 
				    data-min-value="0"
 61 
                    data-min-value="0"
62 
				    data-max-value="100"
 62 
                    data-max-value="100"
63 
					data-value="${hygienePercentage}"
 63 
                    data-value="${hygienePercentage}"
64 
				    data-major-ticks="0,20,40,60,80,100"
 64 
                    data-major-ticks="0,20,40,60,80,100"
65 
				    data-minor-ticks="2"
 65 
                    data-minor-ticks="2"
66 
				    data-stroke-ticks="true"
 66 
                    data-stroke-ticks="true"
67 
				    data-highlights='[
 67 
                    data-highlights='[
68 
					{"from": 0, "to": 80, "color": "red"},
 68 
					{"from": 0, "to": 80, "color": "red"},
69 
					{"from": 80, "to": 90, "color": "yellow"},
 69 
					{"from": 80, "to": 90, "color": "yellow"},
70 
					{"from": 90, "to": 100, "color": "green"}
 70 
					{"from": 90, "to": 100, "color": "green"}
71 
				    ]',
 71 
				    ]' ,
72 
					data-value-box="false"
 72 
                    data-value-box="false"
73 
				    data-color-plate="#fff"
 73 
                    data-color-plate="#fff"
74 
				    data-border-shadow-width="0"
 74 
                    data-border-shadow-width="0"
75 
				    data-borders="false"
 75 
                    data-borders="false"
76 
				    data-needle-type="arrow"
 76 
                    data-needle-type="arrow"
77 
				    data-needle-width="2"
 77 
                    data-needle-width="2"
78 
				    data-needle-circle-size="7"
 78 
                    data-needle-circle-size="7"
79 
				    data-font-value-size="42"
 79 
                    data-font-value-size="42"
80 
				    data-font-title-size="42"
 80 
                    data-font-title-size="42"
81 
				    data-font-units-size="42"
 81 
                    data-font-units-size="42"
82 
				    data-needle-circle-outer="true"
 82 
                    data-needle-circle-outer="true"
83 
				    data-needle-circle-inner="false"
 83 
                    data-needle-circle-inner="false"
84 
				    data-animation-duration="1500"
 84 
                    data-animation-duration="1500"
85 
				    data-animation-rule="linear"
 85 
                    data-animation-rule="linear"
86 
				></canvas>
 86 
            ></canvas>
87
87 
 
88 
			</div>
 88 
        </div>
89
89 
 
90
90 
 
91 
			<div class="col-lg-6">
 91 
        <div class="col-lg-6">
92 
				<canvas data-type="radial-gauge" id="investment"
 92 
            <canvas data-type="radial-gauge" id="investment"
93 
				    data-width="200"
 93 
                    data-width="200"
94 
				    data-height="200"
 94 
                    data-height="200"
95 
				    data-title="Investments"
 95 
                    data-title="Investments"
96 
					data-units="${investments.get('okDays')}/${dayOfMonth}"
 96 
                    data-units="${investments.get('okDays')}/${dayOfMonth}"
97 
					data-value="${investments.get('okDays')}"
 97 
                    data-value="${investments.get('okDays')}"
98 
				    data-min-value="0"
 98 
                    data-min-value="0"
99 
				    data-major-ticks=[]
 99 
                    data-major-ticks=[]
100 
					data-max-value="${monthDays}"
 100 
                    data-max-value="${monthDays}"
101 
				    data-highlights='[
 101 
                    data-highlights='[
102 
					{"from": 0, "to": 7, "color": "red"},
 102 
					{"from": 0, "to": 7, "color": "red"},
103 
					{"from": 7, "to": 12, "color": "yellow"},
 103 
					{"from": 7, "to": 12, "color": "yellow"},
104 
					{"from": 12, "to": ${monthDays}, "color": "green"}
 104 
					{"from": 12, "to": ${monthDays}, "color": "green"}
105 
				    ]'
 105 
				    ]'
106 
				data-value-box="false"
 106 
                    data-value-box="false"
107 
				    data-color-plate="#fff"
 107 
                    data-color-plate="#fff"
108 
				    data-border-shadow-width="0"
 108 
                    data-border-shadow-width="0"
109 
				    data-borders="false"
 109 
                    data-borders="false"
110 
				    data-needle-type="arrow"
 110 
                    data-needle-type="arrow"
111 
				    data-needle-width="2"
 111 
                    data-needle-width="2"
112 
				    data-needle-circle-size="7"
 112 
                    data-needle-circle-size="7"
113 
				    data-font-value-size="42"
 113 
                    data-font-value-size="42"
114 
				    data-font-title-size="42"
 114 
                    data-font-title-size="42"
115 
				    data-font-units-size="42"
 115 
                    data-font-units-size="42"
116
116 
 
117 
				    data-needle-circle-outer="true"
 117 
                    data-needle-circle-outer="true"
118 
				    data-needle-circle-inner="false"
 118 
                    data-needle-circle-inner="false"
119 
				    data-animation-duration="1500"
 119 
                    data-animation-duration="1500"
120 
				    data-animation-rule="linear"
 120 
                    data-animation-rule="linear"
121 
				></canvas>
 121 
            ></canvas>
122 
			</div>
 122 
        </div>
123 
	</div>
 123 
    </div>
124
124 
 
125 
	</div>
 125 
</div>
126 
	<script>
 126 
<script>
127 
	 starTotal = 5;
 127 
    starTotal = 5;
128 
        ratings = {
 128 
    ratings = {
129 
            current: $currentMonthRating,
 129 
        current: $currentMonthRating,
130 
            last: $lastMonthRating,
 130 
        last: $lastMonthRating,
131 
            tilldate: $ratingTillDate
 131 
        tilldate: $ratingTillDate
132 
        };
 132 
    };
133 
        for (const rating in ratings) {
 133 
    for (const rating in ratings) {
134 
            // 2
 134 
        // 2
135 
            const starPercentage = (ratings[rating] / starTotal) * 100;
 135 
        const starPercentage = (ratings[rating] / starTotal) * 100;
136 
            // 3
 136 
        // 3
137 
            const starPercentageRounded = `${starPercentage}%`;
 137 
        const starPercentageRounded = `${starPercentage}%`;
138 
            // 4
 138 
        // 4
139 
            document.querySelector(`.${rating} .stars-inner`).style.width = starPercentageRounded;
 139 
        document.querySelector(`.${rating} .stars-inner`).style.width = starPercentageRounded;
140 
        }
 140 
    }
141 
	</script>
 141 
</script>
142
142 
 
143 
<script type="text/javascript">
 143 
<script type="text/javascript">
- 
 
 144 
    $(document).ready(function () {
144 
	var gauge1 = new RadialGauge({
 145 
        var gauge1 = new RadialGauge({
145 
	    renderTo: 'hygeine'
 146 
            renderTo: 'hygeine'
146 
	}).draw();
 147 
        }).draw();
147 
	var gauge2 = new RadialGauge({
 148 
        var gauge2 = new RadialGauge({
148 
	    renderTo: 'investment'
 149 
            renderTo: 'investment'
149 
	}).draw();
 150 
        }).draw();
- 
 
 151 
 
- 
 
 152 
    });
150 
</script>
 153 
</script>
151 

            154