Untitled

@{
    ViewBag.Title = "Index";
}

<script src="~/Scripts/moment.js"></script>



<div class="container-fluid " id="app">
    <div class="d-flex ">
        <div class=" mt-2">
            <form class="form-inline ">
                <div class="form-group ">
                    <label for="staticEmail" class="col-form-label">Loading hours</label>
                </div>
                <div class="form-group mx-sm-3 ">
                    <label for="inputPassword2" class="sr-only">Account</label>
                    <input type="number" class="form-control form-control-sm" id="inputPassword2" placeholder="Account № or id" v-model="hoursToLoad">
                </div>
                <button class="btn btn-primary btn-sm " type="button" v-on:click.prevent="RequestHistory">
                    <span v-if="loading" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                    {{buttonText}}
                </button>
            </form>
        </div>
    </div>
    
    
    <hr/>



    <div class="d-flex d-flex-column">

        <h5 class="mr-1">Errors list</h5>
        <div class="ml-auto">
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="checkbox" id="inlineCheckbox1" v-model="showDemo">
                <label class="form-check-label" for="inlineCheckbox1">Demo SF errors</label>
            </div>

            <div class="form-check form-check-inline">
                <input class="form-check-input" type="checkbox" id="inlineCheckbox1" v-model="showReal">
                <label class="form-check-label" for="inlineCheckbox1">Real SF errors</label>
            </div>

            <div class="form-check form-check-inline">
                <input class="form-check-input" type="checkbox" id="inlineCheckbox1" v-model="showMonitoring">
                <label class="form-check-label" for="inlineCheckbox1">SP errors</label>
            </div>

            <div class="form-check form-check-inline">
                <input class="form-check-input" type="checkbox" id="inlineCheckbox1" v-model="showStatistic">
                <label class="form-check-label" for="inlineCheckbox1">Statistic errors</label>
            </div>
        </div>
    </div>





    <table class="table table-sm  table-bordered">
        <thead class="thead-dark">
        <tr>
            <th scope="col">Time</th>
            <th scope="col">Server</th>
            <th scope="col">Account</th>
            <th scope="col">
                <div class="d-flex align-items-center justify-content-between">
                    Error
                    <input type="text" class="form-control ml-3 bg-dark text-light form-control-sm border-secondary" v-model="filteredError" placeholder="Search error"/>
                    <input type="text" class="form-control ml-3 bg-dark text-light form-control-sm border-secondary" v-model="filteredErrorType" placeholder="Search type"/>

                </div>
            </th>
        </tr>
        </thead>
        <tbody>
        <tr v-if="CheckFilters(error)" v-for="error in errros.slice().reverse()">
            <td>
                <div>
                    <div>{{ error.ServerError.Time | date}}</div>
                    <div v-if="error.ErrorsCount>1"><span class="badge badge-warning">{{error.ErrorsCount}} times</span></div>
                   
                </div>
            </td>
            <td>
                <div>
                    <div class="badge badge-info">{{ error.NodeServer.Description }}</div>
                    <div>{{ error.NodeServer.Address }}:{{ error.NodeServer.Port }} </div>
                </div>
            </td>
            <td>
                <a v-if="error.ServerError.Account.indexOf(' ')==-1" target="_blank" v-bind:href="'/SearchAccount?account='+ error.ServerError.Account">{{ error.ServerError.Account }}</a>
                <div v-else>{{ error.ServerError.Account }}</div>
            </td>
            <td>
                <span class="badge badge-secondary">{{ error.ErrorType }}</span>
                {{ error.ServerError.Error }}
            </td>

        </tr>
        </tbody>
    </table>


    <input type="checkbox" id="checkbox" v-model="showLogs">
    <label for="checkbox">Show logs</label>
    <div v-if="showLogs==true">
        <h3>Logs:</h3>
        <span>{{info}}</span>
    </div>
</div>


<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            hoursToLoad: 6,
            loading: false,
            errros: [],
            info: '',
            showLogs: false,
            showDemo: false,
            showReal: true,
            showStatistic: true,
            showMonitoring: true,
            filteredError: '',
            filteredErrorType: '',
            buttonText: "Get errors"
        },
        methods:
        {
            RequestHistory: function () {
                if (this.loading) return;
                this.loading = true;
                var token = localStorage.getItem("tokenInfo");
                this.buttonText = "Loading..";
                axios
                    .get('/api/errors/' + this.hoursToLoad, { headers: { "Authorization": `Bearer ${token}` } })
                    .then(
                        (response) => {
                            this.loading = false;
                            this.buttonText = "Get errors";
                            this.info = response.data;
                            this.errros = response.data;
                        })
                    .catch(
                        (error) => {
                            this.ProcessError(error);
                        }
                    );
            },
            ProcessError(error) {
                this.loading = false;
                this.buttonText = "Get errors";
                console.log(error);
                if (error.response.status == 401)
                    window.location.replace("/Home/Login");
                else alert(error.response.data.Message);
            },
            CheckFilters: function (error) {


                if (error.NodeServer.Description != null) {
                    if (!this.showDemo) {
                        if (error.NodeServer.Description.indexOf('Demo') >= 0) return false;
                    }
                    if (!this.showReal) {
                        if (error.NodeServer.Description.indexOf('Client') >= 0) return false;
                    }
                    if (!this.showStatistic) {
                        if (error.NodeServer.Description.indexOf('Statistics') >= 0) return false;
                    }
                    if (!this.showMonitoring) {
                        if (error.NodeServer.Description.indexOf('Monitoring') >= 0) return false;
                    }
                }


                if (error.ServerError.Error.toLowerCase().indexOf(this.filteredError.toLowerCase()) === -1) return false;
                if (error.ErrorType.toLowerCase().indexOf(this.filteredErrorType.toLowerCase()) === -1) return false;

                return true;
            }
        },
        filters: {
            date: function (str) {
                return moment(String(str)).format('DD.MM.YYYY HH:mm:ss');
            }
        },
        mounted() {
            this.RequestHistory();
        }
    });
</script>