Subversion Repositories SmartDukaan

Rev

Rev 33962 | Rev 33992 | Go to most recent revision | Details | Compare with Previous | Last modification | View Log | RSS feed

Rev Author Line No. Line
33991 ranu 1 
<link rel="stylesheet"
2 
      href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.1.0/daterangepicker.min.css"/>
3 
 
33951 ranu 4 
<style>
5 
    table th {
6 
        text-align: center;
7 
    }
8 
 
9 
    #rbm-arr-table td, #rbm-arr-table th {
10 
        padding: 0.35rem;
11 
        font-size: 20px;
12 
    }
13 
 
33953 ranu 14 
    .text-bold {
15 
        font-weight: bold !important;
16 
    }
17 
 
18 
    .text-bold span {
19 
        font-weight: bold;
20 
    }
21 
 
33951 ranu 22 
    .rb-name {
23 
        font-size: 17px;
24 
        font-weight: bold;
25 
    }
26 
 
27 
    #rbm-arr-table td {
28 
        text-align: center;
29 
        background-size: 100% 100%;
30 
        background-repeat: no-repeat;
31 
        color: #000; /* Ensure text remains visible */
32 
        font-weight: 400;
33 
    }
34 
 
35 
</style>
36 
 
33917 ranu 37 
<section class="wrapper">
38 
    <div class="row">
33991 ranu 39 
        <div class="col-md-12 text-right">
40 
            <table style="float:right;margin-bottom: 10px;">
41 
                <tr>
42 
                    <td>
43 
                        <input placeholder="Set Duration" name="rbmArrPeriod"
44 
                               id="rbmArrPeriod"
45 
                               type="text" value="" class="form-control input-sm" style="height: 34px;">
46 
                    </td>
47 
                    <td>
48 
                        <input class="btn btn-primary btn-sm sold-catalog-report"
49 
                               type="button"
50 
                               value="Download row data">
51 
                    </td>
52 
                </tr>
53 
            </table>
54 
        </div>
33917 ranu 55 
        <div class="col-lg-12">
56 
            <table id="rbm-arr-table" class="table table-border table-condensed table-bordered" style="width:100%">
57 
                <tr>
33939 ranu 58 
                    <th>RBM</th>
59 
                    <th>Total (ACH/TGT)</th>
60 
                    <th>%</th>
61 
                    <th>HID (ACH/TGT)</th>
62 
                    <th>%</th>
33956 ranu 63 
                    <th>FAST (ACH/TGT)</th>
64 
                    <th>%</th>
33939 ranu 65 
                    <th>RUN (ACH/TGT)</th>
66 
                    <th>%</th>
67 
                    <th>EOL (ACH/TGT)</th>
68 
                    <th>%</th>
69 
                    <th>Other (ACH/TGT)</th>
70 
                    <th>%</th>
33917 ranu 71 
                </tr>
33939 ranu 72 
                    #foreach($target in $rbmArrViewModels)
33917 ranu 73 
                    <tr>
33933 ranu 74 
                        <td>$target.getRbmName()- $target.getWarehouseName()</td>
33939 ranu 75 
                        <td><span class="achieved-cell">$target.getTotalAchievedTarget()</span> / <span
76 
                                class="target-cell">$target.getTodayTarget()</span></td>
77 
                        <td class="total-percent"></td>
78 
                        <td><span class="achieved-cell">$target.getTodayAchievedHidTarget()</span> / <span
79 
                                class="target-cell">$target.getTodayHidTarget()</span></td>
80 
                        <td class="hid-percent"></td>
81 
                        <td><span class="achieved-cell">$target.getTodayAchievedFastMovingTarget()</span> / <span
82 
                                class="target-cell">$target.getTodayFastMovingTarget()</span></td>
83 
                        <td class="run-percent"></td>
84 
                        <td><span class="achieved-cell">$target.getTodayAchievedSlowMovingTarget()</span> / <span
85 
                                class="target-cell">$target.getTodaySlowMovingTarget()</span></td>
86 
                        <td class="slow-percent"></td>
87 
                        <td><span class="achieved-cell">$target.getTodayAchievedEolTarget()</span> / <span
88 
                                class="target-cell">$target.getTodayEolTarget()</span></td>
89 
                        <td class="eol-percent"></td>
90 
                        <td><span class="achieved-cell">$target.getTodayAchievedOtherMovingTarget()</span> / <span
91 
                                class="target-cell">$target.getTodayOtherMovingTarget()</span></td>
92 
                        <td class="other-percent"></td>
33917 ranu 93 
                    </tr>
33939 ranu 94 
                    #end
33946 ranu 95 
                <!-- Add a row for totals -->
33942 ranu 96 
                <tr>
97 
                    <td><strong>Total</strong></td>
33953 ranu 98 
                    <td class="text-bold"><span class="achieved-cell">$totalAchieved </span> / <span
99 
                            class="target-cell">$totalTargetSum</span></td>
100 
                    <td class="total-percent text-bold"></td>
33951 ranu 101 
 
33953 ranu 102 
                    <td class="text-bold"><span class="achieved-cell">$totalHidAchievedSum</span> / <span
103 
                            class="target-cell">$totalHidSum</span></td>
104 
                    <td class="hid-percent text-bold"></td>
33951 ranu 105 
 
33953 ranu 106 
                    <td class="text-bold"><span class="achieved-cell">$totalFastAchievedSum</span> / <span
107 
                            class="target-cell">$totalFastSum</span></td>
108 
                    <td class="run-percent text-bold"></td>
33951 ranu 109 
 
33953 ranu 110 
                    <td class="text-bold"><span class="achieved-cell">$totalSlowAchievedSum</span> / <span
111 
                            class="target-cell">$totalSlowSum</span></td>
112 
                    <td class="slow-percent text-bold"></td>
33951 ranu 113 
 
33953 ranu 114 
                    <td class="text-bold"><span class="achieved-cell">$totalEolAchievedSum</span> / <span
115 
                            class="target-cell">$totalEolSum</span></td>
116 
                    <td class="eol-percent text-bold"></td>
33951 ranu 117 
 
33953 ranu 118 
                    <td class="text-bold"><span class="achieved-cell">$totalOtherAchievedSum</span> / <span
119 
                            class="target-cell">$totalOtherSum</span></td>
120 
                    <td class="other-percent text-bold"></td>
33942 ranu 121 
                </tr>
33951 ranu 122 
 
33917 ranu 123 
            </table>
124 
        </div>
125 
    </div>
33930 ranu 126 
</section>
33945 ranu 127 
 
33930 ranu 128 
<script>
33933 ranu 129 
    function formatValueInLakh(value) {
33939 ranu 130 
        return (value / 100000).toFixed(1) + 'L';
33930 ranu 131 
    }
132 
 
133 
    function formatTargets() {
134 
        const rows = document.querySelectorAll('#rbm-arr-table tbody tr');
33942 ranu 135 
        let totalAchieved = 0, totalTarget = 0;
136 
        let totalAchievedHid = 0, totalTargetHid = 0;
137 
        let totalAchievedRun = 0, totalTargetRun = 0;
138 
        let totalAchievedSlow = 0, totalTargetSlow = 0;
139 
        let totalAchievedEol = 0, totalTargetEol = 0;
140 
        let totalAchievedOther = 0, totalTargetOther = 0;
33930 ranu 141 
 
142 
        rows.forEach(row => {
33931 ranu 143 
            const cells = row.querySelectorAll('td');
33946 ranu 144 
            cells.forEach((cell, index) => {
145 
                const achievedSpan = cell.querySelector('.achieved-cell');
146 
                const targetSpan = cell.querySelector('.target-cell');
147 
                if (achievedSpan && targetSpan) {
148 
                    const achievedValue = parseFloat(achievedSpan.textContent.replace(/[^\d.-]/g, ''));
149 
                    const targetValue = parseFloat(targetSpan.textContent.replace(/[^\d.-]/g, ''));
33944 ranu 150 
 
33946 ranu 151 
                    // Add to totals
152 
                    if (index === 1) {
153 
                        totalAchieved += achievedValue || 0;
154 
                        totalTarget += targetValue || 0;
155 
                    } else if (index === 3) {
156 
                        totalAchievedHid += achievedValue || 0;
157 
                        totalTargetHid += targetValue || 0;
158 
                    } else if (index === 5) {
159 
                        totalAchievedRun += achievedValue || 0;
160 
                        totalTargetRun += targetValue || 0;
161 
                    } else if (index === 7) {
162 
                        totalAchievedSlow += achievedValue || 0;
163 
                        totalTargetSlow += targetValue || 0;
164 
                    } else if (index === 9) {
165 
                        totalAchievedEol += achievedValue || 0;
166 
                        totalTargetEol += targetValue || 0;
167 
                    } else if (index === 11) {
168 
                        totalAchievedOther += achievedValue || 0;
169 
                        totalTargetOther += targetValue || 0;
170 
                    }
33930 ranu 171 
 
33946 ranu 172 
                    // Format values in lakh
173 
                    if (!isNaN(achievedValue)) achievedSpan.textContent = formatValueInLakh(achievedValue);
174 
                    if (!isNaN(targetValue)) targetSpan.textContent = formatValueInLakh(targetValue);
33942 ranu 175 
 
33946 ranu 176 
                    const percentCell = cell.nextElementSibling;
177 
                    if (percentCell && targetValue > 0) {
178 
                        const percentage = ((achievedValue / targetValue) * 100).toFixed(1);
179 
                        percentCell.textContent = percentage + '%';
33931 ranu 180 
 
33946 ranu 181 
                        // Determine background color based on percentage
182 
                        let color;
33962 ranu 183 
                        if (percentage <= 1) {
184 
                            percentCell.style.color = `red`
185 
                        }
33946 ranu 186 
                        if (percentage <= 40) {
187 
                            color = '#F56983FF'; // Orange for <= 40%
188 
                        } else if (percentage > 40 && percentage <= 75) {
189 
                            color = '#f2c947e8'; // Yellow for 41% - 75%
190 
                        } else {
191 
                            color = '#82ef8299'; // Green for > 75%
192 
                        }
33945 ranu 193 
 
33946 ranu 194 
                        // Apply gradient background with the color
195 
                        percentCell.style.background = `linear-gradient(to right, ${color} ${percentage}%, transparent ${percentage}%)`;
196 
                    } else if (percentCell) {
33953 ranu 197 
                        percentCell.textContent = "-";
33946 ranu 198 
                        percentCell.style.background = 'none';
33931 ranu 199 
                    }
33946 ranu 200 
                }
33930 ranu 201 
            });
33946 ranu 202 
        });
33942 ranu 203 
 
33946 ranu 204 
    }
33944 ranu 205 
 
33958 ranu 206 
    function groupRowsByRbm() {
207 
        const rows = document.querySelectorAll('#rbm-arr-table tbody tr');
208 
        let currentRbm = null;
209 
        let rbmGroup = [];
210 
 
211 
        rows.forEach((row, index) => {
212 
            const rbmCell = row.cells[0];
213 
            if (!rbmCell) return;
214 
 
215 
            const rbmName = rbmCell.textContent.split('-')[0].trim(); // Extract RBM name
216 
 
217 
            if (rbmName !== currentRbm) {
218 
                // Apply border to the previous group
219 
                if (rbmGroup.length > 0) {
220 
                    applyBorderToGroup(rbmGroup);
221 
                }
222 
 
223 
                // Reset for new RBM
224 
                currentRbm = rbmName;
225 
                rbmGroup = [];
226 
            }
227 
 
228 
            // Add the row to the current group
229 
            rbmGroup.push(row);
230 
 
231 
            // Apply border to the last group
232 
            if (index === rows.length - 1 && rbmGroup.length > 0) {
233 
                applyBorderToGroup(rbmGroup);
234 
            }
235 
        });
236 
    }
237 
 
238 
    function applyBorderToGroup(group) {
239 
        if (group.length === 0) return;
240 
 
241 
        // Add border styles to the first and last rows in the group
242 
        //group[0].style.borderTop = '2px solid #000'; // Black border for start
243 
        group[group.length - 1].style.borderBottom = '2px solid #000'; // Black border for end
244 
    }
245 
 
246 
    window.onload = function () {
247 
        formatTargets(); // Format targets first
248 
        groupRowsByRbm(); // Group rows by RBM
249 
    };
250 
 
251 
 
33945 ranu 252 
</script>