Fehlerbericht/app/views/overview.html

<div class="container-fluid">
    <ul class="nav nav-pills">
        <li><a ng-href="#/overview/all/today/errors">Heutige Fehler</a></li>
        <li><a ng-href="#/overview/all/today/all">Heutige Statusmeldungen</a></li>
        <li><a ng-href="#/overview/all/all/missing">Alle Fehlenden</a></li>
        <li><a ng-href="#/overview/all/all/errors">Alle Fehler</a></li>

        <li>
            <div class="dropdown">
                <a class="btn dropdown-toggle" role="button" data-toggle="dropdown">Benutzer: {{benutzer||'bitte auswählen'}}&nbsp;<b class="caret"></b></a>
                <ul class="dropdown-menu" role="menu">
                    <li ng-repeat="val in domain.benutzer"><a ng-click="saveUser(val)">{{val}}</a></li>
                </ul>
            </div>
        </li>
    </ul>

</div>

<div class="row">
    <div class="container-fluid col-md-8">
<table class="table table-bordered table-striped">
    <tr>
        <th>
            <label>
                Datum <i class="glyphicon glyphicon-sort-by-alphabet" ng-click="Predicate='datum'"></i><br/>
                <input ng-model="DatumFilter.von" type="date" ng-change="refresh()" /><br/>
                <input ng-model="DatumFilter.bis" type="date" ng-change="refresh()" />
            </label>
        </th>
        <th>
            <label>
                Kunde <i class="glyphicon glyphicon-sort-by-alphabet" ng-click="Predicate='kunde'"></i><br/>
                <input ng-model="Filter.kunde" ng-change="refresh()" />
            </label>
        </th>
        <th>Info</th>
        <th>Start Soll<br/>Ende Soll <i class="glyphicon glyphicon-sort-by-alphabet" ng-click="Predicate='ende_soll'"></i></th>
        <th>Start Ist<br/>Ende Ist</th>
        <th>Abweichung</th>
        <th>Fehler / Statistik</th>
        <th>Kommentar</th>
    </tr>
    <tr>
        <td></td>
		<td></td>
        <td>
            <div class="dropdown">
                <a class="btn dropdown-toggle" role="button" data-toggle="dropdown">{{Filter.system||'alle'}}&nbsp;<b class="caret"></b></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a ng-click="Filter.system=''">alle</a></li>
                    <li class="divider"></li>
                    <li ng-repeat="val in domain.system"><a ng-click="Filter.system=val">{{val}}</a></li>
                </ul>
            </div>
        </td>
        <td></td>
        <td>
            <div class="dropdown">
                <a class="btn dropdown-toggle" role="button" data-toggle="dropdown">{{domain.fehlend[Filter.fehlend]||'alle'}}&nbsp;<b class="caret"></b></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a ng-click="Filter.fehlend=''">alle</a></li>
                    <li class="divider"></li>
                    <li ng-repeat="(key,val) in domain.fehlend"><a ng-click="Filter.fehlend=key">{{val}}</a></li>
                </ul>
            </div>
        </td>
        <td></td>
        <td>
            <div class="dropdown">
                <a class="btn dropdown-toggle" role="button" data-toggle="dropdown">{{domain.fehler[Filter.fehler]||'alle'}}&nbsp;<b class="caret"></b></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a ng-click="Filter.fehler=''">alle</a></li>
                    <li class="divider"></li>
                    <li ng-repeat="(key,val) in domain.fehler"><a ng-click="Filter.fehler=key">{{val}}</a></li>
                </ul>
            </div>
        </td>
        <td>
            <div class="dropdown">
                <a class="btn dropdown-toggle" role="button" data-toggle="dropdown">{{Filter.benutzer||'alle'}}&nbsp;<b class="caret"></b></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a ng-click="Filter.benutzer=''">alle</a></li>
                    <li class="divider"></li>
                    <li ng-repeat="val in domain.benutzer"><a ng-click="Filter.benutzer=val">{{val}}</a></li>
                </ul>
            </div>
        </td>
    </tr>

    <tr ng-repeat="zeile in overview | filter:DatumFilter.datum | filter:Filter | orderBy:Predicate:Reverse" ng-class="{'danger':zeile.fehlend==1}">
        <td>{{dateFormat(zeile.datum)}}</td>
        <td><a ng-href="#/overview/{{zeile.kunde}}/all/all">{{zeile.kunde}}</a> {{zeile.aufgabe}}</td>
        <td>
            <span class="label label-danger label-{{zeile.system}}">{{zeile.system}}</span>
        </td>
        <td>{{zeile.start_soll}}<br/>{{zeile.ende_soll}}</td>
        <td>
            <a ng-click="saveStartTime(zeile)">{{zeile.start}}</a><br/>
            <a ng-click="saveEndTime(zeile)">{{zeile.ende}}</a>
        </td>
        <td>
            {{timeDiffStart(zeile)}}<br/>
            {{timeDiff(zeile)}}</td>
        <td>
            <!--<a ng-href="#/overview/{{zeile.kunde}}/all/all"><button type="button" class="btn btn-default" title="Fehlermeldungen"><span class="glyphicon glyphicon-exclamation-sign"></span></button></a>-->
            <!--<a ng-href="#/stats/{{zeile.kunde}}"><button type="button" class="btn btn-default" title="Statistik"><span class="glyphicon glyphicon-stats"></span></button></a>-->

            <!--<a ng-href="#/config/{{zeile.kunde}}/current"><button type="button" class="btn btn-default" title="Konfiguration"><span class="glyphicon glyphicon-list-alt"></span></button></a>-->

            <button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#fehler-modal" ng-click="setCurrent(zeile)" ng-show="zeile.anzahl != null">
                <span class="glyphicon" ng-class="{'glyphicon-check': zeile.anzahl == 0 && zeile.bearbeitet == 1, 'glyphicon-eye-close': zeile.anzahl == 0 && zeile.bearbeitet == 0,  'glyphicon-exclamation-sign': zeile.anzahl > 0 && zeile.bearbeitet == 0,  'glyphicon-ok': zeile.anzahl > 0 && zeile.bearbeitet == 1}"></span>
                <span class="label label-danger label-{{zeile.anzahl}}"> {{zeile.anzahl}}</span>
            </button>

            <button type="button" data-trigger="focus" class="btn btn-default btn-sm" data-toggle="modal" data-target="#fehler-modal" ng-click="setCurrent(zeile)" ng-show="zeile.anzahl == null">
                <span class="glyphicon" ng-class="{'glyphicon-check': zeile.bearbeitet == 1, 'glyphicon-question-sign': zeile.bearbeitet != 1 }"></span>
            </button>
        </td>
        <td>
            <button type="button" class="btn btn-default btn-sm" ng-init="c = getComments(zeile)" ng-show="c" data-toggle="popover" data-placement="bottom"
                    title="" data-content="" data-popover="{{c[0].id}}" data-kunde="{{c[0].kunde}}" data-datum="{{c[0].datum}}">
                <span ng-show="c[0].datum != zeile.datum">{{dateFormat(c[0].datum)}}: </span>
                <span class="glyphicon {{getCommentIcon(c)}}"></span>
                <span class="label label-danger label-{{c[0].fehler}}"> {{c[0].fehler}}</span>
                {{c[0].benutzer}}
            </button>
        </td>
    </tr>
</table>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="fehler-modal" tabindex="-1" role="dialog" aria-labelledby="fehler-modal-label" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="fehler-modal-label"><span class="glyphicon glyphicon-exclamation-sign"></span>&nbsp; {{current.zeile.kunde}} - {{dateFormat(current.zeile.datum)}}</h4>
            </div>


            <div class="modal-body">
                <h3>Kommentar</h3>

                <table class="table table-hover table-bordered">
                    <tr>
                        <th>Benutzer</th>
                        <td>
                            <div class="dropdown">
                                <a class="btn dropdown-toggle" role="button" data-toggle="dropdown">{{current.kommentar.benutzer||'unbekannt'}}&nbsp;<b class="caret"></b></a>
                                <ul class="dropdown-menu" role="menu">
                                    <li ng-repeat="val in domain.benutzer"><a ng-click="current.kommentar.benutzer=val">{{val}}</a></li>
                                </ul>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <th>Bearbeitungsstand</th>
                        <td>
                            <div class="dropdown">
                                <a class="btn dropdown-toggle" role="button" data-toggle="dropdown"><span class="glyphicon {{getCommentIcon(current.kommentar)}}"></span> {{domain.bearbeitet[current.kommentar.status]||'unbekannt'}}&nbsp;<b class="caret"></b></a>
                                <ul class="dropdown-menu" role="menu">
                                    <li ng-repeat="(key,val) in domain.bearbeitet"><a ng-click="current.kommentar.status=key"><span class="glyphicon {{domain.comment[key]}}"></span> {{val}}</a></li>
                                </ul>
                            </div>
                        </td>
                    </tr>
                    <tr ng-show="current.kommentar.status=='7'">
                        <th>Empfänger</th>
                        <td>
                            <div class="dropdown">
                                <a class="btn dropdown-toggle" role="button" data-toggle="dropdown">{{current.kommentar.benutzer2||'unbekannt'}}&nbsp;<b class="caret"></b></a>
                                <ul class="dropdown-menu" role="menu">
                                    <li ng-repeat="val in domain.benutzer"><a ng-click="current.kommentar.benutzer2=val;current.kommentar.kommentar='weitergeleitet an '+val">{{val}}</a></li>
                                </ul>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <th>Anzahl Fehler
                            <span class="label label-danger label-{{current.fehler.anzahl}}"> {{current.fehler.anzahl}}</span>
                        </th>
                        <td>
                            <span class="label label-danger label-{{current.kommentar.fehler}}"> {{current.kommentar.fehler}}</span> &nbsp;
                            <label>
                                <input type="range" name="Anzahl" min="0" max="10" ng-model="current.kommentar.fehler" />
                            </label>
                        </td>
                    </tr>
                    <tr>
                        <th>Kommentar</th>
                        <td>
                            <label>
                                <textarea cols="60" rows="5" ng-model="current.kommentar.kommentar"></textarea>
                            </label>
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <button type="button" class="btn btn-default" ng-click="saveComments()">Speichern</button>
                            <button type="button" class="btn btn-primary" ng-click="saveComments()" data-dismiss="modal">Speichern und schließen</button>
                        </td>
                    </tr>
                </table>


                <h3>Fehler</h3>

                <div class="logdatei" ng-repeat="e in current.fehler.fehlerbericht | filter: errorLevel | orderBy: 'ErrorLevel'">
                    <a href="" onclick="$(this).next().toggle()" ng-click="e.Errors3 = e.Errors">
                        <p class="modell" ng-class="{'rot':e.ErrorLevel < 3}">{{e.Type}}: {{e.Name}} ({{errorCount(e)}})</p>
                    </a>

                    <div class="closed-tab">
                        <ul class="fehler" ng-show="e.Type=='Modell'">
                            <li ng-repeat="error in e.Errors3"><a href="http://rbs06/wiki/{{error.Number}}" target="_blank">{{error.Number}}</a>:
                                ({{error.Level}}) {{error.Message}}</li>
                        </ul>
                        <pre class="fehler" ng-show="e.Type=='Workflow'" ng-bind-html="e.Errors3[0]"></pre>
                        <table class="ft" ng-show="e.Type=='Portal'||e.Type=='Versand'">
                            <tbody ng-repeat="error in e.Errors3">
                                <tr>
                                    <td rowspan="6" class="number">{{$index+1}}
                                    <td>Datei:</td>
                                    <td></td>
                                    <td>{{error.Filename}}</td>
                                </tr>
                                <tr>
                                    <td>Stand:</td>
                                    <td></td>
                                    <td>{{error.Modified}}</td>
                                </tr>
                                <tr>
                                    <td>Benutzer:</td>
                                    <td><button class="btn btn-default btn-sm" ng-show="!inWhitelist('User', error.User)" ng-click="whitelistToggle('User', error.User)"><span class="glyphicon glyphicon-ban-circle"></span></button></td>
                                    <td>{{error.User}}</td>
                                </tr>
                                <tr>
                                    <td>Bericht:</td>
                                    <td><button class="btn btn-default btn-sm" ng-show="!inWhitelist('Report', error.Report)" ng-click="whitelistToggle('Report', error.Report)"><span class="glyphicon glyphicon-ban-circle"></span></button></td>
                                    <td>{{error.Report}}</td>
                                </tr>
                                <tr>
                                    <td>Schicht:</td>
                                    <td><button class="btn btn-default btn-sm" ng-show="!inWhitelist('Layer', error.Layer)" ng-click="whitelistToggle('Layer', error.Layer)"><span class="glyphicon glyphicon-ban-circle"></span></button></td>
                                    <td>{{error.Layer}}</td>
                                </tr>
                                <tr class="strich">
                                    <td><div  ng-show="e.Type=='Versand'">Empfänger:</div></td>
                                    <td></td>
                                    <td><div ng-bind-html="mailFormat(error.MailTo)"></div></td>
                                </tr>
                            </tbody>
                            <tr ng-show="e.Errors2">
                                <td colspan="4"><a ng-click="e.Show=!e.Show;">Ausgeblendete Berichte</a></td>
                            </tr>
                            <tbody ng-repeat="error in e.Errors2" ng-show="e.Show">
                            <tr>
                                <td rowspan="6" class="number">{{$index+1}}
                                <td>Datei:</td>
                                <td></td>
                                <td>{{error.Filename}}</td>
                            </tr>
                            <tr>
                                <td>Stand:</td>
                                <td></td>
                                <td>{{error.Modified}}</td>
                            </tr>
                            <tr>
                                <td>Benutzer:</td>
                                <td><button class="btn btn-default btn-sm" ng-show="!inWhitelist('User', error.User)" ng-click="whitelistToggle('User', error.User)"><span class="glyphicon glyphicon-ban-circle"></span></button></td>
                                <td>{{error.User}}</td>
                            </tr>
                            <tr>
                                <td>Bericht:</td>
                                <td><button class="btn btn-default btn-sm" ng-show="!inWhitelist('Report', error.Report)" ng-click="whitelistToggle('Report', error.Report)"><span class="glyphicon glyphicon-ban-circle"></span></button></td>
                                <td>{{error.Report}}</td>
                            </tr>
                            <tr>
                                <td>Schicht:</td>
                                <td><button class="btn btn-default btn-sm" ng-show="!inWhitelist('Layer', error.Layer)" ng-click="whitelistToggle('Layer', error.Layer)"><span class="glyphicon glyphicon-ban-circle"></span></button></td>
                                <td>{{error.Layer}}</td>
                            </tr>
                            <tr class="strich">
                                <td><div  ng-show="e.Type=='Versand'">Empfänger:</div></td>
                                <td></td>
                                <td><div ng-bind-html="mailFormat(error.MailTo)"></div></td>
                            </tr>
                            </tbody>
                        </table>

                    </div>
                </div>

                <h3>Weitere Logdateien</h3>

                <table class="table table-hover table-bordered">
                    <tr ng-repeat="(header, g) in current.fehler.weitere">
                        <th>{{header}}</th>

                        <td>
                            <ul>
                                <li ng-repeat="e in g" >
                                    <a ng-click="current.fehlerdetails = e" ng-show="header != 'Modell'">{{e.Name}}</a>
                                    <span ng-show="header == 'Modell'">{{e.Name}}</span>
                                </li>
                            </ul>
                        </td>
                    </tr>
                </table>

                <div class="logdatei" ng-show="current.fehlerdetails != null">
                    <p class="modell">{{current.fehlerdetails.Type}}: {{current.fehlerdetails.Name}} ({{errorCount(current.fehlerdetails)}})</p>
                    <pre class="fehler" ng-repeat="error in current.fehlerdetails.Errors">{{error}}</pre>
                    <table class="ft" ng-show="current.fehlerdetails.Errors2">
                        <tbody ng-repeat="error in current.fehlerdetails.Errors2">
                        <tr>
                            <td rowspan="6" class="number">{{$index+1}}
                            <td>Datei:</td>
                            <td></td>
                            <td>{{error.Filename}}</td>
                        </tr>
                        <tr>
                            <td>Stand:</td>
                            <td></td>
                            <td>{{error.Modified}}</td>
                        </tr>
                        <tr>
                            <td>Benutzer:</td>
                            <td><button class="btn btn-default btn-sm" ng-show="!inWhitelist('User', error.User)" ng-click="whitelistToggle('User', error.User)"><span class="glyphicon glyphicon-ban-circle"></span></button></td>
                            <td>{{error.User}}</td>
                        </tr>
                        <tr>
                            <td>Bericht:</td>
                            <td><button class="btn btn-default btn-sm" ng-show="!inWhitelist('Report', error.Report)" ng-click="whitelistToggle('Report', error.Report)"><span class="glyphicon glyphicon-ban-circle"></span></button></td>
                            <td>{{error.Report}}</td>
                        </tr>
                        <tr>
                            <td>Schicht:</td>
                            <td><button class="btn btn-default btn-sm" ng-show="!inWhitelist('Layer', error.Layer)" ng-click="whitelistToggle('Layer', error.Layer)"><span class="glyphicon glyphicon-ban-circle"></span></button></td>
                            <td>{{error.Layer}}</td>
                        </tr>
                        <tr class="strich">
                            <td><div  ng-show="e.Type=='Versand'">Empfänger:</div></td>
                            <td></td>
                            <td><div ng-bind-html="mailFormat(error.MailTo)"></div></td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <div ng-show="current.fehler.whitelist.User || current.fehler.whitelist.Report || current.fehler.whitelist.Layer">
                    <h3>Ausgeblendete Berichte</h3>

                    <table class="table table-hover table-bordered">
                        <tr ng-show="current.fehler.whitelist.User">
                            <th>Benutzer</th>
                            <td>
                                <ul>
                                    <li ng-repeat="val in current.fehler.whitelist.User"><a ng-click="whitelistToggle('User', val)">{{val}}</a></li>
                                </ul>
                            </td>
                        </tr>
                        <tr ng-show="current.fehler.whitelist.Report">
                            <th>Bericht</th>
                            <td>
                                <ul>
                                    <li ng-repeat="val in current.fehler.whitelist.Report"><button ng-click="whitelistToggle('Report', val)"><span class="glyphicon glyphicon-trash"></span></button> {{val}}</li>
                                </ul>
                            </td>
                        </tr>
                        <tr ng-show="current.fehler.whitelist.Layer">
                            <th>Schicht</th>
                            <td>
                                <ul>
                                    <li ng-repeat="val in current.fehler.whitelist.Layer"><a ng-click="whitelistToggle('Layer', val)">{{val}}</a></li>
                                </ul>
                            </td>
                        </tr>
                    </table>
                </div>

                <h3>Historie</h3>

                <table class="table table-hover table-bordered table-condensed">
                    <tr>
                        <th style="width: 140px;">Datum</th>
                        <th style="width: 100px;">Start<br/>Ende</th>
                        <th style="width: 110px;">Abweichung</th>
                        <th style="width: 120px;">Fehler</th>
                        <th style="width: 340px;">Kommentar</th>
                    </tr>
                    <tr ng-repeat="z in current.overview | orderBy: 'datum':true | limitTo: current.limit " ng-class="{'danger':z.fehlend==1}">
                        <td>{{dateFormat(z.datum)}}</td>
                        <td>
                            <a ng-click="saveStartTime(z)">{{z.start}}</a><br/>
                            <a ng-click="saveEndTime(z)">{{z.ende}}</a>
                        </td>
                        <td>
                            {{timeDiffStart(z)}}<br/>
                            {{timeDiff(z)}}
                        </td>
                        <td>
                            <button type="button" class="btn btn-default btn-sm" ng-click="setCurrent(z)" ng-show="z.anzahl != null">
                                <span class="glyphicon" ng-class="{'glyphicon-check': z.anzahl == 0 && z.bearbeitet == 1, 'glyphicon-eye-close': z.anzahl == 0 && z.bearbeitet == 0,  'glyphicon-exclamation-sign': z.anzahl > 0 && z.bearbeitet == 0,  'glyphicon-ok': z.anzahl > 0 && z.bearbeitet == 1}"></span>
                                <span class="label label-danger label-{{z.anzahl}}"> {{z.anzahl}}</span>
                            </button>

                            <button type="button" data-trigger="focus" class="btn btn-default btn-sm" ng-click="setCurrent(zeile)" ng-show="z.anzahl == null">
                                <span class="glyphicon glyphicon-question-sign"></span>
                            </button>
                        </td>
                        <td>
                            <button type="button" class="btn btn-default btn-sm" ng-init="c = getComments(z, '1')" ng-show="c" data-toggle="popover" data-placement="bottom"
                                    title="" data-content="" data-popover="{{c.id}}">
                                <span ng-show="c[0].datum != z.datum">{{dateFormat(c[0].datum)}}: </span>
                                <span class="glyphicon {{getCommentIcon(c)}}"></span>
                                <span class="label label-danger label-{{c[0].fehler}}"> {{c[0].fehler}}</span>
                                {{c[0].benutzer}}
                            </button>

                        </td>
                    </tr>
                    <tr>
                        <td>
                            <button class="btn btn-default" ng-click="current.limit=100"><span class="glyphicon glyphicon-plus"></span></button>
                        </td>
                    </tr>
                </table>

                <h3>Statistik</h3>

                <div>
                    <div id="durationChart" style="width: 750px; height: 550px"></div>

                    </div>
                    <br/><br/>
                    <table class="table table-bordered table-striped">
                        <tr>
                            <th>Name</th>
                            <th>Datum</th>
                            <th>Zeit</th>
                            <th>Dauer</th>
                            <th>Quellen</th>
                            <th>Kategorien</th>
                            <th>Datensätze</th>
                        </tr>
                        <tr ng-repeat="e in current.fehler.fehlerbericht" ng-show="e.Summary.Duration != null">
                            <td>{{e.Type}}: <a href="" ng-click="showDetails(e)">{{e.Name}}</a></td>
                            <td>{{dateFormat(e.Modified)}}</td>
                            <td>{{timeFormat(e.Modified)}}</td>
                            <td>{{e.Summary.Duration}}</td>
                            <td>{{e.Sources.length}}</td>
                            <td>{{e.Summary.Categories}}</td>
                            <td>{{e.Summary.Entities}}</td>
                        </tr>
                    </table>

                    <div ng-show="current.details!=null">
                        <h3>Details zu {{current.details.Type}}: {{current.details.Name}}</h3>
                        <div id="durationDetailsChart" style="width: 750px; height: 550px">

                        </div>
                        <br/><br/>
                        <table class="table table-bordered table-striped">
                            <tr>
                                <th>Name</th>
                                <th ng-show="current.details.Type!='Modell'">Report</th>
                                <th ng-show="current.details.Type=='Modell'">Datensätze</th>
                                <th>Dauer</th>
                            </tr>
                            <tr ng-repeat="e in current.details.Sources">
                                <td>{{e.Filename}}</td>
                                <td ng-show="current.details.Type!='Modell'">{{e.Report}} ({{e.Layer}})</td>
                                <td ng-show="current.details.Type=='Modell'">{{e.Entities}}</td>
                                <td>{{e.Duration}}</td>
                            </tr>
                        </table>
                    </div>
                </div>




            </div>
        </div>
    </div>
</div>

<style>
.table tbody tr td {
    vertical-align: middle;
}

.label-0 {
    background-color: #aaaaaa;
}

.label-1 {
    background-color: #bbbb00;
}

.label-2 {
    background-color: #bb8800;
}

.label-3 {
    background-color: #bb0000;
}

table.ft {
    border: 1px solid #888;
}

table.ft td {
    padding: 3px 5px;
    margin: 2px;
    background-color: #ddd;
}

.logdatei {
    margin: 10px 5px 20px 5px;
    padding: 0 20px 10px 20px;
    background-color: #eee;
    border: 1px solid #888;
}

.modell {
    font-weight: bold;
    background-color: #ccc;
    padding: 10px;
    margin: 0 -20px;
}

.rot {
    background-color: #e88;
}

.number {
    font-weight: bold;
    background-color: #ccc;
    border: 1px solid #888888;
}

.strich {
    border-bottom: 1px solid #888888;
}

</style>