ROW Orientation - by section

index.html

<div id="app">
  <v-app>
    <v-main>
      <v-container fluid>
        <v-row>
          <v-col cols=12>
            <v-card class="mb-4">
              <v-card-title>
                Tower Config
              </v-card-title>
            <v-expansion-panels multiple v-model="panel">
              <v-expansion-panel v-for="(circuit, i) in circuits">
                <v-expansion-panel-header>{{ circuits[i]['branch_name'] }} | {{ circuits[i]['section_name'] }} 
                </v-expansion-panel-header>
                <v-expansion-panel-content>                   
                  <template dense v-for="(xy, j) in circuit['xy_sets']" align="center">
                  <v-divider v-if="j>0"></v-divider>
                  <v-row pb-0 dense>
                    <v-col cols=4>
                      <v-select label="Conductor" item-text="description" item-value="id" :items=choices_conductors>
                    </v-col>
                    <v-col cols=1>
                      <v-select label="Bundle":items=bundle_choices>
                      </v-select>
                    </v-col>
                    <v-col cols=1>
                      <v-text-field label="Spacing (in)" title="Bundle Spacing (in)">
                      </v-text-field>
                    </v-col>                    
                    <v-col v-if="false" cols=2>
                      <v-text-field label="Section Name">
                      </v-text-field>
                    </v-col>
                    <v-col cols=1>
                      <v-text-field label="kv">
                      </v-text-field>
                    </v-col>
                    <v-col cols=1>
                      <v-text-field label="Sag" title="Sag (ft)">
                      </v-text-field>
                    </v-col>
                      <v-divider vertical inset class="mx-4 my-4"></v-divider>
                      <v-col cols=1>
                        <v-text-field title="NOT: Normal Operating Temperature" label="NOT: Normal Temp"></v-text-field>
                      </v-col>
                      <v-col cols=1>
                        <v-text-field title="MOT: Maximum Operating Temperature"label="MOT: Max Temp"></v-text-field>                        
                      </v-col>
                  </v-row>
                    <v-row dense>
                    <v-col cols=1>
                      <v-text-field label="A-x">
                      </v-text-field>
                    </v-col>
                    <v-col cols=1>
                      <v-text-field label="A-y">
                      </v-text-field>
                    </v-col>
                      <v-divider class="mx-4 my-4" inset vertical></v-divider>                      
                    <v-col cols=1>
                      <v-text-field label="B-x">
                      </v-text-field>
                    </v-col>
                    <v-col cols=1>
                      <v-text-field label="B-y">
                      </v-text-field>
                    </v-col>
                    <v-divider class="mx-4 my-4" inset vertical></v-divider>
                    <v-col cols=1>
                      <v-text-field label="C-x">
                      </v-text-field>
                    </v-col>
                    <v-col cols=1>
                      <v-text-field label="C-y">
                      </v-text-field>
                    </v-col>
                    <v-divider class="mx-4 my-4" inset vertical></v-divider>
                    <v-col cols=2>
                      <v-select label="orientation" :items="choices_orientation" item-text="description" item-value="id" >
                    </v-col>
                  </template>
                </v-expansion-panel-content>
              </v-expansion-panel>
            </v-expansion-panels>
          </v-col>
        </v-row>
        </template>
        <v-row>
          <v-col cols=12>
            <v-card>
              <v-card-title>Results</v-card-title>
              <v-card-text>
                Results go here
              </v-card-text>
            </v-card>
          </v-col>
        </v-row>
      </v-container>
    </v-main>
  </v-app>
</div>

row-orientation-by-section.markdown

ROW Orientation - by section

A Pen by Chips on CodePen.

License.

script.js

vm = new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
        sag: [],
        ckt_name: [],
        panel: [0,1,2,3,4,5,6,7,8,9,10],
        bundle_choices: [1,2,3,4,5,6],
        choices_temperature: ['25C (PJM)', '50C (SPP,ERCOT)'],
        // Tower Geometry
        circuits: [
          {
            'section_name': 'Nino - Str 20',
            'branch_name': 'Nino - Wormser',
            'xy_sets': [ {
              'ax': 0, 'ay': 0,
              'bx': 0, 'by': 0,
              'cx': 0, 'cy': 0,
              } ]          
          }, // end circuit 1
          {
            'section_name': 'Nino - Str 20',
            'branch_name': 'Nino - Gateway',
            'xy_sets': [ {
              'ax': 0, 'ay': 0,
              'bx': 0, 'by': 0,
              'cx': 0, 'cy': 0,
              } ]          
          }, // end circuit 3
          {
            'section_name': 'Str 4 - Str 20',
            'branch_name': 'Ceres - Io',
            'xy_sets': [ {
              'ax': 0, 'ay': 0,
              'bx': 0, 'by': 0,
              'cx': 0, 'cy': 0,
              } ]          
          }, // end circuit 3
        ],
        shields: [ ],
        choices_orientation: [ 
          {id: 1, description: '+ (forward)'},
          {id: 0, description: '- (reverse)'}
          ],
        choices_conductors: [ 
            {id:0, description: 'Custom'},
            {id:1, description: '795 KCM ACSR', res25: 0.01,  res50: 0.02, rad: 0.1, gmr: 0.1}, 
            {id:2, description: '1590 KCM ACSR', res25: 0.02,  res50: 0.04, rad: 0.2, gmr: 0.15}, 
        ],
  }), // end data
  computed: {
  }, // end computed
  methods: {
      addCircuit: function () {
        var boilerplate = {
          'xy_sets': [ {
            'ax': 0, 'ay': 0,
            'bx': 0, 'by': 0,
            'cx': 0, 'cy': 0,
            } ] 
        } 
        this.circuits.push(boilerplate)
      },
      addXY: function (i) {
        var xy_boilerplate = {'ax': 0, 'ay': 0, 'bx': 0, 'by': 0, 'cx': 0, 'cy': 0}
        this.circuits[i]['xy_sets'].push(xy_boilerplate)
      },
      removeXY: function (i) {
        this.circuits[i]['xy_sets'].pop()
      },
      removeCircuit: function (i) {
        this.circuits.pop()
      },
      removeShield: function (i) {
        this.shields.pop()
      },
  },
  watch: {
  }, // end watch
  mounted: function () {
    // this.addCircuit()
    // this.addCircuit()
    // this.addCircuit()
  }, // end watch
})

scripts

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

style.css

.v-divider--vertical {
  max-height: 5;
}

styles

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@3.x/css/materialdesignicons.min.css" rel="stylesheet" />