text:
<file_sep><template>
  <v-layout v-if="api.info" row wrap>
    <v-flex lg12>
      {{api.info.title}}

    </v-flex>
    <v-flex v-if="api.info.contact" lg12>
      <v-icon>home</v-icon>
      {{api.info.contact.name || api.info.contact.url}}
      <v-icon>email</v-icon>
      {{api.info.contact.email}}
    </v-flex>
    <v-flex lg12>
      <v-layout>
        <v-flex xs8 sm6 lg2 mr-4 mt-2>
          <v-select v-model="version" :items="versions" solo ></v-select>
        </v-flex>

      </v-layout>
      <v-flex>api-docs.yaml</v-flex>
      <template v-if="api.info.termsOfService">
        Terms of Service
      </template>
    </v-flex>
    <v-flex
      lg12
      v-for="(entries, tag) in versionedTags"
      :key="tag"
      class="my-3">
      <v-toolbar>
        <v-toolbar-title class="headline">{{ tag }}</v-toolbar-title>
        <v-spacer></v-spacer>
        <v-btn flat @click="setPanel(tag)">View Schema</v-btn>
      </v-toolbar>
      <v-card>
        <v-card-text>
          <v-expansion-panel>
            <v-expansion-panel-content
              v-for="(entry, i) in entries"
              :key="i"
              :class="[chooseColor(entry.method), 'darken-6']">
              <template v-slot:header>
                <v-btn  v-bind:color="chooseColor(entry.method)" dark style="maxWidth: 25px">
                  {{ entry.method.toUpperCase() }}
                </v-btn>

{{ entry.path }}

              </template>
              <request-card
                :color="chooseColor(entry.method)"
                :entry="entry"
                :version="version"
                :baseUrl="baseUrl"
              >
              </request-card>
              <response-card
                :color="chooseColor(entry.method)"
                :entry="entry"></response-card>
            </v-expansion-panel-content>
          </v-expansion-panel>
        </v-card-text>
      </v-card>
    </v-flex>
    <components
      :panel="panel"
      :components="api.components"/>
  </v-layout>
</template>

<file_sep><template>
  <v-app id="app" dark>
    <v-content>
      <v-container fluid fill-height>
        <vue-swag
        swagger-yaml="http://10.240.89.27:8081/openapi2.yaml"
        ></vue-swag>
      </v-container>
    </v-content>
  </v-app>
</template>

<file_sep><template>
    <v-flex lg12 class="my-4">
        <v-toolbar>
            <v-toolbar-title>Schemas</v-toolbar-title>
        </v-toolbar>
        <v-card>
            <v-card-text>
                <component-schemas
                  :panel="panel"
                  :schemas="components.schemas"/>
            </v-card-text>
        </v-card>
    </v-flex>
</template>

<file_sep>
<template>
  <v-flex sm6 class="mr-2">
    <v-toolbar flat height="40px" color="grey darken-3">
      <v-toolbar-title class="subheading grey--text text--lighten-1">Request Body Example</v-toolbar-title>
      <v-spacer></v-spacer>
    </v-toolbar>
    <v-card>
      <v-card-text>
        <json-viewer
                v-if="requestBodyExample"
                :value="processedRequestBodyExample"
                :expand-depth=5
                theme="json-viewer"
                copyable
        ></json-viewer>
      </v-card-text>
    </v-card>
  </v-flex>
</template>

<file_sep><template>
  <v-flex sm6 class="mr-2">
    <v-toolbar flat height="40px" color="grey darken-3">
      <v-toolbar-title class="subheading grey--text text--lighten-1">Response Schema</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-switch
        v-if="schema"
        v-model="expandAll"
        label="expand all"
        @change="rerenderViewer"
      ></v-switch>
    </v-toolbar>
    <v-card>
      <v-card-text ma-2>

              <json-viewer
                    :key="viewerKey"
                    :value="processedSchema"
                    :expand-depth="depth"
                    copyable
                    theme="json-viewer"
             ></json-viewer>

          <v-flex pl-4>No Schema Available</v-flex>

      </v-card-text>
    </v-card>
  </v-flex>
</template>

<file_sep><template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">

  <v-flex v-if="entry.method !== 'delete'"sm6 class="mr-2">
    <v-toolbar flat height="40px" color="grey darken-3">
      <v-toolbar-title class="subheading grey--text text--lighten-1">Request Parameters</v-toolbar-title>
    </v-toolbar>
    <v-data-table
      :headers="displayedHeaders"
      :items="parameters"
      class="elevation-1"
      hide-actions
    >
      <template v-slot:items="parameters">
        {{ parameters.item.name }}
        {{ parameters.item.in }}
        {{ parameters.item.required }}
        {{ parameters.item.schema.type }} {{ displayEnum(parameters.item.schema.enum) }}
        {{ parameters.item.description }}

            <v-select
                    v-model="localIdPathVar"
                    :type="getType(parameters)"
                    min="0"
                    :items="parameters.item.example.split(',')"
                    :placeholder="pathVarPlaceholder"
                    @change="setPathVar"
                    :rules="[rules.required]"
            ></v-select>

            <v-select
                    v-model="displayedQueryParams[parameters.item.name]"
                    :items="parameters.item.example.split(',')"
                    :placeholder="parameters.item.name"
                    :multiple="isArrayParam(parameters)"
                    @change="setParams"
                    clearable
            ></v-select>

            <v-text-field
                    v-if="isIdParam(parameters)"
                    v-model="localIdPathVar"
                    :type="getType(parameters)"
                    min="0"
                    :placeholder="pathVarPlaceholder"
                    @input="setPathVar"
                    :rules="[rules.required]"
                    clearable
            ></v-text-field>

              <v-text-field
                      :type="getType(parameters)"
                      min="0"
                      v-model="displayedQueryParams[parameters.item.name]"
                      :placeholder="parameters.item.name"
                      @input="setParams"
                      clearable
              >
              </v-text-field>

      </template>
      <template v-slot:no-data>
        No parameters
      </template>
    </v-data-table>
  </v-flex>
  <v-flex v-else>
    <v-toolbar flat height="40px" color="grey darken-3">
      <v-toolbar-title class="subheading grey--text text--lighten-1">Request Parameters</v-toolbar-title>
    </v-toolbar>
    <v-data-table
            :headers="displayedHeaders"
            :items="parameters"
            hide-actions
    >
      <template v-slot:items="parameters">
        {{ parameters.item.name }}
        {{ parameters.item.in }}
        {{ parameters.item.required }}
        {{ parameters.item.schema.type }} {{ displayEnum(parameters.item.schema.enum) }}
        {{ parameters.item.description }}
      </template>
    </v-data-table>
  </v-flex>
</template>

<file_sep><template>
    <v-flex sm6 class="mr-2">
        <v-toolbar flat height="40px" color="grey darken-3">
            <v-toolbar-title class="subheading grey--text text--lighten-1">Response Codes</v-toolbar-title>
        </v-toolbar>
        <v-data-table
                :headers="headers"
                :items="responses"
                class="elevation-1"
                hide-actions
        >
            <template v-slot:items="props">
                {{ props.item.code }}
                {{ props.item.description }}
            </template>
        </v-data-table>
    </v-flex>
</template>

`

<file_sep><template>
    <v-expansion-panel
      id="components-schema"
      v-model="current">
        <v-expansion-panel-content v-for="(schema, i) in schemas" :key="i">
            <template v-slot:header>

{{ i }}

            </template>
            <v-layout row ma-2>
                <v-flex>
                    <schema-view :schema="schema"></schema-view>
                </v-flex>
            </v-layout>
        </v-expansion-panel-content>
    </v-expansion-panel>
</template>

<file_sep><template>
  <v-flex sm6 class="mr-2">
    <v-toolbar flat height="40px" color="grey darken-3">
      <v-toolbar-title class="subheading grey--text text--lighten-1">Request Example</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn v-if="isIndexRequest" @click="makeIndexRequest" flat>Try it Now</v-btn>
      <v-btn v-if="isShowRequest" @click="makeShowRequest" flat>Try it Now</v-btn>
      <v-btn v-if="response" @click="clear">Clear</v-btn>
    <v-switch
        v-if="response"
        v-model="expandAll"
        label="expand all"
        @change="rerenderViewer"
    ></v-switch>
    </v-toolbar>
      <v-card>
          <v-card-text>
              <v-layout row wrap >
                <v-flex sm6 pl-2 pr-2>
                  <v-alert
                    :value="pathVarAlert"
                    type="info"
                    v-text="pathVarAlertMsg"
                  >
                  </v-alert>
              </v-flex>
              </v-layout>
          </v-card-text>
      </v-card>
    <v-card>
      <v-card-text row wrap>
          <v-layout>
          <v-flex class="subheading grey--text text--lighten-1" pt-4 pb-4 pl-4>url:</v-flex>
          <v-flex pt-4 pb-4>{{currentUrl}}</v-flex>
          </v-layout>

              <json-viewer
                  v-if="response"
                  :key="viewerKey"
                  :value="response"
                  :expand-depth="depth"
                  theme="json-viewer"
                  copyable
          ></json-viewer>

      </v-card-text>
    </v-card>
  </v-flex>
</template>

<file_sep><template>
  <v-flex lg12 class="pa-1">
    <v-toolbar height="40px">
      <v-toolbar-title>Request</v-toolbar-title>
    </v-toolbar>
    <v-card :class="[color, 'darken-5']">
      <v-card-text>
        <v-layout row ma-2>
          <request-parameters
                  :entry="entry"
                  :version="version"
                  :baseUrl="baseUrl"
          ></request-parameters>
          <get-request-example
                  v-if="entry.method === 'get'"
                  :entry="entry"
                  :version="version"
                  :baseUrl="baseUrl"
          >
          </get-request-example>
          <post-patch-req-example
                  v-if="['post', 'patch'].includes(entry.method)"
                  :entry="entry"
          ></post-patch-req-example>
        </v-layout>
      </v-card-text>
    </v-card>
  </v-flex>
</template>

<file_sep><template>
  <v-flex lg12 class="pa-1">
    <v-toolbar height="40px">
      <v-toolbar-title>Response</v-toolbar-title>
    </v-toolbar>
    <v-card :class="[color, 'darken-5']">
      <v-card-text>
        <v-layout row ma-2>
          <response-codes :responses="entry.responses"></response-codes>
          <response-schema :schema="entry.example"></response-schema>
        </v-layout>
      </v-card-text>
    </v-card>
  </v-flex>
</template>

<file_sep>import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';

Vue.use(Vuex);

const CLEAR_ALL = 'CLEAR_ALL'
const SET_IDS = 'SET_IDS'
const SET_PATH_VAR = 'SET_PATH_VAR'
const SET_QUERY_PARAMS = 'SET_QUERY_PARAMS'
const SET_TAGS = 'SET_TAGS'

const state = {
  endpointData : {
    pets: {
      idPathVar: '',
      queryParams: {}
    }
  }
};

const getters = {
  getIndexParams:(state) => (tag) => {
    console.log(tag)
    return Object.entries(state.endpointData[tag].queryParams).
        filter(([k, v]) => k !== 'include').
        reduce((accum, [k, v]) => ({...accum, [k]: v}), {})
  },
  getPathVarByTag: (state, getters) => (localState) => {
    const tag = getTag(state, localState);
      return tag !== 'noTag' ?
          state.endpointData[tag].idPathVar :
          ''

  },
  getPathVarsByTag: (state, getters) => (localState) => {
    const tag = getTag(state, localState)
    return state.endpointData[tag].pathVars
  },
  getQueryParamsByTag: (state, getters) => (localState) => {
      const tag = getTag(state, localState);
      return isShowOrSelfMethod(localState) ?
              getters.getShowOrSelfParams(tag) :
              getters.getIndexParams(tag)
      },
  getQueryStringByTag: (state, getters) => (localState) => {
    const queryParams = getters.getQueryParamsByTag(localState)
    const filteredParamsArrayByTag = Object.entries(queryParams)
    .filter(([key, value]) => value.length >= 1)

    const queryStringArray = filteredParamsArrayByTag.map(
        ([key,value]) => typeof value === 'string' ?
            `${key}=${value}`:
            `${key}=${value.join(',')}`)

    return queryStringArray.join('&')
  },
  getShowOrSelfParams: (state) => (tag) => {
    return Object.entries(state.endpointData[tag].queryParams).filter(
        ([k, v]) => k === 'include').reduce(
            (accum, [k, v]) => ({...accum, [k]: v}), {})
  },
  getTag: (state) => (localState) =>
     localState.entry !== undefined && Object.keys(state.endpointData) !== undefined ?
      Object.keys(state.endpointData).
          filter(k => localState.entry.tags.includes(k))[0] :  'noTag'
}

const actions = {
  clearAll({ commit }, localState) {
    commit('CLEAR_ALL', localState)
  },
  async setIds({ commit }, localState) {
    const ids = await axios.get(localState.requestUrl, localState.config).
        then(response => {
          return response.data.data.map(entry => entry.id)
        })
    localState.ids = ids.slice(0,3)

    commit('SET_IDS', localState);
  },
  setPathVar({ commit }, localState) {
    commit('SET_PATH_VAR', localState)
  },
  setQueryParams({ commit }, localState) {
    commit('SET_QUERY_PARAMS', localState)
  },
  setTags({ commit }, localState) {
    commit('SET_TAGS', localState)
  }
};

const mutations = {
  [CLEAR_ALL](state, emptyLocalState){
    const tag = getTag(state, emptyLocalState)
    // if (isShowOrSelfMethod(emptyLocalState)) {
      state.endpointData[tag].idPathVar = ''
    // }
    state.endpointData[tag].queryParams =
        Object.entries(state.endpointData[tag].queryParams).reduce(
            (accum, [paramKey, paramVal]) => ({...accum, [paramKey]:''}), {})
  },
  [SET_IDS](state, localState) {
    const tag = getTag(state, localState)
    state.endpointData[tag].pathVars = localState.ids
  },
  [SET_PATH_VAR](state, localState) {
    const tag = getTag(state, localState)
    console.log(tag)
    state.endpointData[tag].idPathVar = localState.idPathVar
    console.log(localState.idPathVar)
    console.log(state.endpointData[tag])
  },
  [SET_QUERY_PARAMS](state, localState) {
    const tag = getTag(state, localState)
    console.log(tag)
    state = {
      ...state.endpointData,
      [tag]: {
        ...state.endpointData[tag]
        .queryParams = localState.queryParams
      }
    }
  },
  [SET_TAGS] (state, localState) {
    const tag = localState.entry.tags[0]
    state.endpointData[tag] = {idPathVar: '', queryParams: {}}
  }
};

export default new Vuex.Store({
  state,
  getters,
  actions,
  mutations
})

const getTag = (state, localState) => Object.keys(state.endpointData).
    filter(k => localState.entry.tags.includes(k))[0]

const isShowMethod = (localState) =>
    localState.entry.method === 'get' && localState.entry.path.indexOf('{id}') !== -1

const isShowOrSelfMethod = (localState) =>
    isShowMethod(localState) || localState.entry.path === '/me'

<file_sep><template>
  <v-flex class="mr-2">
    <v-toolbar flat height="40px" color="grey darken-3">
      <v-toolbar-title class="subheading grey--text text--lighten-1">{{ schema.title }}</v-toolbar-title>
    </v-toolbar>

{{ schema.description }}

required

{{ item }}

properties

          name
          type
          description

          {{ key }}
          {{ item.type }}
          {{ item.description }}

  </v-flex>
</template>

<file_sep># vue-swagger
vue-swagger is an implementation of an OpenAPi (Swagger)
documentation user interface using Vue.js, Vuex and Vuetify.

It is intended for API's that are
[JSON-API](https://jsonapi.org/) compliant and for API definitions compliant with [OpenApi 3](https://swagger.io/specification/).
If you're not seeking compliance with these specs, you're not going to enjoy your experience with vue-swagger.

###The Dream

The end goal is to be able to:
* Install/clone (not sure yet how it will be distributed) vue-swagger
* Use the `VueSwag` component in an existing Vue app, passing a uri to an api-definition yaml as a prop:
* `<vue-swag
swagger-yaml="http://uri.to.your.yaml"></vue-swag>`
* run `npm run install`
* run `npm run serve`, and then BAM, a full featured API documentation site appears.

##The Current Reality
Where it stands: As developer you can start this project as a standalone application using the steps provided below:
* Clone the repo
* Provide a URI to your yaml as prop
* run `npm run install`
* run `npm run serve`, and then...a semi-functional, not-quite complete api documentation site appears
(as long as your definition corresponds to vue-swagger's strong opinions about complying with JSON-API).
 You'll see much of your API described, including paths, parameters, and request urls, versioning, and schemas.
And provided you don't have security set up on your api, you should be able to try your
basic GET requests and see the results right out of the box.

TODOS:
* Set up the project to use Security schemes in OpenApi api definitions to enable 'Try it Now' for auth-required api's
* Vuex is a dependency, so we need to find a way to generalize or easily customize the `store.js`
  file to meet the needs of anyone's application
* Create a robust sample yaml that makes vue-swagger's opinions very clear
* Set up vue-swagger specific error handling in the code to clearly and kindly guide developers to comply with vue-swagger's
aforementioned opinions.

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```
### For your first test Run
After the app is running to see the example api site, copy and paste your
'Network' url as described in your terminal:

`App running at: ...
Network: http://some.IP.Address:somePortNumber`
And paste it in as your uri for the `swagger-yaml` prop. The end result would look like this:
* `<vue-swag swagger-yaml="http://some.IP.Address:somePortNumber/openapi.yaml"> </vue-swag>`

The site will then use the sample `openapi.yaml` file located in the public directory.
### Compiles and minifies for production
```
npm run build
```

### Run your tests
```
npm run test
```

### Lints and fixes files
```
npm run lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

languages: Markdown Vue JavaScript

repo_name: Bradleywboggs/vue-swagger


text:
<repo_name>vvsvvs/Developing-data-products<file_sep>/Readme.md
To run the App Locally on your PC in R, follow the following instructions: Change to the directories with these files Check the dependencies to see if you are missing locally any package:

install.packages("shiny")
install.packages('devtools')
devtools::install_github('rstudio/shinyapps')
install.packages('ggplot2') Load locally the necessary libraries:
library(shiny)
library(devtools)
library(ggplot2)
library(shinyapps) Type: runApp()

branch_name: refs/heads/master

repo_language: Markdown

repo_name: vvsvvs/Developing-data-products


text:
<repo_name>jackillman/lanet-home<file_sep>/app/sass/main.sass
@import "fonts"
// @import "libs"
@import "vars"

@mixin medium
  @media (max-width: 1199px)
	  @content
@mixin small
  @media (max-width: 768px)
	  @content
*
	-webkit-box-sizing: border-box
	-moz-box-sizing: border-box
	box-sizing: border-box
	font-style: normal
	font-weight: normal
	&:before, &:after
		-webkit-box-sizing: border-box
		-moz-box-sizing: border-box
		box-sizing: border-box

*::-webkit-input-placeholder
	color: #666
	opacity: 1

*:-moz-placeholder
	color: #666
	opacity: 1

*::-moz-placeholder
	color: #666
	opacity: 1

*:-ms-input-placeholder
	color: #666
	opacity: 1

body input:focus:required:invalid,
body textarea:focus:required:invalid
	color: #666
body input:required:valid,
body textarea:required:valid
	color: #666

html, body
	height: 100%

body
	font-size: 16px
	min-width: 320px
	position: relative
	line-height: 1.65
	font-family: $roboto-font
	overflow-x: hidden
	margin: 0
p
	margin: 0
a
	text-decoration: none
.img-responsive
	display: block
	max-width: 100%
	height: auto

.text-center
	text-align: center

::selection
	background-color: $accent
	color: #fff
.wrapper
	position: relative
	background: rgb(53,67,74)
	.container
		position: relative
		width: 1168px
		padding: 0 14px
		margin: 0 auto
		z-index: 1
		height: 100%
		@include medium
    		width: 750px
    		padding: 0 15px
		@include small
			width: 320px
	.header__wrap
		background: rgba(52, 66, 73, 0.4)
		position: absolute
		z-index: 10
		top: 0
		left: 0
		height: 84px
		width: 100%
		display: flex
		align-items: center

		.header
			display: flex
			align-items: center
			height: 100%
			z-index: 10
			position: relative
			.logo-block
				display: inline-flex
				width: 490px
				a
					display: flex
					align-items: center
					width: auto
					z-index: 11
					position: relative
					svg
						width: 36px
					span
						font-family: $roboto-condensed-reg-font
						font-size: 30px
						line-height: 35px
						color: #FFFFFF
						margin-left: 6px
			.menu
				list-style-type: none
				padding: 0
				margin: 0
				display: flex
				width: 500px
				justify-content: space-between
				li
					a
						font-size: 18px
						line-height: 21px
						text-transform: uppercase
						color: #FFFFFF
	.slider__wrap
		height: 700px
		background: url("/img/slider/slider-bg.png") no-repeat center
		background-size: cover
		position: relative
		padding-top: 80px
		&:after
			position: absolute
			content: ""
			width: 100%
			height: 100%
			background: #000
			top: 0
			opacity: 0.2
			z-index: 5
		.container-slider
			position: relative
			z-index: 10
			width: 100%
			height: 100%
			.swiper-container
				height: 100%
				padding-top: 140px
				.swiper-wrapper
					height: 100%
					.swiper-slide
						.slider-content
							position: relative
							z-index: 10
							display: flex
							width: 1168px
							// padding: 0 14px
							margin: 0 auto
							.text-box
								width: 560px

								h2
									font-weight: bold
									font-size: 48px
									line-height: 56px
									letter-spacing: 0.05em
									margin: 0px 0px 20px
									color: #fff
									height: 100px
								p
									font-size: 18px
									line-height: 30px
									color: #fff
									padding-right: 40px
								a
									position: relative
									width: 247px
									height: 46px
									background: #00A6BA
									border-radius: 8px
									font-weight: 400
									line-height: 22px
									font-size: 17px
									text-transform: uppercase
									margin-top: 50px
									display: inline-block
									text-align: right
									padding: 12px 13px 0
									cursor: pointer
									text-decoration: none
									color: #fff
									margin-left: 4px
									transition: all 0.5s
									box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.29)
									&:after
										content: ''
										position: absolute
										top: -5px
										left: -5px
										background: url(../img/slider/logo_button.png) center no-repeat;
										background-size: contain
										width: 57px
										height: 57px

							.img-box
								width: calc(100% - 560px)
								display: flex
								justify-content: flex-end
								position: relative
								img
									width: auto
									// margin: 0 auto
								.fragments
									width: 100%
									height: 100%
									position: absolute
									p

										top: 0px
										background: #4E767E
										box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.25)
										font-size: 24px
										line-height: 28px
										// padding: 18px 70px
										color: #fff
										padding: 0
										display: flex
										justify-content: center
										align-items: center
									.fragment
										position: absolute
										transition: all 0.5s
									.fr-genre-1
										top: -10px
										left: 270px
										width: 202px
										height: 69px
									.fr-genre-2
										top: 100px
										right: 0px
										font-size: 20px
										line-height: 23px
										height: 46px
										width: 126px
									.fr-genre-3
										top: 224px
										right: 6px

										height: 64px
										width: 172px
									.fr-genre-4
										top: 310px
										right: 148px
										height: 68px
										width: 246px

									.fr-genre-5
										left: 0px
										top: 220px
										height: 78px
										width: 196px
									.fr-genre-6
										top: 70px
										left: -40px
										height: 78px
										width: 196px
									.fr-bonus-1
										top: -55px
										left: 250px
									.fr-bonus-2
										top: 105px
										left: 455px
									.fr-bonus-3
										top: 260px
										left: 320px
									.fr-bonus-4
										top: 310px
										left: 90px
									.fr-bonus-5
										top: 135px
										left: -20px
									.fr-bonus-6
										top: 10px
										left: -45px
						.slide1
							.img-box
								.fragment
									&:hover
										background: #4E666A

				.swiper-scrollbar,
				.swiper-button-prev,
				.swiper-button-next
					display: none
				.swiper-pagination
					text-align: left
					left: 20%
					.swiper-pagination-bullet
						background: rgb(88,109,112)
					.swiper-pagination-bullet-active
						background: #93B9BE

	.tariffs
		height: 200px
		background: yellow
	.juicy
		padding-top: 60px
		@include medium
			padding: 40px 0 0px
		@include small
			padding-top: 30px
		.container
			position: relative
			z-index: 5
			.juicy__box
				display: flex
				flex-wrap: wrap
				.item
					width: 50%
					height: 420px
					display: flex
					align-items: center
					flex-direction: column
					padding: 0
					background: 0 0
					margin-bottom: 40px
					@include medium
						width: 100%
						margin-bottom: 50px
					h3
						font-style: normal
						font-weight: bold
						line-height: 42px
						font-size: 36px
						color: #fff
						margin-top: 10px
						margin-bottom: 40px
						position: relative
						z-index: 11
						width: 100%
						@include medium
							margin-bottom: 30px
							margin-top: 30px
							width: 100%
						@include small
							font-size: 28px
							line-height: 33px
						.number
              				font-size: 48px
					p
						font-style: normal
						font-weight: 400
						line-height: 28px
						font-size: 18px
						letter-spacing: .01em
						color: #fff
						position: relative
						z-index: 11
						margin: 0
						width: 100%
					a.watch-now
						width: 215px
						height: 46px
						background: #00A6BA
						font-style: normal
						font-weight: 400
						line-height: 22px
						font-size: 17px
						text-transform: uppercase
						color: #fff
						text-align: center
						border-radius: 8px

						align-self: flex-start
						padding: 12px 0
						z-index: 11
						text-decoration: none
						transition: all 0.5s
						box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.29)
						cursor: pointer
						@include small
							margin: 0 auto
						&:hover
							background: #1bbbd1

					.btn-block
						display: flex
						width: 100%
						margin-top: 80px
						height: 56px
						position: relative
						z-index: 11
						@include medium
							margin-top: 40px
						@include small
							flex-direction: column
							height: 100%
							align-items: center
						.google-watch
							img
								width: 220px
								height: 56px
						.button_lanet-tv-online
							text-decoration: none
							color: #fff
							display: flex
							width: 246px
							height: 57px
							position: relative
							bottom: 1px
							padding: 0 9px
							margin: 0 12px
							border: 1px solid #a6a6a6
							background: #000
							border-radius: 8px
							z-index: 1
							text-decoration: none
							@include medium
								margin-left: 0
							@include small
								margin-bottom: 20px
							&:hover
								background: #000
							.lanet-tv-logo
								background: url(../img/lanet-tv.svg) center no-repeat
								background-size: cover
								width: 30px
								height: 30px
								display: block
								margin: auto 0 auto 2px
							.button_tv-online_text
								display: flex
								flex-direction: column
								align-items: flex-start
								margin: auto 0
								justify-content: center
								padding-left: 10px
								text-transform: uppercase
								.text-top
									font-size: 12px
									margin-bottom: 3px
							.text-bottom
								display: block
								width: 184px
								font-size: 18px
								text-align: left
								line-height: 1
				.juicy-text
					justify-content: flex-start
					padding-top: 0
					z-index: 11
					position: relative
					@include medium
						padding-top: 0px
						height: 300px
					@include small
						height: 100%
				.juicy-img
					@include medium
						width: 600px
						display: block
						text-align: center
						margin: 20px auto 0
					@include small
						width: 100%
						margin-top: 0px
					img
						width: 100%
						position: relative
						z-index: 11
				.img-container
					img
						position: absolute
						width: auto
						left: 0
						top: 0
						transition-timing-function: ease-in
						@include small
							width: 100%
				.img-first
					justify-content: center
					position: relative
					z-index: 11
					@include medium
						order: 1
						height: 310px
					@include small
						height: 180px
					.img-container
						width: 100%
						position: relative
						height: 310px
						@include small
							height: 180px

				.img-last
					justify-content: center
					position: relative
					margin-bottom: 0px
					img
						width: auto
						@include medium
							position: relative
							height: 340px
						@include small
							height: auto
							width: 100%
					@include medium
						order: 3
						width: 100%
						display: block
						text-align: center
						margin: 0 auto 40px
						height: 340px
					@include small
						height: 100%

					.img-container
						width: 100%
						position: relative
						height: 100%

				.text-first
					padding-left: 40px
					z-index: 11
					position: relative
					@include medium
						order: 2
						padding-left: 0
					.juicy_text_block
       					margin-left: 0px

				.text-last
					padding-left: 0
					z-index: 11
					position: relative
					padding-right: 90px
					margin-bottom: 0px
					@include medium
						order: 4
						padding-right: 0
						margin-bottom: 10px
					@include small
						margin-bottom: 40px
					h3
						margin-top: 10px
						@include medium
							margin-top: 0px
					p
						margin-bottom: 60px
						@include medium
							margin-bottom: 40px

	.advantages
		position: relative
		z-index: 22
		background: #2e3c43
		padding-top: 50px
		padding-bottom: 40px
		@include medium
			padding-bottom: 50px
		@include small
			padding-bottom: 40px

		h2
			font-style: normal
			font-weight: 600
			line-height: 45px
			font-size: 40px
			color: #1bbbd1
			text-align: center
			margin-top: 0px
			margin-bottom: 60px
			text-transform: uppercase
			@include medium
				margin: 0
				font-size: 34px
				text-align: left
			@include small
				font-size: 30px
				line-height: 40px
		&__box
			display: flex
			justify-content: space-between
			flex-wrap: wrap
			@include medium
				margin-top: 40px
			.item
				width: 300px
				height: 240px
				display: flex
				flex-direction: column
				align-items: center

				color: #fff
				@include medium
					height: 240px

				@include small
					height: auto
					margin-bottom: 36px
					&:nth-child(1)
						order: 1

					&:nth-child(2)
						order: 3
					&:nth-child(3)
						order: 5
					&:nth-child(4)
						order: 2
					&:nth-child(5)
						order: 4
					&:nth-child(6)
						order: 6
				&_container
					display: flex
				img
					margin-bottom: 40px
					transition: all 0.5s
					height: 60px
					vertical-align: middle
					@include medium
						margin-bottom: 30px
				&:hover img
					opacity: 0.6
				.text
					h3
						text-align: center
						font-style: normal
						font-weight: 400
						line-height: 23px
						font-size: 24px

						margin: 0px auto 20px
						text-align: center

						color: rgba(255, 224, 143, 0.87)
						@include medium
							font-size: 24px
							line-height: 23px

					p
						text-align: center
						font-style: normal
						font-weight: 400
						line-height: 24px
						font-size: 18px
						text-align: center
						letter-spacing: .01em
						color: rgba(255, 255, 255, 0.87)
						@include medium
							line-height: 24px
		.btn-block
			display: flex
			justify-content: center
			@include small
				margin-top: 10px

			a.watch-now
				width: 215px
				height: 46px
				background: #00A6BA
				font-style: normal
				font-weight: 400
				line-height: normal
				font-size: 18px
				text-transform: uppercase
				color: #fff
				text-align: center
				padding: 12px 0
				line-height: 21px
				border-radius: 8px
				align-self: flex-start
				z-index: 11
				text-decoration: none
				display: inline-block
				transition: all 0.5s
				cursor: pointer
				box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.29)
				&:hover
          			background: #1bbbd1
	.about
		background: #263841
		height: 210px
		padding-top: 30px
		@include medium
			height: 302px
			padding-top: 50px
		@include small
			height: 100%
			padding-top: 32px
			padding-bottom: 32px
		.container
			display: flex
			align-items: center
			flex-direction: column

			h3
				line-height: 1
				font-size: 24px
				width: 100%
				text-align: left
				color: #fff
				margin-top: 0px
				@include medium
				line-height: 1.5
			p
				line-height: 1.5
				color: #fff
	.footer
		height: 92px
		@include small
			height: auto
		.container

			.left-side
				height: 92px
				display: flex
				align-items: center
				width: 510px
				@include small
					width: 100%
					height: auto
					padding-top: 23px
					padding-bottom: 23px
				p

					font-size: 14px
					line-height: 20px
					color: #fff

@import "media" // Всегда в конце
<file_sep>/app/js/common.js
	// параллакс для первого и второго блока в блоке juicy
	function parallax(){
		// блок, в котором обьекты двигаются
		let parentJuicy = document.querySelector('.juicy'),
			blockWidth = parentJuicy.getBoundingClientRect().width,
			blockHeight = parentJuicy.getBoundingClientRect().height;

		let parallax_images_config = [
			{speed: 1.0, name: '.parallax_area-1_1', direction: 'translateX', speedCof: 1},
			{speed: 0.8, name: '.parallax_area-1_2', direction: 'translateX', speedCof: 1},
			{speed: 0.6, name: '.parallax_area-1_3', direction: 'translateX', speedCof: 1},
			{speed: 0.4, name: '.parallax_area-1_4', direction: 'translateX', speedCof: 1},
			// {speed: 1.0, name: '.parallax_area-2_1', direction: 'translateY', speedCof: 2},
			// {speed: 0.8, name: '.parallax_area-2_2', direction: 'translateY', speedCof: 2},
			// {speed: 0.6, name: '.parallax_area-2_3', direction: 'translateY', speedCof: 2}
		];

		parentJuicy.addEventListener('mousemove',function(e){
			let clientX = e.clientX,
				clientY = e.clientY;

			parallax_images_config.forEach((item) => {
				let imageConfig = getImageConfig(clientY, clientX, item);

				// плавно перемещаем картинки, если разница между начальной и будущей цифрой трансформации отличается на 20
				if (Math.abs(imageConfig.start - imageConfig.finish) > 20) {
					slowParallax(imageConfig.imgWrapper, imageConfig.start, imageConfig.finish);
				}

				// задаем картинкам необходимое изменение
				imageTransform(imageConfig.imgWrapper, item.direction, imageConfig.formula);
			});
		});

		// узнаем и высчитываем всю информацию про картинку
		function getImageConfig(clY, clX, image){
			let imageWrapper = document.querySelector(image.name) || '',
				startedTransform = 0,
				finishedTransform = 0,
				formula = 0;

			if (image.direction === 'translateY') {
				formula = (blockHeight/2 - clY)/100*image.speed*image.speedCof;
				startedTransform = new WebKitCSSMatrix(window.getComputedStyle(imageWrapper).webkitTransform).m42;
			} else if (image.direction === 'translateX') {
				formula = (blockWidth/2 - clX)/100*image.speed*image.speedCof;
				startedTransform = new WebKitCSSMatrix(window.getComputedStyle(imageWrapper).webkitTransform).m41;
			}

			finishedTransform = formula/image.speedCof * 6;

			return {
				'formula': formula,
				'start': startedTransform,
				'finish': finishedTransform,
				'imgWrapper': imageWrapper
			};
		}

		// плавное перемещение картинки c изменением скорости плавности
		function slowParallax(img, start, finish){
			let currentPercent = 5; /*стартовая скорость изменения транфсормации*/

			img.style.transitionDuration = currentPercent/50 + 's';
			let showPercent = setInterval(function() {
				if (currentPercent <= 0) {
						clearInterval(showPercent);
				} else if (currentPercent <= 3) {
						currentPercent -= 1; /*число, на которое надо уменьшать скорость изменения транфсормации*/
						img.style.transitionDuration = currentPercent/50 + 's';
				} else {
						currentPercent = 1;
				}
			}, 100); /*скорость с которой уменьшается скорость изменения транфсормации*/
		}

		// Запись трансформации картинки в ее атрибут style
		function imageTransform(wrapp, direction, formula){
			wrapp.style.webkitTransform = direction + '(' + formula + '%)';
			wrapp.style.transform = direction + '(' + formula + '%)';
		}
	}

	window.addEventListener('load', parallax);<file_sep>/app/sass/_vars.sass
$roboto-font: "roboto-example", sans-serif
$bold-font: "roboto-example-bold"
$roboto-condensed-reg-font: "roboto-condensed-reg"

$accent: orange

languages: Sass JavaScript

repo_language: Sass

repo_name: jackillman/lanet-home


text:
<file_sep>var express = require('express');
var router = express.Router();

var ACCOUNT = require('../db/models/accounts.js');

var util = {
  hasPostData : function(name , body){
    return (body[name] && body[name] !="")
  }
}

/* GET users listing. */
router.get('/', function(req, res, next) {
  res.send('respond with a resource');
});

router.get('/list' , function(req , res , next){
  ACCOUNT.findAll()
  .then(function(data){
    res.render('./user/list' , { title : 'USER LIST' , data : data })
  },
  function(err){
    console.log('ERR OCCURED' , err);
    res.redirect('../');
  })
});

router.post('/list' , function(req , res, next){
  // post 데이터 확인
  ACCOUNT.create({
    NAME : req.body.name,
    EMAIL : req.body.email,
    HP : req.body.hp
  }).then(function(data){
    res.redirect('./list');
  }, function(err){
    console.log('ERR OCCURED' , err);
    res.redirect('./list');
  })
});

module.exports = router;
<file_sep>var express = require('express');
var mysql = require('mysql');
var q = require('q');

// var conn = mysql.createConnection({
//   host : 'east-mariadb-dev.cpvfhejojors.ap-northeast-2.rds.amazonaws.com',
//   port : 3306,
//   user : 'gomja',
//   password : '<PASSWORD>:-)',
//   database : 'DEV'
// });

var pool= mysql.createPool({
    host : 'east-mariadb-dev.cpvfhejojors.ap-northeast-2.rds.amazonaws.com',
    port : 3306,
    user : 'gomja',
    password : '<PASSWORD>:-)',
    database : 'DEV'
});

pool.on('error' , function(){
    console.log("DATABASE CONNECTION ERROR OCCURRED");

})

module.exports = {
    pool : (function(){ return pool })(),
    query : function(query){
        var deferred = q.defer();
        pool.getConnection(function(err , conn){
            if(err){ console.log('DB CONNECTION ERR OCCURRED!!' , err);
                deferred.reject(err);
            }
            conn.query(query , function(e,data){
                if(e){
                    console.log('DB QUERY ERR OCCURRED' , e);
                    deferred.reject(e);
                }
                conn.release();
                console.log('CHECK HERE=======================')
                console.log(arguments);
                console.log('CHECK HERE=======================')
                deferred.resolve(data);
            });
        });
        return deferred.promise;
    }
}<file_sep>extends ../layout

block content
    form(action='/users/list' method='POST')
        h1= title

        p LIST PAGE!!!!

        hr
        div
            input(name='name' , type='text' placeholder='NAME' style='width:75px;')
            input(name='email' , type='text' placeholder='EMAIL')
            input(name='hp' , type='text' placeholder='HP')

            span
                button(type='submit') 등록
        hr

        if(!error)
            h1=error

        table
            thead
                tr
                    td ACCOUNTNO
                    td NAME
                    td EMAIL
                    td HP
            tbody
                if(data)
                    each user in data
                        tr
                            td= user.ACCOUNTNO
                            td= user.NAME
                            td= user.EMAIL
                            td= user.HP
<file_sep>var express =  require('express');
var mysql = require('mysql');
var q = require('q');

var db = {
    connect : function(){
        var conn = mysql.createConnection({
            host : 'east-mariadb-dev.cpvfhejojors.ap-northeast-2.rds.amazonaws.com',
            port : 3306,
            user : 'gomja',
            password : '<PASSWORD>:-)',
            database : 'DEV'
        });

        var deferred = q.defer();

        conn.connect(function(err){
            if(err){
                deferred.reject(err);
            }
            else{
                deferred.resolve(conn);
            }
        })

        return deferred.promise;
    },
    // transaction
    tran : function(){
        var deferred = q.defer();

        this.connect().then(function(conn){
           conn.beginTransaction(function(err){
               if(err) {
                   deferred.reject(err);
                   conn.rollback(function(e){
                        console.log('FATAL!! ROLLBACK ERROR OCCURRED');
                        throw e;
                   });
               }
               // when all works finish, commit transaction
               deferred.resolve(conn);
           })
        } , function(e){
            deferred.reject(e);
        });

        return deferred.promise;
    },
    // without transaction
    query : function(query, conn){
        var deferred = q.defer();

        if(!conn){
            db.connect()
            .then(function(connection){
                connection.query(query , function(e, data){
                    if(e){ deferred.reject(e); }
                    else{
                        deferred.resolve(data);
                        console.log(data);
                    }
                })
            } , function(err){
                deferred.reject(err);
            })
        }
        else{
            conn.query(query , function(e, data){
                if(e){ deferred.reject(e); }
                else{
                    deferred.resolve(data);
                }
            });
        }

        return deferred.promise;
    },
    queryWithTransaction : function(query){
        var deferred = q.defer();

        db.tran()
        .then(function(conn){
            db.query(query , conn).
            then(function(data){
                conn.commit(function(err){
                    if(err){ deferred.reject(err); }

                    deferred.resolve(data);
                });
            } , function(err){
                conn.rollback();
                deferred.reject(err);
            })
        } , function(err){
            deferred.reject(err);
        });

        return deferred.promise;
    }
}

module.exports = db;

languages: JavaScript Pug

repo_language: JavaScript

repo_name: YOOGOMJA/my-first-git