Subversion Repositories SmartDukaan

##<div class="col-lg-5">
####    <h4 style="margin-top:-2px;margin-bottom:6px"><strong>#springMessage("dashboard.myperformance")</strong></h4>
####    <table class="table table-condensed indianflag">
####        <tbody>
####        <tr class="current">
####            <td>#springMessage("dashboard.currentmonth")</td>
####            <td>
####                <div class="stars-outer">
####                    <div class="stars-inner"></div>
####                </div>
####            </td>
####            <td>$currentMonthRating/5</td>
####        </tr>
####        <tr class="last">
####            <td>Last Month</td>
####            <td>
####                <div class="stars-outer">
####                    <div class="stars-inner"></div>
####                </div>
####            </td>
####            <td>$lastMonthRating/5</td>
####        </tr>
####        <tr class="tilldate">
####            <td>#springMessage("dashboard.tilldate")</td>
####            <td>
####                <div class="stars-outer">
####                    <div class="stars-inner"></div>
####                </div>
####            </td>
####            <td>$ratingTillDate/5</td>
####        </tr>
####        </tbody>
####    </table>
##</div>


<div>

    ##    <div class="row" style="width:50%">
    ##
    ##        <select class="form-control input-sm" id="performance-months" name="months" placeholder="months"
    ##                style="width:50%; margin:auto;">
    ##            <option value="" disabled selected>month</option>
    ##            #foreach($mVM in $monthValueMap.entrySet())
    ##                #if($mVM.getKey()== $month )
    ##                    <option value="$mVM.getKey()" selected>$mVM.getValue()</option>
    ##                #else
    ##                    <option value="$mVM.getKey()">$mVM.getValue()</option>
    ##                #end
    ##            #end
    ##        </select>
    ##    </div>

    <div class="row">
        ##        <div class="col-lg-6">
        ##            <canvas data-type="radial-gauge" id="hygeine"
        ##                    data-width="200" ,
        ##                    data-height="200"
        ##                    data-title="Hygeine"
        ##                    data-units="${hygienePercentage}%"
        ##                    data-min-value="0"
        ##                    data-max-value="100"
        ##                    data-value="${hygienePercentage}"
        ##                    data-major-ticks="0,20,40,60,80,100"
        ##                    data-minor-ticks="2"
        ##                    data-stroke-ticks="true"
        ##                    data-highlights='[
        ##                                      {"from": 0, "to": 80, "color": "red"},
        ##                                      {"from": 80, "to": 90, "color": "yellow"},
        ##                                      {"from": 90, "to": 100, "color": "green"}
        ##                                  ]' ,
        ##                    data-value-box="false"
        ##                    data-color-plate="#fff"
        ##                    data-border-shadow-width="0"
        ##                    data-borders="false"
        ##                    data-needle-type="arrow"
        ##                    data-needle-width="2"
        ##                    data-needle-circle-size="7"
        ##                    data-font-value-size="42"
        ##                    data-font-title-size="42"
        ##                    data-font-units-size="42"
        ##                    data-needle-circle-outer="true"
        ##                    data-needle-circle-inner="false"
        ##                    data-animation-duration="1500"
        ##                    data-animation-rule="linear"
        ##            ></canvas>
        ##
        ##        </div>

        <div class="col-lg-7">
            <h4 style="margin-top:-2px;margin-bottom:24px"><strong>Print Banners</strong></h4>
            <div class="form-group">
                <div id="myCarousel" class="carousel slide" data-ride="carousel">
                    <!-- Wrapper for slides -->
                    <div class="carousel-inner text-center">
                        #if(!$printResources.isEmpty())
                            #set($first = true)
                            #foreach($printResource in $printResources)
                                <div class="item #if($first)active#set($first = false)#end">
                                    <img src="$printResource.getThumbnailUrl()" alt="Los Angeles"
                                         style="max-height:150px;width:auto;max-width: 100%;margin: auto;">
                                    <div class="carousel-caption">
                                        <br>
                                        <button class="btn btn-danger btn-sm partner_print_resources">Get More!</button>
                                    </div>
                                </div>
                            #end
                        #end
                    </div>
                    <!-- Left and right controls -->
                    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="right carousel-control" href="#myCarousel" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </div>
        </div>
        <div class="col-lg-5">
            <h4 style="margin-top:-2px;margin-bottom:24px"><strong>Investment</strong></h4>
            <canvas data-type="radial-gauge" id="investment"
                    data-width="200"
                    data-height="200"
                    data-title="Investments"
                    data-units="${investments.get('okDays')}/${dayOfMonth}"
                    data-value="${investments.get('okDays')}"
                    data-min-value="0"
                    data-major-ticks=[]
                    data-max-value="${monthDays}"
                    data-highlights='[
                                        {"from": 0, "to": 7, "color": "red"},
                                        {"from": 7, "to": 12, "color": "yellow"},
                                        {"from": 12, "to": ${monthDays}, "color": "green"}
                                    ]'
                    data-value-box="false"
                    data-color-plate="#fff"
                    data-border-shadow-width="0"
                    data-borders="false"
                    data-needle-type="arrow"
                    data-needle-width="2"
                    data-needle-circle-size="7"
                    data-font-value-size="42"
                    data-font-title-size="42"
                    data-font-units-size="42"

                    data-needle-circle-outer="true"
                    data-needle-circle-inner="false"
                    data-animation-duration="1500"
                    data-animation-rule="linear"
            ></canvas>
        </div>
    </div>

</div>
<script>
    starTotal = 5;
    ratings = {
        current: $currentMonthRating,
        last: $lastMonthRating,
        tilldate: $ratingTillDate
    };
    for (const rating in ratings) {
        // 2
        const starPercentage = (ratings[rating] / starTotal) * 100;
        // 3
        const starPercentageRounded = `${starPercentage}%`;
        // 4
        document.querySelector(`.${rating} .stars-inner`).style.width = starPercentageRounded;
    }
</script>
<script type="text/javascript" src="resources/js/gauge.min.js"></script>