weather.directive.html

<div class="card card-default mainpanel">
    <div class="card-header" translate>Weather watcher
        <button type="button" class="close" ng-click="Core.closePanel(this)">
            <span aria-hidden="true">×</span>
            <span class="sr-only" translate>Close</span>
        </button>
    </div>
    <style>
    .weather-table>tbody>tr>td, .table-condensed>tbody>tr>th, .table-condensed>tfoot>tr>td, .table-condensed>tfoot>tr>th, .table-condensed>thead>tr>td, .table-condensed>thead>tr>th {
    padding: 2px;
}
    </style>
    <div class="card-body">
        <div class="card-body">
             <span ng-show="points.length==0" translate>Click on the map to put markers and then choose weather forecast from the list</span>
		    <ul class="hs-senslog-list list-group">
				<li ng-repeat="point in points" class="list-group-item">
					<div class="" style="font-size: 10pt;">#{{point.ix}} near {{point.name}} <span translate>at</span> {{point.lat}}°N {{point.lon}}°E 						
                        <table class="table table-condensed weather-table" style="font-size: 8pt;">
                            <tr><th translate>Name</th><th translate>Updated</th><th></th></tr>
                            <tr ng-repeat="forecast in point.forecasts"><td>{{forecast.name}}</td><td>{{forecast.updated}}</td><td><a href="#" ng-click="showForecast(forecast)">Open</a></td></tr>
                        </table>
					</div>
                </li>
                <div class="dropdown">
                    <button class="btn btn-primary btn-block dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <img ng-show="loading" src="img/ajax-loader.gif" ng-show="loading" translate/><translate>Get forecast</translate>
                    </button>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                      <a class="dropdown-item" href="#" ng-click="getCrossings('meteogram_agro_hd', '7 day agro meteogram')">7 day agro meteogram</a>
                      <a class="dropdown-item" href="#" ng-click="getCrossings('meteogram_14day', '14 day agro meteogram')">14 day agro meteogram</a>
                      <a class="dropdown-item" href="#" ng-click="getCrossings('pictoprintDayUvRain', 'Forecast pictograms')">Forecast pictograms</a>
                      <a class="dropdown-item" href="#" ng-click="getCrossings('meteogram_soiltraffic', 'Soil trafficability')">Soil trafficability</a>
                      <a class="dropdown-item" href="#" ng-click="getCrossings('meteogram_agroSowing', 'Spray window')">Sow conditions</a>
                      <a class="dropdown-item" href="#" ng-click="getCrossings('meteogram_agroSpraying', 'Spray window')">Spray window</a>
                    </div>
                </div>
                <button class="btn btn-secondary btn-block" translate ng-click="play()">{{service.isPlaying ? 'Stop animation' : 'Play animation'}}</button>
                <button class="btn btn-danger btn-block" translate ng-click="clear()"> Clear</button>
		    </ul>
        </div>
    </div>
</div>