PhotonVision/photon-client/src/views/SettingsView.vue

<template>
  <div>
    <v-row
      class="pa-3"
      no-gutters
    >
      <v-col
        cols="12"
        style="max-width: 1400px"
      >
        <v-form
          ref="form"
          v-model="valid"
        >
          <v-card
            v-for="item in tabList"
            :key="item.name"
            dark
            class="mb-3 pr-6 pb-3"
            style="background-color: #006492;"
          >
            <v-card-title>{{ item.name }}</v-card-title>
            <component
              :is="item"
              class="ml-5"
            />
          </v-card>
          <v-btn
            color="accent"
            style="color: black; width: 100%;"
            :disabled="!valid"
            @click="sendGeneralSettings()"
          >
            Save
          </v-btn>
        </v-form>
      </v-col>
    </v-row>
    <v-snackbar
      v-model="snack"
      top
      :color="snackbar.color"
    >
      <span>{{ snackbar.text }}</span>
    </v-snackbar>
  </div>
</template>

<script>
    import Networking from './SettingsViews/Networking'
    import Lighting from "./SettingsViews/Lighting";
    import cvImage from '../components/common/cv-image'
    import General from "./SettingsViews/General";

    export default {
        name: 'SettingsTab',
        components: {
            cvImage,
            // General,
        },
        data() {
            return {
                selectedTab: 0,
                valid: true, // Are all settings valid
                snack: false,
                snackbar: {
                  color: "accent",
                  text: ""
                },
            }
        },
        computed: {
            selectedComponent: {
                get() {
                    return this.tabList[this.selectedTab];
                }
            },
            settings: {
                get() {
                    return this.$store.state.settings;
                }
            },
            tabList: {
                get() {
                    return [General, Networking].concat(this.$store.state.settings.lighting.supported ? Lighting : []);
                }
            }
        },
        methods: {
            sendGeneralSettings() {
                this.axios.post("http://" + this.$address + "/api/settings/general", this.settings).then(
                    function (response) {
                        if (response.status === 200) {
                            this.snackbar = {
                                color: "success",
                                text: "Settings updated successfully"
                            };
                            this.snack = true;
                        }
                    },
                    function (error) {
                        this.snackbar = {
                            color: "error",
                            text: (error.response || {data: "Couldn't save settings"}).data
                        };
                        this.snack = true;
                    }
                )
            },
        }
    }
</script>

<style scoped>
    .videoClass {
        text-align: center;
    }

    .videoClass img {
        padding-top: 10px;
        height: auto !important;
        vertical-align: middle;
    }
</style>