index.html


<html>
    <head>

        <title>Home - Minutes</title>

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
              integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

        <style>
            #meetingContent {
                width:100%;
                height:90%;
            }
            .meetingItem:hover {
                background-color: lightgray;
                cursor: pointer;
            }
            .selectedItem {
                background-color: lightblue;
            }
        </style>

        <link rel="shortcut icon" href="/static/favicon.ico">

    </head>
    <body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-10">
                <h3>Minutes</h3>
            </div>
            <div class="col-2 pull-right">
                <a href="/">Home</a>

                    <a href="/logout">Logout</a>

            </div>
        </div>
        <div class="row">
            <div class="col-12">


            </div>
        </div>


<div id="app">
    <div class="row">
        <div class="col-2">
            <div
                v-for="meeting in meetings"
                v-on:click="loadMeeting(meeting)"
                class="meetingItem"
                v-bind:class="{selectedItem:meeting.id == selectedMeeting.id}">
                {{ meeting.content }}
            </div>
        </div>
        <div class="col-10">
            <textarea v-model="selectedMeeting.content" placeholder="Describe your meeting" ref="meetingContent" id="meetingContent"></textarea>
        </div>
    </div>
    <div class="row">
        <div class="col-2">

        </div>
        <div class="col-8">
            created: {{ selectedMeeting.created }}
            <br>
            updated: {{ selectedMeeting.updated }}
        </div>
        <div class="col-2">
            <button v-on:click="saveMeeting" v-bind:disabled="meetingSaved">
                <div v-if="meetingSaved">{{ saveMeetingButton.savedText }}</div>
                <div v-else>{{ saveMeetingButton.saveText }}</div>
            </button>
            <button v-on:click="newMeeting">New Meeting</button>
        </div>
    </div>
</div>


<script>
    new Vue({
        el: '#app',
        data: {
            selectedMeeting: {content: null},
            meetings: [],
            meetingSaved: true,
            saveMeetingButton: {saveText: 'Save Meeting', savedText: 'Saved', disabled: true},
        },
        created() {
            axios.get('/ajax/meetings')
                .then(response => {
                    this.meetings = response.data;
                    this.selectedMeeting = this.meetings[0];

                });
        },
        methods: {
            newMeeting: function () {
                // TODO: first present the new empty meeting and then get the response from the server
                axios.get('/ajax/meetings/new')
                    .then(response => {
                        this.selectedMeeting = response.data;
                        this.meetings.unshift(this.selectedMeeting);

                    });

            },
            saveMeeting: function () {
                // TODO: do this every x seconds
                axios.post('/ajax/meetings/' + this.selectedMeeting.id, this.selectedMeeting)
                    .then(function (response) {
                        console.log(response);
                        this.selectedMeeting = response.data;
                        // TODO: Disable save button and set text to "Saved"
                        console.log('now setting meetingSaved to true');
                        this.meetingSaved = true;
                        console.log('Done setting meetingSaved to true');
                    });
            },
            loadMeeting: function (neededMeeting) {
                this.selectedMeeting = neededMeeting;
                this.$refs.meetingContent.focus();

            }
        },
        watch: {
            'selectedMeeting.content': function () {
                this.meetingSaved = false;
                console.log('Changed meeting', new Date());
                //this.saveMeeting();
            }
        },
    });
</script>


    </div>
    </body>
</html>