cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              //for legal reasons, half of the code is omitted

//Strings
var productionDateInputField = "#inputVonBisProd\\.\\-Datum\\ Fzg\\.\\ \\(Production\\ date\\)";
var mileageInputField = "#inputVonBiskm\\-Stand\\ \\(Mileage\\)";
var berichtsNrInputField = "#inputVonBisBerichts-Nr\\.";
var placeholder = {};
var noPropertiesAlert = "Bitte wählen Sie mindestens ein Filterkriterium aus!\n\nPlease select at least one property to filter by!";
var BerichtsNrInputAlert = "Feld Berichts-Nr.:\n\nBitte geben Sie den Bereich für die Berichts-Nr. ohne Leerzeichen ein.\nPlease enter the range for the report number w/o blanks.\n\nExamples:\n\n2016_0001-2017_0001\n\n2017_1234-2017_1234";
var dateAlert = "Feld Produktionsdatum / production date:\n\nBitte geben Sie Start- und Enddatum im Format tt.mm.jjjj ein.\nPlease enter the start and end date in the format dd.mm.yyyy\n\nExample:\n\n01.01.2016-01.01.2017";
var mileageAlert = "Feld km-Stand / mileage: \n\nBeispiel: Wollen Sie Stände von 10 000 - 12 000 km abfragen, geben Sie ein: 10-12\n\nExample: If you want to retrieve the range from 10 000 - 12 000 km, please enter: 10-12";
var imageInfoSignMileage = "  <img src='/sites/GWTZ/scripts/Informationsign.png' height='16px' width='16px' id='kmStandInfo'>"
var kmStandInfoQtipContent = 'Beispiel: Wollen Sie Stände von 10 000 - 12 000 km abfragen, geben Sie ein: 10-12------------------------------------------------------------------------------------------------------ Example: If you want to retrieve the range from 10 000 - 12 000 km, please enter: 10-12'
var columnNameProdDat = "Prod_x002e__x002d_Datum_x0020_Fzg_x002e__x0020__x0028_Production_x0020_date_x0029_";
var columnNameKmStand = "km_x002d_Stand_x0020__x0028_Mileage_x0029_";
var numberOfRows;
var numberOfColumns;
var displayNameColumnNumberMap = {};
placeholder["Berichts-Nr."] = "yyyy_xxxx-yyyy_xxxx";
placeholder["km-Stand (Mileage)"] = "von-bis in Tausend / from-to in thousands";
placeholder["Prod.-Datum Fzg. (Production date)"] = "dd.mm.yyyy-dd.mm.yyyy";
//set time format to German
moment.locale("de");




$(document).ready(function() {
    //indexOf method for IE8
    if (!Array.prototype.indexOf) {
        Array.prototype.indexOf = function(obj, start) {
            for (var i = (start || 0), j = this.length; i < j; i++) {
                if (this[i] === obj) {
                    return i;
                }
            }
            return -1;
        }
    };

    $SP().list("Prüfberichte").info(function(fields) {
        var nameDisplaynameMap = {};
        var displaynameNameMap = {};
        var displayedColumns = [];
        var valuesForDropDown = {};
        var valuesBerichtsNr = [];
        var filterAlreadyClicked;
        //creating maps so we can get SP name of column from displayed name and vice versa
        for (var i = 0; i < fields.length; i++) {
            var key = fields[i]["Name"];
            var value = fields[i]["DisplayName"];
            nameDisplaynameMap[key] = value;
            displaynameNameMap[value] = key;
            valuesForDropDown[key] = [];
        };

        $SP().list("Prüfberichte").view("Alle Dokumente", function(dataView, viewID) {
            //create the array to fill the select fields and table head
            numberOfColumns = dataView.fields.length;
            for (var i = 0; i < numberOfColumns; i++) {
                var currentColumn = dataView.fields[i];
                var currentDisplayName = nameDisplaynameMap[currentColumn];
                var columnsEnterVonBis = ["Berichts-Nr.", "km-Stand (Mileage)", "Prod.-Datum Fzg. (Production date)"];
                displayedColumns.push(currentDisplayName);
                displayNameColumnNumberMap[currentDisplayName] = i;
                //create input fields where necessary
                if (columnsEnterVonBis.indexOf(currentDisplayName) !== -1) {
                    $("#selectBox").append('<div class="col-md-4" id="column' + i + '"><label for="inputVonBis' +
                        displayedColumns[i] + '">' + displayedColumns[i] + '</label><input class="inputVonBis" id="inputVonBis' +
                        displayedColumns[i] + '" placeholder="' + placeholder[displayedColumns[i]] + '" name="' +
                        displayedColumns[i] + '" type = "text"></div>');
                } else { //create select fields where necessary
                    $("#selectBox").append('<div class="col-md-4" id="column' + i + '"><label for="select' + displayedColumns[i] +
                        '">' + displayedColumns[i] + '</label><select id="select' + displayedColumns[i] +
                        '" data-placeholder="auswählen / select" name="' + displayedColumns[i] +
                        '" multiple class="chosen-select"></select></div>');
                };
                $("#table").find("thead").find("tr").append('<th id="column' + i + '">' + currentDisplayName + '</th>');
            };
            $('label[for="inputVonBiskm\\-Stand\\ \\(Mileage\\)"]').append(imageInfoSignMileage);
            $('#kmStandInfo').qtip({
                content: kmStandInfoQtipContent,
                show: 'mouseover',
                hide: 'mouseout'
            });
            $SP().list("Prüfberichte").get(function(data) {
                //fill in the data 
                numberOfRows = data.length;
                var $tablebody = $("#table").find("tbody");
                for (var i = 0; i < numberOfRows; i++) {
                    var stringToAppend = '<tr id="row' + i + '" class = "tablerow">';
                    for (var j = 0; j < numberOfColumns; j++) {
                        var currentColumnName = dataView.fields[j];
                        var currentEntry = data[i].getAttribute(currentColumnName);
                        var currentLinkToFile;
                        var nameAndLinkArray;
                        var currentPosition = "row" + i + "column" + j;
                        //make Berichts-Nr. appear as a link 
                        if (currentColumnName == "Berichts_x002d_Nr_x002e_" && currentEntry) {
                            if (currentEntry.indexOf(",")) {
                                var helperArray;
                                nameAndLinkArray = currentEntry.split(",");
                                currentEntry = nameAndLinkArray[1];
                                currentLinkToFile = nameAndLinkArray[0];
                                stringToAppend += '<td id="' + currentPosition + '">' + '<a href="' + currentLinkToFile + '">' + currentEntry + '</a></td>';
                                helperArray = currentEntry.split("_");
                                currentEntry = helperArray[0] + helperArray[1];
                                valuesBerichtsNr[i] = currentEntry;
                            }
                        } else {
                            if (!currentEntry) {
                                console.log(currentEntry);
                                currentEntry = "";
                            } else if (currentColumnName == columnNameProdDat && currentEntry) {
                                var date = moment(currentEntry);
                                currentEntry = date.format('L')
                            } else if (currentColumnName == columnNameKmStand && currentEntry) {
                                var helperArray = currentEntry.split(".");
                                currentEntry = helperArray[0];
                            }
                            stringToAppend += '<td id="' + currentPosition + '">' + currentEntry + "</td>";
                        };
                        if (valuesForDropDown[currentColumnName].indexOf(currentEntry) == -1) {
                            valuesForDropDown[currentColumnName].push(currentEntry);
                        };
                    };
                    stringToAppend += '</tr>';
                    $tablebody.append(stringToAppend);
                };
                $("#numberOfResults").unbind('mouseenter mouseleave');
                $("select").each(function(index, value) {
                    //create dropdown menus for each element in table head
                    var currentColumnDisplayName = $(this).attr('name');
                    var currentColumnName = displaynameNameMap[currentColumnDisplayName];
                    var currentDropDownValues = valuesForDropDown[currentColumnName];
                    var numberOfOptions = currentDropDownValues.length;
                    for (var i = 0; i < numberOfOptions; i++) {
                        $(this).append('<option value="' + currentDropDownValues[i] + '">' + currentDropDownValues[i] + '</option>')
                    };
                    $(this).chosen({
                        width: "100%"
                    });
                });
                $("#filter").click(function() {
                    var filterBy = {};
                    var selectedProperties = [];
                    var numberOfProperties;
                    var berichtsNrInput = $(berichtsNrInputField).val();
                    var mileageInput = $(mileageInputField).val();
                    var dateInput = $(productionDateInputField).val();
                    if (checkBerichtsNr() && checkDatum() && checkMileage()) {
                        $("select").each(function() {
                            var selectedValues = $(this).val();
                            var propertyName = $(this).attr('name');
                            var columnNumber = displayNameColumnNumberMap[propertyName];
                            if (selectedValues !== null) {
                                filterBy[columnNumber] = selectedValues;
                                selectedProperties.push(columnNumber);
                            }
                        });
                        numberOfProperties = selectedProperties.length;
                        if (numberOfProperties == 0 && !berichtsNrInput && !dateInput && !mileageInput) {
                            alert(noPropertiesAlert)
                        } else {
                            //makes it possible to readjust filter criteria after filter already clicked once
                            if (filterAlreadyClicked) {
                                $("[id*='row']").show();
                                $("#numberOfResults").html("Anzahl Ergebnisse");
                            }
                            //check for each entry if compatible with the selected criteria
                          

            
          
!
999px
Loading ..................

Console