<commit_before>Vue.component('camp-details', {
    props: ['campId'],
    computed: {
        campDetails: function() {
            return {
                name: 'So-La',
                title: 'Sommerlager',
                motto: 'Römer',
                _embedded: {
                    owner: {
                        name: '<NAME>'
                    },
                    periods: [ { description: 'Vorweekend', start: '2018-05-19', end: '2018-05-20' }, { description: 'Lager', start: '2018-07-14', end: '2018-07-28' } ]
                },
            }
        },
        ownerName: function() {
            return this.campDetails._embedded.owner.name;
        },
        periods: function() {
            return this.campDetails._embedded.periods;
        },
    },
    template:
        '        <div class="card" style="margin-bottom: 10px">\n' +
        '            <div class="card-body">\n' +
        '                Vue.js Infos zu genau einem Lager, id {{ campId }}\n' +
        '                <ul>\n' +
        '                    <li>Name: {{ campDetails.name }}</li>\n' +
        '                    <li>Titel: {{ campDetails.title }}</li>\n' +
        '                    <li>Motto: {{ campDetails.motto }}</li>\n' +
        '                    <li>Besitzer Name: {{ ownerName }}</li>\n' +
        '                    <li>Lager-Perioden:' +
        '                        <ul><li v-for="period in periods">{{ period.description }} ({{ period.start }} - {{ period.end }})</li></ul>' +
        '                    </li>\n' +<commit_msg>Get the camp details from the API<commit_after>Vue.component('camp-details', {
    props: ['campId'],
    computed: {
        campDetails: function() {
            // Since we don't yet include vue.js with NPM and webpack, we cannot use npm modules such as vue-fetch, and
            // also cannot use advanced javascript features such as async / await (which are required for the
            // fetch API). Therefore, to prove our point, we use a good old-fashioned XMLHttpRequest here to query our
            // eCamp API.
            var request = new XMLHttpRequest();
            request.open("GET", "/api/camp/" + this.campId, false);
            request.send();

            if (request.status !== 200) {
                alert('can not get camp details');
                return {};
            }

            return JSON.parse(request.responseText);
        },
        ownerName: function() {
            return this.campDetails._embedded.owner.name;
        },
        periods: function() {
            return this.campDetails._embedded.periods;
        },
    },
    template:
        '        <div class="card" style="margin-bottom: 10px">\n' +
        '            <div class="card-body">\n' +
        '                Vue.js Infos zu genau einem Lager, id {{ campId }}\n' +
        '                <ul>\n' +
        '                    <li>Name: {{ campDetails.name }}</li>\n' +
        '                    <li>Titel: {{ campDetails.title }}</li>\n' +
        '                    <li>Motto: {{ campDetails.motto }}</li>\n' +
        '                    <li>Besitzer Name: {{ ownerName }}</li>\n' +
        '                    <li>Lager-Perioden:' +
        '                        <ul><li v-for="period in periods">{{ period.description }} ({{ period.start }} - {{ period.end }})</li></ul>' +
        '                    </li>\n' +
{'fraction_non_alphanumeric': 0.15274532710280375, 'fraction_numerical': 0.01139018691588785, 'mean_word_length': 1.3063973063973064, 'pattern_counts': {'":': 0, '<': 38, '<?xml version=': 0, '>': 38, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1171996', 'n_tokens_mistral': 1008, 'n_tokens_neox': 944, 'n_words': 213}