Subversion Repositories SmartDukaan

Rev

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

Rev 33934 Rev 33939
Line 1... Line 1...
1 
<style>
 1 
<style>
2 
 
 - 
 
3 
    table th {
 2 
    table th {
4 
        text-align: center;
 3 
        text-align: center;
5 
    }
 4 
    }
6 
 
 5 
 
7 
    #rbm-arr-table td, #rbm-arr-table th {
 6 
    #rbm-arr-table td, #rbm-arr-table th {
8 
        padding: 0.35rem;
 7 
        padding: 0.35rem;
9 
        font-size: 20px;
 8 
        font-size: 20px;
10 
    }
 9 
    }
11 
 
 10 
 
12 
 
 - 
 
13 
    .rb-name {
 11 
    .rb-name {
14 
        font-size: 17px;
 12 
        font-size: 17px;
15 
        font-weight: bold;
 13 
        font-weight: bold;
16 
    }
 14 
    }
- 
 
 15 
 
- 
 
 16 
    #rbm-arr-table td {
- 
 
 17 
        text-align: center;
- 
 
 18 
        background-size: 100% 100%;
- 
 
 19 
        background-repeat: no-repeat;
- 
 
 20 
        color: #000; /* Ensure text remains visible */
- 
 
 21 
        font-weight: 400;
- 
 
 22 
    }
- 
 
 23 
 
17 
</style>
 24 
</style>
18 
 
 25 
 
19 
<section class="wrapper">
 26 
<section class="wrapper">
20 
    ##    <div class="row">
 27 
    ##    <div class="row">
21 
    ##        <div class="col-lg-12">
 28 
    ##        <div class="col-lg-12">
Line 27... Line 34...
27 
    ##        </div>
 34 
    ##        </div>
28 
    ##    </div>
 35 
    ##    </div>
29 
 
 36 
 
30 
    <div class="row">
 37 
    <div class="row">
31 
        ##        <div class="col-lg-4">
 38 
        ##        <div class="col-lg-4">
32 
        ##         <table>
 39 
        ##            <table>
33 
        ##             <tr>
 40 
        ##                <tr>
34 
        ##                 <td style="margin-right: 10px;"><input type="date" class="form-control arr-start_date" placeholder="select date"> </td>
 41 
        ##                    <td><input type="date" class="form-control arr-start_date" placeholder="select date"></td>
35 
        ##                 <td><button type="button" class="btn btn-info arr-button-mk">Submit</button> </td>
 42 
        ##                    <td><button type="button" class="btn btn-info arr-button-mk">Submit</button></td>
36 
        ##             </tr>
 43 
        ##                </tr>
37 
        ##         </table>
 44 
        ##            </table>
38 
        ##        </div>
 45 
        ##        </div>
39 
        ##        <div class="col-lg-8"></div>
 46 
        ##        <div class="clearfix"></div>
40 
        <div class="clearfix"></div>
 - 
 
41 
        <br>
 47 
        ##        <br>
42 
        <div class="col-lg-12">
 48 
        <div class="col-lg-12">
43 
            <table id="rbm-arr-table" class="table table-border table-condensed table-bordered" style="width:100%">
 49 
            <table id="rbm-arr-table" class="table table-border table-condensed table-bordered" style="width:100%">
44 
 
 - 
 
45 
                <thead>
 50 
                <thead>
46 
                <tr>
 51 
                <tr>
47 
                    <th class="text-left">RBM</th>
 52 
                    <th>RBM</th>
48 
                    <th class="text-center">Total (ACH/TGT)</th>
 53 
                    <th>Total (ACH/TGT)</th>
- 
 
 54 
                    <th>%</th>
49 
                    <th class="text-center">HID (ACH/TGT)</th>
 55 
                    <th>HID (ACH/TGT)</th>
- 
 
 56 
                    <th>%</th>
50 
                    <th class="text-center">RUN (ACH/TGT)</th>
 57 
                    <th>RUN (ACH/TGT)</th>
- 
 
 58 
                    <th>%</th>
51 
                    <th class="text-center">SLOW (ACH/TGT)</th>
 59 
                    <th>SLOW (ACH/TGT)</th>
- 
 
 60 
                    <th>%</th>
52 
                    <th class="text-center">EOL (ACH/TGT)</th>
 61 
                    <th>EOL (ACH/TGT)</th>
- 
 
 62 
                    <th>%</th>
53 
                    <th class="text-center">Other (ACH/TGT)</th>
 63 
                    <th>Other (ACH/TGT)</th>
54 
 
 - 
 
- 
 
 64 
                    <th>%</th>
55 
                </tr>
 65 
                </tr>
56 
 
 - 
 
57 
                </thead>
 66 
                </thead>
58 
                #foreach($target in $rbmArrViewModels)
 67 
                <tbody>
59 
                    <tbody>
 68 
                    #foreach($target in $rbmArrViewModels)
60 
                    <tr>
 69 
                    <tr>
61 
                        <td>$target.getRbmName()- $target.getWarehouseName()</td>
 70 
                        <td>$target.getRbmName()- $target.getWarehouseName()</td>
62 
 
 - 
 
63 
                        <td class="text-center">
 - 
 
64 
                            <span class="achieved-cell">$target.getTotalAchievedTarget()</span> / <span
 71 
                        <td><span class="achieved-cell">$target.getTotalAchievedTarget()</span> / <span
65 
                                class="target-cell">$target.getTodayTarget()</span>
 72 
                                class="target-cell">$target.getTodayTarget()</span></td>
66 
                        </td>
 - 
 
67 
 
 - 
 
68 
                        <td class="text-center">
 73 
                        <td class="total-percent"></td>
69 
                            <span class="achieved-cell">$target.getTodayAchievedHidTarget()</span> / <span
 74 
                        <td><span class="achieved-cell">$target.getTodayAchievedHidTarget()</span> / <span
70 
                                class="target-cell">$target.getTodayHidTarget()</span>
 75 
                                class="target-cell">$target.getTodayHidTarget()</span></td>
71 
                        </td>
 - 
 
72 
 
 - 
 
73 
                        <td class="text-center">
 76 
                        <td class="hid-percent"></td>
74 
                            <span class="achieved-cell">$target.getTodayAchievedFastMovingTarget()</span> / <span
 77 
                        <td><span class="achieved-cell">$target.getTodayAchievedFastMovingTarget()</span> / <span
75 
                                class="target-cell">$target.getTodayFastMovingTarget()</span>
 78 
                                class="target-cell">$target.getTodayFastMovingTarget()</span></td>
76 
                        </td>
 - 
 
77 
 
 - 
 
78 
                        <td class="text-center">
 79 
                        <td class="run-percent"></td>
79 
                            <span class="achieved-cell">$target.getTodayAchievedSlowMovingTarget()</span> / <span
 80 
                        <td><span class="achieved-cell">$target.getTodayAchievedSlowMovingTarget()</span> / <span
80 
                                class="target-cell">$target.getTodaySlowMovingTarget()</span>
 81 
                                class="target-cell">$target.getTodaySlowMovingTarget()</span></td>
81 
                        </td>
 - 
 
82 
 
 - 
 
83 
                        <td class="text-center">
 82 
                        <td class="slow-percent"></td>
84 
                            <span class="achieved-cell">$target.getTodayAchievedEolTarget()</span> / <span
 83 
                        <td><span class="achieved-cell">$target.getTodayAchievedEolTarget()</span> / <span
85 
                                class="target-cell">$target.getTodayEolTarget()</span>
 84 
                                class="target-cell">$target.getTodayEolTarget()</span></td>
86 
                        </td>
 - 
 
87 
 
 - 
 
88 
                        <td class="text-center">
 85 
                        <td class="eol-percent"></td>
89 
                            <span class="achieved-cell">$target.getTodayAchievedOtherMovingTarget()</span> / <span
 86 
                        <td><span class="achieved-cell">$target.getTodayAchievedOtherMovingTarget()</span> / <span
90 
                                class="target-cell">$target.getTodayOtherMovingTarget()</span>
 87 
                                class="target-cell">$target.getTodayOtherMovingTarget()</span></td>
91 
                        </td>
 88 
                        <td class="other-percent"></td>
92 
 
 - 
 
93 
 
 - 
 
94 
                    </tr>
 89 
                    </tr>
95 
                    </tbody>
 90 
                    #end
96 
                #end
 91 
                </tbody>
97 
 
 - 
 
98 
            </table>
 92 
            </table>
99 
        </div>
 93 
        </div>
100 
 
 - 
 
101 
 
 - 
 
102 
    </div>
 94 
    </div>
103 
 
 - 
 
104 
 
 - 
 
105 
</section>
 95 
</section>
106 
 
 96 
 
107 
<script>
 97 
<script>
108 
    // Function to format the numbers in lakh (L)
 - 
 
109 
    function formatValueInLakh(value) {
 98 
    function formatValueInLakh(value) {
110 
        return (value / 100000).toFixed(1) + 'L'; // Divide by 100,000 and append 'L'
 99 
        return (value / 100000).toFixed(1) + 'L';
111 
    }
 100 
    }
112 
 
 101 
 
113 
    // Function to format all target and achieved values in the table and apply color conditionally
 - 
 
114 
    function formatTargets() {
 102 
    function formatTargets() {
115 
        // Select all rows to compare target and achieved cells
 - 
 
116 
        const rows = document.querySelectorAll('#rbm-arr-table tbody tr');
 103 
        const rows = document.querySelectorAll('#rbm-arr-table tbody tr');
117 
 
 104 
 
118 
        rows.forEach(row => {
 105 
        rows.forEach(row => {
119 
            // Get all cells in the current row with target and achieved spans
 - 
 
120 
            const cells = row.querySelectorAll('td');
 106 
            const cells = row.querySelectorAll('td');
121 
 
 107 
 
122 
            cells.forEach(cell => {
 108 
            cells.forEach(cell => {
123 
                // Find the target and achieved spans in the current cell
 - 
 
124 
                const targetSpan = cell.querySelector('.target-cell');
 - 
 
125 
                const achievedSpan = cell.querySelector('.achieved-cell');
 109 
                const achievedSpan = cell.querySelector('.achieved-cell');
- 
 
 110 
                const targetSpan = cell.querySelector('.target-cell');
126 
 
 111 
 
127 
                if (targetSpan && achievedSpan) {
 112 
                if (achievedSpan && targetSpan) {
128 
                    // Convert text content to numeric values
 - 
 
129 
                    let targetValue = parseFloat(targetSpan.textContent.replace(/[^\d.-]/g, ''));
 113 
                    const achievedValue = parseFloat(achievedSpan.textContent.replace(/[^\d.-]/g, ''));
130 
                    let achievedValue = parseFloat(achievedSpan.textContent.replace(/[^\d.-]/g, ''));
 114 
                    const targetValue = parseFloat(targetSpan.textContent.replace(/[^\d.-]/g, ''));
131 
 
 115 
 
132 
                    // Format both spans to lakh
 116 
                    // Format values in lakh
133 
                    if (!isNaN(targetValue)) targetSpan.textContent = formatValueInLakh(targetValue);
 - 
 
134 
                    if (!isNaN(achievedValue)) achievedSpan.textContent = formatValueInLakh(achievedValue);
 117 
                    if (!isNaN(achievedValue)) achievedSpan.textContent = formatValueInLakh(achievedValue);
- 
 
 118 
                    if (!isNaN(targetValue)) targetSpan.textContent = formatValueInLakh(targetValue);
135 
 
 119 
 
- 
 
 120 
                    const percentCell = cell.nextElementSibling;
- 
 
 121 
                    if (percentCell && targetValue > 0) {
136 
                    // Apply green background to the entire cell if achieved value is greater than or equal to target
 122 
                        const percentage = ((achievedValue / targetValue) * 100).toFixed(1);
- 
 
 123 
                        percentCell.textContent = percentage + '%';
- 
 
 124 
 
- 
 
 125 
                        // Determine background color based on percentage
- 
 
 126 
                        let color;
- 
 
 127 
                        if (percentage <= 40) {
- 
 
 128 
                            color = '#F56983FF'; // Orange for <= 40%
137 
                    if (!isNaN(targetValue) && !isNaN(achievedValue) && achievedValue >= targetValue) {
 129 
                        } else if (percentage > 40 && percentage <= 75) {
- 
 
 130 
                            color = '#f2c947e8'; // Yellow for 41% - 75%
- 
 
 131 
                        } else {
138 
                        cell.style.backgroundColor = '#abf2abd4'; // Apply green to the <td>
 132 
                            color = '#82ef8299'; // Green for > 75%
- 
 
 133 
                        }
- 
 
 134 
 
- 
 
 135 
                        // Apply gradient background with the color
- 
 
 136 
                        percentCell.style.background = `linear-gradient(to right, ${color} ${percentage}%, transparent ${percentage}%)`;
- 
 
 137 
                    } else if (percentCell) {
- 
 
 138 
                        percentCell.textContent = 'N/A';
- 
 
 139 
                        percentCell.style.background = 'none';
139 
                    }
 140 
                    }
140 
                }
 141 
                }
141 
            });
 142 
            });
142 
        });
 143 
        });
143 
    }
 144 
    }
144 
 
 145 
 
145 
    // Run the function when the page loads or after data is dynamically added to the table
 - 
 
146 
    window.onload = formatTargets; // Call when the page is loaded
 146 
    window.onload = formatTargets;
147 
 
 - 
 
148 
</script>
 147 
</script>
149 
 
 148 
 
150 
 
 149 
 
151 
 
 - 
 
152 
 
 - 
 
153 
 
 -