Skip to content

Instantly share code, notes, and snippets.

@ChadTaljaardt

ChadTaljaardt/CampaignCreate.vue

Created September 26, 2016 14:46
Show Gist options
  • Save ChadTaljaardt/9f97f0dbecacfdd0f1c41b8a5f18285c to your computer and use it in GitHub Desktop.
Save ChadTaljaardt/9f97f0dbecacfdd0f1c41b8a5f18285c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
CampaignCreate.vue
<style>
</style>
<template>
<div class="col-lg-6">
<!-- Mega Form -->
<div class="block block-bordered">
<div class="block-header bg-gray-lighter">
<h3 class="block-title">Create Campaign</h3>
</div>
<div class="block-content">
<form class="form-horizontal push-10-t push-10">
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<div class="col-lg-12">
<label for="Name">Name</label>
<input class="form-control input-lg" type="text" v-model="name" id="Name" name="Name" placeholder="Campaign Name..">
</div>
</div>
<div class="form-group">
<div class="col-lg-12">
<label for="Name">Campaign URL</label>
<input class="form-control input-lg" type="text" v-model="url" id="url" name="url" placeholder="Campaign URL..">
</div>
</div>
<div class="form-group">
<div class="col-lg-12">
<label for="traffic-source">Traffic Source</label>
<select class="js-select2 form-control select2-hidden-accessible" id="traffic-source" name="traffic-source" data-placeholder="Choose one.." tabindex="-1" aria-hidden="true" v-model="trafficsource">
<option></option>
<option value="1">HTML</option>
<option value="2">CSS</option>
<option value="3">JavaScript</option>
<option value="4">PHP</option>
<option value="5">MySQL</option>
<option value="6">Ruby</option>
<option value="7">AngularJS</option>
</select>
<span class="select2 select2-container select2-container--default" dir="ltr" style="width: 100%;">
<span class="selection">
<span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-example-select2-container">
<span class="select2-selection__rendered" id="select2-example-select2-container">
<span class="select2-selection__placeholder">Choose one..</span>
</span>
<span class="select2-selection__arrow" role="presentation">
<b role="presentation"></b>
</span>
</span>
</span>
<span class="dropdown-wrapper" aria-hidden="true"></span></span>
</div>
</div>
<div class="form-group">
<div class="col-lg-12">
<select class="js-select2 form-control select2-hidden-accessible" id="example-select2" name="example-select2" style="width: 100%;" data-placeholder="Choose one.." tabindex="-1" aria-hidden="true" v-model="country">
<option></option>
<option value="1">HTML</option>
<option value="2">CSS</option>
<option value="3">JavaScript</option>
<option value="4">PHP</option>
<option value="5">MySQL</option>
<option value="6">Ruby</option>
<option value="7">AngularJS</option>
</select>
<span class="select2 select2-container select2-container--default" dir="ltr" style="width: 100%;">
<span class="selection">
<span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-example-select2-container">
<span class="select2-selection__rendered" id="select2-example-select2-container">
<span class="select2-selection__placeholder">Choose one..</span>
</span>
<span class="select2-selection__arrow" role="presentation">
<b role="presentation"></b>
</span>
</span>
</span>
<span class="dropdown-wrapper" aria-hidden="true"></span></span>
</div>
</div>
<div class="form-group">
<fieldset id="group1">
<label class="col-xs-12">destination</label>
<div class="col-xs-12">
<label class="radio-inline" for="example-inline-radio1">
<input type="radio" id="radio-destination-1" name="radio-destination-1" value="Flow" v-model="destination">Flow
</label>
<label class="radio-inline" for="example-inline-radio2">
<input type="radio" id="radio-destination-2" name="radio-destination-2" value="Path" v-model="destination">Path
</label>
<label class="radio-inline" for="example-inline-radio3">
<input type="radio" id="radio-destination-3" name="radio-destination-3" value="URL" v-model="destination">URL
</label>
</div>
</fieldset>
</div>
<div class="form-group" v-if="destination != 'Flow'">
<fieldset id="group3">
<label class="col-xs-12">Redirect Mode</label>
<div class="col-xs-12">
<label class="radio-inline" for="example-inline-radio1">
<input type="radio" id="radio-redirect-1" name="radio-redirect-1" value="302" v-model="redirect">302
</label>
<label class="radio-inline" for="example-inline-radio2">
<input type="radio" id="radio-redirect-2" name="radio-redirect-2" value="Meta Refresh" v-model="redirect">Meta Refresh
</label>
<label class="radio-inline" for="example-inline-radio3">
<input type="radio" id="radio-redirect-3" name="radio-redirect-3" value="Double Meta Refresh" v-model="redirect">Double Meta Refresh
</label>
</div>
</fieldset>
</div>
<div class="form-group">
<fieldset id="group2">
<label class="col-xs-12">Cost Model</label>
<div class="col-xs-12">
<label class="radio-inline" for="example-inline-radio1">
<input type="radio" id="radio-costmodel-1" name="radio-costmodel-1" value="DNT" v-model="costmodel">Don't track Costs
</label>
<label class="radio-inline" for="example-inline-radio2">
<input type="radio" id="radio-costmodel-2" name="radio-costmodel-2" value="CPC" v-model="costmodel">CPC
</label>
<label class="radio-inline" for="example-inline-radio3">
<input type="radio" id="radio-costmodel-3" name="radio-costmodel-3" value="CPA" v-model="costmodel">CPA
</label>
<label class="radio-inline" for="example-inline-radio4">
<input type="radio" id="radio-costmodel-4" name="radio-costmodel-4" value="CPM" v-model="costmodel">CPM
</label>
<label class="radio-inline" for="example-inline-radio5">
<input type="radio" id="radio-costmodel-5" name="radio-costmodel-5" value="Auto" v-model="costmodel">Auto
</label>
</div>
</fieldset>
</div>
<div class="form-group" v-if="costmodel != 'DNT'">
<div class="col-lg-12">
<label for="Name">{{costmodel}}</label>
<input class="form-control input-lg" type="text" v-model="cost" id="cost" name="cost" placeholder="Campaign Cost..">
</div>
</div>
<div class="col-xs-6 col-lg-4">
<button class="btn btn-minw btn-primary" type="button" @click="create()">Create Campaign</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="col-lg-6">
<!-- Mega Form -->
<div class="block block-bordered">
<div class="block-header bg-gray-lighter">
<h3 class="block-title">Create Campaign</h3>
</div>
<div class="block-content">
<flow-component></flow-component>
</div>
</div>
</div>
</template>
<script>
export default {
data : function () {
return {
name : '',
url : '',
trafficsource: '',
country: '',
costmodel: 'DNT',
destination: 'Flow',
cost: '0',
redirect: ''
};
},
methods : {
create : function () {
console.log(this.name);
this.$http.post('/api/campaign/create', this.$data)
.then(response => {
alert(response.data);
});
}
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment