update success and fail messages for submitting reports

<template>

          Well Activity Submission Preview

                Single page
                Multi page

            Back to Edit

Submit activity on a well. Try a search to see if the well exists in the system before submitting a report.

                Save
                <transition name="bounce" mode="out-in">

                </transition>

                Load
                <transition name="bounce">

                </transition>

              Your well record was successfully submitted.

          <activity-type
            v-if="currentStep === 'activityType' || (formIsFlat && displayFormSection.activityType)"
            :wellActivityType.sync="activityType"
          ></activity-type>

          <well-type class="my-3"
            v-if="currentStep === 'wellType' || (formIsFlat && displayFormSection.wellType)"
            :wellTagNumber.sync="form.well"
            :wellActivityType.sync="activityType"
            :wellClass.sync="form.well_class"
            :wellSubclass.sync="form.well_subclass"
            :intendedWaterUse.sync="form.intended_water_use"
            :units.sync="units"
            :idPlateNumber.sync="form.identification_plate_number"
            :wellPlateAttached.sync="form.well_plate_attached"
            :workStartDate.sync="form.work_start_date"
            :workEndDate.sync="form.work_end_date"
            :errors="errors"
            :fieldsLoaded="fieldsLoaded"
          />

          <person-responsible class="my-3"
            v-if="currentStep === 'personResponsible' || (formIsFlat && displayFormSection.personResponsible)"
            :drillerName.sync="form.driller_name"
            :consultantName.sync="form.consultant_name"
            :consultantCompany.sync="form.consultant_company"
            :personResponsible.sync="form.driller_responsible"
            :drillerSameAsPersonResponsible.sync="form.meta.drillerSameAsPersonResponsible"
            :errors="errors"
            :fieldsLoaded="fieldsLoaded"
          />

          <owner class="my-3"
            v-if="currentStep === 'wellOwner' || (formIsFlat && displayFormSection.wellOwner)"
            :ownerFullName.sync="form.owner_full_name"
            :ownerMailingAddress.sync="form.owner_mailing_address"
            :ownerProvinceState.sync="form.owner_province_state"
            :ownerCity.sync="form.owner_city"
            :ownerPostalCode.sync="form.owner_postal_code"
            :errors="errors"
            :fieldsLoaded="fieldsLoaded"
          />

          <location class="my-3"
            v-if="currentStep === 'wellLocation' || (formIsFlat && displayFormSection.wellLocation)"
            :ownerMailingAddress.sync="form.owner_mailing_address"
            :ownerProvinceState.sync="form.owner_province_state"
            :ownerCity.sync="form.owner_city"
            :ownerPostalCode.sync="form.owner_postal_code"
            :streetAddress.sync="form.street_address"
            :city.sync="form.city"
            :legalLot.sync="form.legal_lot"
            :legalPlan.sync="form.legal_plan"
            :legalDistrictLot.sync="form.legal_district_lot"
            :legalBlock.sync="form.legal_block"
            :legalSection.sync="form.legal_section"
            :legalTownship.sync="form.legal_township"
            :legalRange.sync="form.legal_range"
            :landDistrict.sync="form.land_district"
            :legalPID.sync="form.legal_pid"
            :wellLocationDescription.sync="form.well_location_description"
          />

          <coords class="my-3"
            v-if="currentStep === 'wellCoords' || (formIsFlat && displayFormSection.wellCoords)"
            :latitude.sync="form.latitude"
            :longitude.sync="form.longitude"
          />

          <method-of-drilling class="my-3"
            v-if="currentStep === 'method' || (formIsFlat && displayFormSection.method)"

            :groundElevation.sync="form.ground_elevation"
            :groundElevationMethod.sync="form.ground_elevation_method"
            :drillingMethod.sync="form.drilling_method"
            :otherDrillingMethod.sync="form.other_drilling_method"
            :wellOrientation.sync="form.well_orientation"
          />

          <closure-description class="my-3"
            v-if="currentStep === 'closureDescription' || (formIsFlat && displayFormSection.closureDescription)"
            :closureDescriptionSet.sync="form.decommission_description_set">

          </closure-description>

          <lithology class="my-3"
            v-if="currentStep === 'lithology' || (formIsFlat && displayFormSection.lithology)"
            :lithology.sync="form.lithologydescription_set"
          />

          <casings class="my-3"
            :key="`casingsComponent${componentUpdateTrigger}`"
            v-if="currentStep === 'casings' || (formIsFlat && displayFormSection.casings)"
            :casings.sync="form.casing_set"
            :errors="errors"
            :fieldsLoaded="fieldsLoaded"
          />

          <backfill class="my-3"
            v-if="currentStep === 'backfill' || (formIsFlat && displayFormSection.backfill)"
            :surfaceSealMaterial.sync="form.surface_seal_material"
            :surfaceSealDepth.sync="form.surface_seal_depth"
            :surfaceSealThickness.sync="form.surface_seal_thickness"
            :surfaceSealMethod.sync="form.surface_seal_method"
            :backfillAboveSurfaceSeal.sync="form.backfill_above_surface_seal"
            :backfillDepth.sync="form.backfill_above_surface_seal_depth"
          />

          <liner class="my-3"
            v-if="currentStep === 'liner' || (formIsFlat && displayFormSection.liner)"
            :linerMaterial.sync="form.liner_material"
            :linerDiameter.sync="form.liner_diameter"
            :linerThickness.sync="form.liner_thickness"
            :linerFrom.sync="form.liner_from"
            :linerTo.sync="form.liner_to"
            :linerPerforations.sync="form.linerperforation_set"
            :errors="errors"
            :fieldsLoaded="fieldsLoaded"
          />

          <screens class="my-3"
            v-if="currentStep === 'screens' || (formIsFlat && displayFormSection.screens)"
            :screenIntakeMethod.sync="form.screen_intake_method"
            :screenType.sync="form.screen_type"
            :screenMaterial.sync="form.screen_material"
            :otherScreenMaterial.sync="form.other_screen_material"
            :screenOpening.sync="form.screen_opening"
            :screenBottom.sync="form.screen_bottom"
            :screens.sync="form.screen_set"
            :errors="errors"
            :fieldsLoaded="fieldsLoaded"
          />

          <filterPack class="my-3"
            v-if="currentStep === 'filterPack' || (formIsFlat && displayFormSection.filterPack)"
            :filterPackFrom.sync="form.filter_pack_from"
            :filterPackTo.sync="form.filter_pack_to"
            :filterPackThickness.sync="form.filter_pack_thickness"
            :filterPackMaterial.sync="form.filter_pack_material"
            :filterPackMaterialSize.sync="form.filter_pack_material_size"
          />

          <development class="my-3"
            v-if="currentStep === 'wellDevelopment' || (formIsFlat && displayFormSection.wellDevelopment)"
            :developmentMethod.sync="form.development_method"
            :developmentHours.sync="form.development_hours"
            :developmentNotes.sync="form.development_notes"
          />

          <yield class="my-3"
            v-if="currentStep === 'wellYield' || (formIsFlat && displayFormSection.wellYield)"
            :productionData.sync="form.production_data_set"
          />

          <water-quality class="my-3"
            v-if="currentStep === 'waterQuality' || (formIsFlat && displayFormSection.waterQuality)"
            :waterQualityCharacteristics.sync="form.water_quality_characteristics"
            :waterQualityColour.sync="form.water_quality_colour"
            :waterQualityOdour.sync="form.water_quality_odour"
            :emsID.sync="form.ems_id"
          />

          <completion class="my-3"
            v-if="currentStep === 'wellCompletion' || (formIsFlat && displayFormSection.wellCompletion)"
            :totalDepthDrilled.sync="form.total_depth_drilled"
            :finishedWellDepth.sync="form.finished_well_depth"
            :finalCasingStickUp.sync="form.final_casing_stick_up"
            :bedrockDepth.sync="form.bedrock_depth"
            :staticWaterLevel.sync="form.static_water_level"
            :wellYield.sync="form.well_yield"
            :artesianFlow.sync="form.artesian_flow"
            :artesianPressure.sync="form.artesian_pressure"
            :wellCapType.sync="form.well_cap_type"
            :wellDisinfected.sync="form.well_disinfected"
          />

          <decommission-information class="my-3"
            v-if="currentStep === 'decommissionInformation' || (formIsFlat && displayFormSection.decommissionInformation)"
            :finishedWellDepth.sync="form.finished_well_depth"
            :decommissionReason.sync="form.decommission_reason"
            :decommissionMethod.sync="form.decommission_method"
            :sealantMaterial.sync="form.sealant_material"
            :backfillMaterial.sync="form.backfill_material"
            :decommissionDetails.sync="form.decommission_details"
          />

          <comments class="my-3"
            v-if="currentStep === 'comments' || (formIsFlat && displayFormSection.comments)"
            :comments.sync="form.comments"
            :alternativeSpecsSubmitted.sync="form.alternative_specs_submitted"
          />

          <submission-preview
            :form="form"
            :activity="activityType"
            :sections="displayFormSection"/>

               1 && !preview && !formIsFlat" @click="step > 1 ? step-- : null" variant="primary">Back
              Back to Edit

              <b-btn v-if="step < maxSteps && !formIsFlat && !preview" @click="step++" variant="primary">Next

                Preview & Submit
                Submit

Your well record was not submitted.

          {{ errors.detail }}

          <div v-for="(field, i) in Object.keys(errors)" :key="`submissionError${i}`">
            {{field | readable}} : <span v-for="(e, j) in errors[field]" :key="`submissionError${i}-${j}`">{{ e }}

        Are you sure you want to submit this activity report?

            Save

            Cancel

        Are you sure you want to load the previously saved activity report? Your current report will be overwritten.

            Load

            Cancel

</template>

<template>

          Well Activity Submission Preview

                Single page
                Multi page

            Back to Edit

Submit activity on a well. Try a search to see if the well exists in the system before submitting a report.

                Save
                <transition name="bounce" mode="out-in">

                </transition>

                Load
                <transition name="bounce">

                </transition>

          <activity-type
            v-if="currentStep === 'activityType' || (formIsFlat && displayFormSection.activityType)"
            :wellActivityType.sync="activityType"
          ></activity-type>

          <well-type class="my-3"
            v-if="currentStep === 'wellType' || (formIsFlat && displayFormSection.wellType)"
            :wellTagNumber.sync="form.well"
            :wellActivityType.sync="activityType"
            :wellClass.sync="form.well_class"
            :wellSubclass.sync="form.well_subclass"
            :intendedWaterUse.sync="form.intended_water_use"
            :units.sync="units"
            :idPlateNumber.sync="form.identification_plate_number"
            :wellPlateAttached.sync="form.well_plate_attached"
            :workStartDate.sync="form.work_start_date"
            :workEndDate.sync="form.work_end_date"
            :errors="errors"
            :fieldsLoaded="fieldsLoaded"
          />

          <person-responsible class="my-3"
            v-if="currentStep === 'personResponsible' || (formIsFlat && displayFormSection.personResponsible)"
            :drillerName.sync="form.driller_name"
            :consultantName.sync="form.consultant_name"
            :consultantCompany.sync="form.consultant_company"
            :personResponsible.sync="form.driller_responsible"
            :drillerSameAsPersonResponsible.sync="form.meta.drillerSameAsPersonResponsible"
            :errors="errors"
            :fieldsLoaded="fieldsLoaded"
          />

          <owner class="my-3"
            v-if="currentStep === 'wellOwner' || (formIsFlat && displayFormSection.wellOwner)"
            :ownerFullName.sync="form.owner_full_name"
            :ownerMailingAddress.sync="form.owner_mailing_address"
            :ownerProvinceState.sync="form.owner_province_state"
            :ownerCity.sync="form.owner_city"
            :ownerPostalCode.sync="form.owner_postal_code"
            :errors="errors"
            :fieldsLoaded="fieldsLoaded"
          />

          <location class="my-3"
            v-if="currentStep === 'wellLocation' || (formIsFlat && displayFormSection.wellLocation)"
            :ownerMailingAddress.sync="form.owner_mailing_address"
            :ownerProvinceState.sync="form.owner_province_state"
            :ownerCity.sync="form.owner_city"
            :ownerPostalCode.sync="form.owner_postal_code"
            :streetAddress.sync="form.street_address"
            :city.sync="form.city"
            :legalLot.sync="form.legal_lot"
            :legalPlan.sync="form.legal_plan"
            :legalDistrictLot.sync="form.legal_district_lot"
            :legalBlock.sync="form.legal_block"
            :legalSection.sync="form.legal_section"
            :legalTownship.sync="form.legal_township"
            :legalRange.sync="form.legal_range"
            :landDistrict.sync="form.land_district"
            :legalPID.sync="form.legal_pid"
            :wellLocationDescription.sync="form.well_location_description"
          />

          <coords class="my-3"
            v-if="currentStep === 'wellCoords' || (formIsFlat && displayFormSection.wellCoords)"
            :latitude.sync="form.latitude"
            :longitude.sync="form.longitude"
          />

          <method-of-drilling class="my-3"
            v-if="currentStep === 'method' || (formIsFlat && displayFormSection.method)"

            :groundElevation.sync="form.ground_elevation"
            :groundElevationMethod.sync="form.ground_elevation_method"
            :drillingMethod.sync="form.drilling_method"
            :otherDrillingMethod.sync="form.other_drilling_method"
            :wellOrientation.sync="form.well_orientation"
          />

          <closure-description class="my-3"
            v-if="currentStep === 'closureDescription' || (formIsFlat && displayFormSection.closureDescription)"
            :closureDescriptionSet.sync="form.decommission_description_set">

          </closure-description>

          <lithology class="my-3"
            v-if="currentStep === 'lithology' || (formIsFlat && displayFormSection.lithology)"
            :lithology.sync="form.lithologydescription_set"
          />

          <casings class="my-3"
            :key="`casingsComponent${componentUpdateTrigger}`"
            v-if="currentStep === 'casings' || (formIsFlat && displayFormSection.casings)"
            :casings.sync="form.casing_set"
            :errors="errors"
            :fieldsLoaded="fieldsLoaded"
          />

          <backfill class="my-3"
            v-if="currentStep === 'backfill' || (formIsFlat && displayFormSection.backfill)"
            :surfaceSealMaterial.sync="form.surface_seal_material"
            :surfaceSealDepth.sync="form.surface_seal_depth"
            :surfaceSealThickness.sync="form.surface_seal_thickness"
            :surfaceSealMethod.sync="form.surface_seal_method"
            :backfillAboveSurfaceSeal.sync="form.backfill_above_surface_seal"
            :backfillDepth.sync="form.backfill_above_surface_seal_depth"
          />

          <liner class="my-3"
            v-if="currentStep === 'liner' || (formIsFlat && displayFormSection.liner)"
            :linerMaterial.sync="form.liner_material"
            :linerDiameter.sync="form.liner_diameter"
            :linerThickness.sync="form.liner_thickness"
            :linerFrom.sync="form.liner_from"
            :linerTo.sync="form.liner_to"
            :linerPerforations.sync="form.linerperforation_set"
            :errors="errors"
            :fieldsLoaded="fieldsLoaded"
          />

          <screens class="my-3"
            v-if="currentStep === 'screens' || (formIsFlat && displayFormSection.screens)"
            :screenIntakeMethod.sync="form.screen_intake_method"
            :screenType.sync="form.screen_type"
            :screenMaterial.sync="form.screen_material"
            :otherScreenMaterial.sync="form.other_screen_material"
            :screenOpening.sync="form.screen_opening"
            :screenBottom.sync="form.screen_bottom"
            :screens.sync="form.screen_set"
            :errors="errors"
            :fieldsLoaded="fieldsLoaded"
          />

          <filterPack class="my-3"
            v-if="currentStep === 'filterPack' || (formIsFlat && displayFormSection.filterPack)"
            :filterPackFrom.sync="form.filter_pack_from"
            :filterPackTo.sync="form.filter_pack_to"
            :filterPackThickness.sync="form.filter_pack_thickness"
            :filterPackMaterial.sync="form.filter_pack_material"
            :filterPackMaterialSize.sync="form.filter_pack_material_size"
          />

          <development class="my-3"
            v-if="currentStep === 'wellDevelopment' || (formIsFlat && displayFormSection.wellDevelopment)"
            :developmentMethod.sync="form.development_method"
            :developmentHours.sync="form.development_hours"
            :developmentNotes.sync="form.development_notes"
          />

          <yield class="my-3"
            v-if="currentStep === 'wellYield' || (formIsFlat && displayFormSection.wellYield)"
            :productionData.sync="form.production_data_set"
          />

          <water-quality class="my-3"
            v-if="currentStep === 'waterQuality' || (formIsFlat && displayFormSection.waterQuality)"
            :waterQualityCharacteristics.sync="form.water_quality_characteristics"
            :waterQualityColour.sync="form.water_quality_colour"
            :waterQualityOdour.sync="form.water_quality_odour"
            :emsID.sync="form.ems_id"
          />

          <completion class="my-3"
            v-if="currentStep === 'wellCompletion' || (formIsFlat && displayFormSection.wellCompletion)"
            :totalDepthDrilled.sync="form.total_depth_drilled"
            :finishedWellDepth.sync="form.finished_well_depth"
            :finalCasingStickUp.sync="form.final_casing_stick_up"
            :bedrockDepth.sync="form.bedrock_depth"
            :staticWaterLevel.sync="form.static_water_level"
            :wellYield.sync="form.well_yield"
            :artesianFlow.sync="form.artesian_flow"
            :artesianPressure.sync="form.artesian_pressure"
            :wellCapType.sync="form.well_cap_type"
            :wellDisinfected.sync="form.well_disinfected"
          />

          <decommission-information class="my-3"
            v-if="currentStep === 'decommissionInformation' || (formIsFlat && displayFormSection.decommissionInformation)"
            :finishedWellDepth.sync="form.finished_well_depth"
            :decommissionReason.sync="form.decommission_reason"
            :decommissionMethod.sync="form.decommission_method"
            :sealantMaterial.sync="form.sealant_material"
            :backfillMaterial.sync="form.backfill_material"
            :decommissionDetails.sync="form.decommission_details"
          />

          <comments class="my-3"
            v-if="currentStep === 'comments' || (formIsFlat && displayFormSection.comments)"
            :comments.sync="form.comments"
            :alternativeSpecsSubmitted.sync="form.alternative_specs_submitted"
          />

          <submission-preview
            :form="form"
            :activity="activityType"
            :sections="displayFormSection"/>

               1 && !preview && !formIsFlat" @click="step > 1 ? step-- : null" variant="primary">Back
              Back to Edit

              <b-btn v-if="step < maxSteps && !formIsFlat && !preview" @click="step++" variant="primary">Next

                Preview & Submit
                Submit

      Report submitted!
        <a v-if="formSubmitSuccessWellTag" :href="`/gwells/well/${formSubmitSuccessWellTag}`">
          View well details for well {{formSubmitSuccessWellTag}}

          {{ errors.detail }}

          <div v-for="(field, i) in Object.keys(errors)" :key="`submissionError${i}`">
            {{field | readable}} : <span v-for="(e, j) in errors[field]" :key="`submissionError${i}-${j}`">{{ e }}

        Are you sure you want to submit this activity report?

            Save

            Cancel

        Are you sure you want to load the previously saved activity report? Your current report will be overwritten.

            Load

            Cancel

</template>


allow to filter multiple categories

allow to filter multiple categories

<template>

        {{ $t('Filter by categories') }}

      <template v-for="category in categories">
        <button
          :key="category.category_id"
          class="categories__button no-outline bg-cl-transparent py10 px20"
          :class="{ 'categories__button--active': value.includes(category.category_id) }"
          type="button"
          @click="toggleCategory(category)"
        >
          {{ category.name }}
        </button>
      </template>

</template>

<template>

        {{ $t('Filter by categories') }}

      <template v-for="category in categories">
        <button
          :key="category.category_id"
          class="categories__button no-outline bg-cl-transparent py10 px20"
          :class="{ 'categories__button--active': value.includes(category.category_id) }"
          type="button"
          @click="filterProducts(category)"
        >
          {{ category.name }}
        </button>
      </template>

</template>


Minor tweak to helpModal cmd and ctrl

Minor tweak to helpModal cmd and ctrl

Using navigator.platform cmd and ctrl display correctly for the copy
sequence

<template>
  <modal :show='show' @closed='closeModal'>

Key Binds

j — down

k — up

l — switch right list (wraps)

h — switch left list (wraps)

a — archive current item (or unarchive)

# — delete current item

e — edit current item

/ — search

? — toggle help menu

esc — close current menu

{{ super_key }}-c or y — copy link to clipboard

{{ super_key }}-v — add link from clipboard

  </modal>
</template>

<template>
  <modal :show='show' @closed='closeModal'>

Key Binds

j — down

k — up

l — switch right list (wraps)

h — switch left list (wraps)

a — archive current item (or unarchive)

# — delete current item

e — edit current item

/ — search

? — toggle help menu

esc — close current menu

cmd/ctrl-c or y — copy link to clipboard

cmd/ctrl-v — add link from clipboard

  </modal>
</template>


Removed news and donation.

Removed news and donation.

<template>

{{$t("pages:footer.vision")}}

{{$t("pages:footer.aboutUs")}}

{{$t("pages:footer.terms")}}

{{$t("pages:footer.privacy")}}

{{$t("pages:footer.faq")}}

{{$t("pages:footer.contact")}}

</template>

<template>

{{$t("pages:footer.vision")}}

{{$t("pages:footer.aboutUs")}}

{{$t("pages:footer.news")}}

{{$t("pages:footer.donate")}}

{{$t("pages:footer.terms")}}

{{$t("pages:footer.privacy")}}

{{$t("pages:footer.faq")}}

{{$t("pages:footer.contact")}}

</template>


remove extra tags from vue file

remove extra tags from vue file

<template>

{{ msg }}

      For guide and recipes on how to configure / customize this project,

      check out the
      vue-cli documentation.

Installed CLI Plugins

babel

eslint

Essential Links

Core Docs

Forum

Community Chat

Twitter

Ecosystem

vue-router

vuex

vue-devtools

vue-loader

awesome-vue

</template>

<docs>
# links to the rest of the documentation.
Please do not click on any of those links or you will be taken away from your localhost.
But you can try editing the code at the bottom of the page.

```vue
<HelloWorld msg="Example"/>
```
</docs>


Bug fix.

Bug fix.

The stepper can sometimes not show its content during first load...

<template lang="pug">
  v-flex(xs12 md6)
    v-stepper(v-model="current_step" vertical v-if="time_to_load")
      v-stepper-step(step="1" v-bind:complete="current_step > 1" editable) Introduction
      v-stepper-content(step="1")
        div.mb-5
          | StreetTraffic package enables you to visualzie the trafffic pattern on a selected route.
          | Although we hope to support more geographical area, currently we only have data on Atlanta City.
        v-btn(primary @click.native="current_step = 2" light) Continue
      v-stepper-step(step="2" v-bind:complete="current_step > 2" editable) Select a desired route

      v-stepper-content(step="2")
        div.mb-5
          | Simply pick a starting address and destination

          v-text-field(
            label="Starting Address"
            class="input-group--focused"
            v-model="starting_address"
            id="starting_address"
          )
          v-text-field(
            label="Destination"
            class="input-group--focused"
            v-model="destination"
            id="destination"
          )
        v-btn(primary @click.native="current_step = 3;select_routes()" light) Select Them

      v-stepper-step(step="3" v-bind:complete="current_step > 3" editable) Select a time interval
      v-stepper-content(step="3")
        div.mb-5
          | What is the time interval of the day that intrigues/annoys you the most? For example, you could choose the rush hours from 8:00 to 10:00
          br
          v-menu(
            lazy
            :close-on-content-click="false"
            v-model="timeStartPicerMenu"
            offset-y
            :nudge-left="40"
          )
            v-text-field(
              slot="activator"
              label="Start Time"
              v-model="timeStartPicer"
              prepend-icon="access_time"
              readonly
            )
            v-time-picker(v-model="timeStartPicer" autosave format="24hr")
          v-menu(
            lazy
            :close-on-content-click="false"
            v-model="timeEndPicerMenu"
            offset-y
            :nudge-left="40"
          )
            v-text-field(
              slot="activator"
              label="End Time"
              v-model="timeEndPicer"
              prepend-icon="access_time"
              readonly
            )
            v-time-picker(v-model="timeEndPicer" autosave format="24hr")
        v-btn(primary @click.native="current_step = 4" light) Continue

      v-stepper-step(step="4" v-bind:complete="current_step > 3" editable) Choose a date interval
      v-stepper-content(step="4")
        div.mb-5
          | Now that you have selected the time interval of day, you can query the that interval for multiple dates. Pick a start date and an end data.
          br
          v-menu(
            lazy
            :close-on-content-click="false"
            v-model="dateStartPickerMenu"
            offset-y
            full-width
            :nudge-left="40"
            max-width="290px"
          )
            v-text-field(
              slot="activator"
              label="Start Date"
              v-model="dateStartPicker"
              prepend-icon="event"
              readonly
            )
            v-date-picker(v-model="dateStartPicker" no-title scrollable autosave)
          v-menu(
            lazy
            :close-on-content-click="false"
            v-model="dateEndPickerMenu"
            offset-y
            full-width
            :nudge-left="40"
            max-width="290px"
          )
            v-text-field(
              slot="activator"
              label="End Date"
              v-model="dateEndPicker"
              prepend-icon="event"
              readonly
            )
            v-date-picker(v-model="dateEndPicker" no-title scrollable autosave)
        v-dialog(v-model="retrieving_dialog" persistent)
          v-btn(primary slot="activator" @click.native="current_step = 5; select_time()" light) Query Data
          v-card
            v-card-row
              v-card-title Retrieving data from the server
            v-card-row
              v-card-text Please be patient :)

      v-stepper-step(step="5") View setup instructions
      v-stepper-content(step="5")
        div.mb-5
          | Great! Now you have query your first data, if you want to try a different time range, hit the try again button.
        v-btn(primary @click.native="current_step = 3" light) Try Again

</template>

<template lang="pug">
  v-flex(xs12 md6)
    v-stepper(v-model="current_step" vertical)
      v-stepper-step(step="1" v-bind:complete="current_step > 1" editable) Introduction
      v-stepper-content(step="1")
        div.mb-5
          | StreetTraffic package enables you to visualzie the trafffic pattern on a selected route.
          | Although we hope to support more geographical area, currently we only have data on Atlanta City.
        v-btn(primary @click.native="current_step = 2" light) Continue
      v-stepper-step(step="2" v-bind:complete="current_step > 2" editable) Select a desired route

      v-stepper-content(step="2")
        div.mb-5
          | Simply pick a starting address and destination

          v-text-field(
            label="Starting Address"
            class="input-group--focused"
            v-model="starting_address"
            id="starting_address"
          )
          v-text-field(
            label="Destination"
            class="input-group--focused"
            v-model="destination"
            id="destination"
          )
        v-btn(primary @click.native="current_step = 3;select_routes()" light) Select Them

      v-stepper-step(step="3" v-bind:complete="current_step > 3" editable) Select a time interval
      v-stepper-content(step="3")
        div.mb-5
          | What is the time interval of the day that intrigues/annoys you the most? For example, you could choose the rush hours from 8:00 to 10:00
          br
          v-menu(
            lazy
            :close-on-content-click="false"
            v-model="timeStartPicerMenu"
            offset-y
            :nudge-left="40"
          )
            v-text-field(
              slot="activator"
              label="Start Time"
              v-model="timeStartPicer"
              prepend-icon="access_time"
              readonly
            )
            v-time-picker(v-model="timeStartPicer" autosave format="24hr")
          v-menu(
            lazy
            :close-on-content-click="false"
            v-model="timeEndPicerMenu"
            offset-y
            :nudge-left="40"
          )
            v-text-field(
              slot="activator"
              label="End Time"
              v-model="timeEndPicer"
              prepend-icon="access_time"
              readonly
            )
            v-time-picker(v-model="timeEndPicer" autosave format="24hr")
        v-btn(primary @click.native="current_step = 4" light) Continue

      v-stepper-step(step="4" v-bind:complete="current_step > 3" editable) Choose a date interval
      v-stepper-content(step="4")
        div.mb-5
          | Now that you have selected the time interval of day, you can query the that interval for multiple dates. Pick a start date and an end data.
          br
          v-menu(
            lazy
            :close-on-content-click="false"
            v-model="dateStartPickerMenu"
            offset-y
            full-width
            :nudge-left="40"
            max-width="290px"
          )
            v-text-field(
              slot="activator"
              label="Start Date"
              v-model="dateStartPicker"
              prepend-icon="event"
              readonly
            )
            v-date-picker(v-model="dateStartPicker" no-title scrollable autosave)
          v-menu(
            lazy
            :close-on-content-click="false"
            v-model="dateEndPickerMenu"
            offset-y
            full-width
            :nudge-left="40"
            max-width="290px"
          )
            v-text-field(
              slot="activator"
              label="End Date"
              v-model="dateEndPicker"
              prepend-icon="event"
              readonly
            )
            v-date-picker(v-model="dateEndPicker" no-title scrollable autosave)
        v-dialog(v-model="retrieving_dialog" persistent)
          v-btn(primary slot="activator" @click.native="current_step = 5; select_time()" light) Query Data
          v-card
            v-card-row
              v-card-title Retrieving data from the server
            v-card-row
              v-card-text Please be patient :)

      v-stepper-step(step="5") View setup instructions
      v-stepper-content(step="5")
        div.mb-5
          | Great! Now you have query your first data, if you want to try a different time range, hit the try again button.
        v-btn(primary @click.native="current_step = 3" light) Try Again

</template>


edit sprites

edit sprites

<template>

      图标说明

        <mdl-textfield floating-label="介绍：" style="width:100%;" textarea rows="2" :value="dataset.description" @change="editDescription($event,dataset.sprite_id)"></mdl-textfield>

      图标详情（{{dataset.icons.length}}）
      <mdl-anchor-button colored v-mdl-ripple-effect class = "add-button" @click="addSprite">添加图标</mdl-anchor-button>
      <input type="file" multiple style="display:none" id="icon-input" accept=".svg">

</template>

<template>

      图标说明

        <mdl-textfield floating-label="介绍：" style="width:100%;" textarea rows="2" :value="dataset.description" @change="editDescription($event)"></mdl-textfield>

      图标详情（{{dataset.icons.length}}）
      <mdl-anchor-button colored v-mdl-ripple-effect class = "add-button" @click="addSprite">添加图标</mdl-anchor-button>
      <input type="file" multiple style="display:none" id="icon-input" accept=".svg">

</template>


fix(Locations): updated

fix(Locations): updated

<template>
  <v-container>
    <v-layout row v-resize="onResize">

    </v-layout>
  </v-container>
</template>


add tow props: websiteCn and websiteEn

add tow props: websiteCn and websiteEn

<script>
  export default {
    render: function (c) {
      var syscnEl, sysenEl, self = this;
      syscnEl = c('p', { class: { 'sys_cn': true } }, self.websiteCn);
      sysenEl = c('p', { class: { 'sys_en': true } }, self.websiteEn);

      var logoEl = c('div', {
        class: {
          'page_header_logo': true
        }
      }, [syscnEl, sysenEl]);

      return logoEl;
    },
    props: {
      websiteCn: {
        type: String,
        default: '证券期货法规数据库系统'
      },
      websiteEn: {
        type: String,
        default: 'Securities and futures law database'
      }
    }
  }
</script>

<script>
  export default {
  	data () {
  	  return {
  	    sysCn: '法规数据库查询系统',
  	    sysEn: 'Regulatory database query system'
  	  }
  	},
    render: function (c) {
      var syscnEl, sysenEl, self = this;
      syscnEl = c('p', { class: { 'sys_cn': true } }, self.sysCn);
      sysenEl = c('p', { class: { 'sys_en': true } }, self.sysEn);

      var logoEl = c('div', {
        class: {
          'page_header_logo': true
        }
      }, [syscnEl, sysenEl]);

      return logoEl;
    }
  }
</script>


fix references tab scrolling

fix references tab scrolling


fixed warning message (#481)

fixed warning message (#481)

to make it more understandable

<template>

        <button type="button"
                class="close"
                data-dismiss="alert"
                aria-label="dismissLabel"
                v-if="dismissible"
                @click.stop.prevent="dismiss"
        >
            ×
        </button>
        <slot></slot>

</template>


fix #1020, don't allow wysiwyg tooltip out of form bounds

<docs>
  # `wysiwyg`

  A multi-line text input which allows a rich editing experience. Uses [Quill](http://quilljs.com/). Inline inputs (which can only be wysiwyg) have the same arguments as normal wysiwyg, but will inherit styles from their parent component.

  ### WYSIWYG Arguments

  * **buttons** - array of button names (strings) or groups (arrays) for text styling, passed directly into Quill (defaults to "remove formatting")
  * **type** - `single-line`, `multi-line`, or `multi-component`. (defaults to `single-line`)
  * **pseudoBullet** - boolean to enable tab to create pseudo bullet points
  * **paste** - array of paste rules for parsing pasted content and creating new components
  * **help** - description / helper text for the field
  * **attachedButton** - an icon button that should be attached to the field, to allow additional functionality
  * **validate.required** - either `true` or an object that described the conditions that should make this field required
  * **validate.min** - minimum length that the field must meet
  * **validate.max** - maximum length that the field must not exceed
  * **validate.pattern** - regex pattern
  * **validate.requiredMessage** - will appear when required validation fails
  * **validate.minMessage** - will appear when minimum validation fails
  * **validate.maxMessage** - will appear when maximum validation fails
  * **validate.patternMessage** - will appear when pattern validation fails (very handy to set, as the default message is vague)

  The buttons allowed in our wysiwyg behavior are [defined in Quill's documentation](http://quilljs.com/docs/modules/toolbar/)

  The default `type` -- `single-line` -- allows entering one line of rich text, but prevents users from creating new paragraphs or applying paste rules.

  `multi-line` is used for components like blockquotes or lists, and allows paste rules to create new block-level elements in the same component's field (but not create different components).

  `multi-component` (which is usually used when the input is `inline`, but may be used in normal `wysiwyg` inputs) enables more affordances, including:

  * keyboard navigation across components (up and down arrows)
  * enter creating new components (and splitting text in front of the cursor into them)
  * delete removing components (and merging text in front of the cursor into the previous component)
  * full paste rule affordances, including creating different components

  **Paste** is an optional array of pasting rules that's used for parsing and creating different components. This is useful for transforming pasted links into embeds, catching pasted blockquotes, etc. Rules have these properties:

  * `match` - regex to match the pasted content. all rules will be wrapped in `^` and `$` (so they don't match urls _inside_ links in the content)
  * `matchLink` - boolean to determine whether _links_ containing the regex should also match. Should be true for embeds, false for components that could potentially contain links inside them.
  * `component` - the name of the component that should be created
  * `field` - the name of the field that the captured data should be populated to on the new component. the (last) new component will focus this field after it's added (note: this is limited to a single regex capture group)
  * `group` - (optional) the group that should be focused when the (last) new component is added (instead of the specific field). this is useful for components with forms that contain both the specified field and other things, and preserves the same editing experience as editing that component normally

  ```
  paste:
    - match: (https?://twitter\.com/\w+?/status/\d+)
      matchLink: true
      component: clay-tweet
      field: url
    - match: (https?://www\.facebook\.com/.+?/posts/\d+)
      matchLink: true
      component: clay-facebook-post
      field: url
      group: inlineForm
    - match: <blockquote>(.*?)(?:</blockquote>)?
      component: blockquote
      field: text
    - match: (.*)
      component: clay-paragraph
      field: text
  ```
</docs>

<template>

      <component :is="args.attachedButton.name" :name="name" :data="data" :schema="schema" :args="args.attachedButton" @disable="disableInput" @enable="enableInput"></component>

{{ label }}

{{ error }}

{{ args.help }}

            {{ valueLength + '/' + maxLength }}

</template>


fix(vuestic-scrollbar): added touch scroll

<template>

        <slot></slot>

</template>

<template>

        <slot></slot>

</template>


Removing .catch method

Removing .catch method


Correct typos

Correct typos

<template>
<v-container fluid>

Ethereum is still a young and experimental project, it isn't safe or scalable yet. Most resources here are for developers not afraid to try out new things. In the future, there will be more information and step-by-step guides to help less technical users to understand Ethereum.

  <v-expansion-panel class="pl-1">

What is Ethereum?

The Ethereum project aims to do for human collaboration what the internet did for information. It is part of a world computer, where everyone can publish and access content, write and use applications, send value and make agreements.

This is done through so called smart contracts and decentralized applications (dapps), open, tamper proof, opt-in, self executing applications that run exactly as programmed and all share one common, append-only "truth", the Ethereum blockchain, while ensuring that there is no downtime, censorship, fraud or third party interference.
This decentralized environment allows all people, programs, IoT devices, markets, registries and other things to collaborate without the need for explicit trust. That's why people also call it the trust machine, it is not just an upgrade to our databases and Internet, but rather a tool to re-architect social, financial and political systems.

While that all just sounds a lot like a long list of awesome buzzwords, it is very actively developed by tens of thousand of developers around the world and happening right now. Below you'll find some links to instruction guides and videos that will help you get started. Once you're a bit more familiar with Ethereum, dive in deeper and read the other sections

    <v-expansion-panel-content class="grey darken-2 white--text">

Links

      <v-card>
        <v-card-text class="grey lighten-3 black--text">
          What is Ethereum? A Step-by-Step Beginners Guide

          A beginner's guide to Ethereum by Coinbase

          Video "How the blockchain is changing money and business" by Don Tapscott

          Video "Ethereum, the world computer" How the internet will work in the future

          Video "Ethereum in 25 minutes" by Vitalik Buterin

          Videos from Ethereum DevCon 2 Sep. 2016 in Shanghai

          Using the Decentralized Web Interact with decentralized applications without understanding Ethereum

          Ethereum for Dummies introducing the next great technological leap forward

          Ethereum for Dummies 2 a less up-to-date version by Dr. Gavin Wood, still relevant

          Introduction to Ethereum as the Internet’s Government

          Blockchain Tokens and the dawn of the Decentralized Business Model

          A gentle introduction to Ethereum

          Blockchain stack #1 Installing Ethereum Geth and your first smart contract

          Ethereum meetups around the world Every meetup is welcoming and happy to help, as you can read in our blog

        </v-card-text>
      </v-card>
    </v-expansion-panel-content>

Wallets and Browsers

Wallets and browsers are your windows to the Ethereum world. The former works just like your normal wallet, i.e. it allows you to store, add and spend money via different currencies and payment systems. It contains one or more Ethereum addresses (long hexadecimal strings that uniquely identifies them) and can receive and send ether (the underlying Ethereum currency) or other tokens running on top of Ethereum. Before taking the plunge and spending any money on ether, please read the information provided by the first link in the security section.

As we said already, Ethereum is much more than just a crypto-currency blockchain. The main purpose is hosting and running smart contracts, storing distributed data (swarm), decentralized communication (whisper) and much more. This begs the question: “How can I access all these cool features?”. This is where browser plugins such as Metamask and Ethereum browsers like Mist come in.

    <v-expansion-panel-content class="grey darken-2 white--text">

Links

      <v-card>
        <v-card-text class="grey lighten-3 black--text">
          Mist Official Ethereum browser and wallet

          MetaMask Chrome plugin to access Ethereum dapps

          MyEtherWallet client-side Ethereum online wallet and smart contract execution

          Parity Wallet Parity also includes a bundled wallet application

          Jaxx Wallet for multiple currencieson on multiple platforms

          Status Ethereum browser/messenger/wallet for mobile phones

          LETH A mobile Ethereum wallet with chat function

          imToken A smart digital wallet for mobile phones

        </v-card-text>
      </v-card>
    </v-expansion-panel-content>

Guides and Tips:

Every day there are new blog posts, tutorials, research article and discussions about how to develop smart contracts and decentralized applications. I try to keep the best and most up-to-date ones here, please let me know about new ones I should add or old ones to remove.

Below you'll find some links to instruction guides and videos that will help you on your path to becoming a Ðapp developer.

    <v-expansion-panel-content class="grey darken-2 white--text">

Links

      <v-card>
        <v-card-text class="grey lighten-3 black--text">
          101 Noob Intro to Programming Smart Contracts

          Smart Contracts Beginner’s Guide

          Truffle BoxA Set of Truffle + Webpack + React Boilerplates

          Developing Ethereum Projects with Truffle and MetaMask

          Truffle Tricks for Ethereum Development Dispelling Myths and First Impressions

          Creating an Upgradeable Token With Dapple and Dappsys

          Dapple’s Next-Generation Testing Tools Saving Time and Sanity

          Devcon2 videos and slides

          Ethereum for web developers including a Full Stack Hello World Voting Ethereum Dapp Tutorial part1 and part2

          Decentralized applications development for .NET developers using Microsoft Visual Studio

          Building a DApp and write contracts video by Alex Van de Sande and Christian Reitwiessner

          Building an Ethereum dapp using Solidity video series by Shlomi Zeltsinger

          iEx.ec EDCON series 10 blog posts to understand the technology behind the Ethereum decentralized cloud

          How to build severless applications for Mist

           A generic “Claim and Endorse” Contract

          Set up a private chain for testing purposes

          Ethereum Reading List for more in depth learning

          Getting Started with Smart Contracts using Solidity

          Solidity series on Eris different blockchain, same smart contract language

          Try out Ethereum using only nodejs and npm

          How to create a Token Factory with Ethereum. Part 2

          Video Series for Ethereum Ðapp Development (paid)

          Certified Online Course for Ethereum Developer (paid)

          8 week immersive program for Blockchain App Dev (paid)

        </v-card-text>
      </v-card>
    </v-expansion-panel-content>

Developer Resources and Tools

Now that you have a wallet and have probably installed Mist and/or Metamask, it’s time roll up your sleeves and get your hands dirty. There are tons of frameworks, tools and resources that you will help you create your very own first Ðapp.

Ethereum nodes each run an EVM (Ethereum Virtual Machine). This is where the smart contracts run. To run code on the EVM, you will want to pick a language to write them in. As Solidity can be considered the reference implementation in terms of smart-contract programming languages, it is a good place to start. Once you have gotten familiar with it and maybe even compiled your first smart contract using Solc, you will want to look at Ðapp development frameworks such as Truffle, Embark or Dapple.

    <v-expansion-panel-content class="grey darken-2 white--text">

Links

      <v-card>
        <v-card-text class="grey lighten-3 black--text">
          Ethereum Website Browser and first tutorials from the Ethereum Foundation

          White Paper The formal proposal of Ethereum

          Yellow Paper The formal specification of the Ethereum protocol

          Solidity Docs learn the contract-oriented, high-level language for the Ethereum Virtual Machine

          Homestead Documentation the current version of Ethereum

          Ethereum StackExchange get answers for all your Ethereum questions

          Ethereum JavaScript API

          Truffe Development framework for Ethereum

          Embark Framework to develop and deploy DApps

          Dapple Development framework for Ethereum

          Projectle EVM contract system developer multi-tool

          BlockApps REST API and Javascript and Mobile SDK to Ethereum blockchains.

          Infura APIs to Ethereum and IPFS nodes

          Browser Solidity Solidity Realtime compiler and IDE

          Viper Experimental EVM programming language with several security features

          Wafr A super simple Solidity test harness for Ethereum smart-contracts.

          git webhook to your solidity codebases for the Ethereum Function Signature Registry

          Ether Camp Blockchain explorer

          Etherscan Blockchain explorer

        </v-card-text>
      </v-card>
    </v-expansion-panel-content>

Clients and Implementations

Clients directly (node as part of the network) or indirectly (remote connection to a node) connect to the Ethereum network and are used by browsers and wallets to allow the user to interact with it.

    <v-expansion-panel-content class="grey darken-2 white--text">

Links

      <v-card>
        <v-card-text class="grey lighten-3 black--text">
          Geth Ethereum Client Ethereum client developed in Go

          Parity Ethereum Client Ethereum client developed in Rust

          ethereumJS Javascript gateway to Ethereum

          Web3 Javascript API to interact with Ethereum

          Nethereum .Net integration library for Ethereum

          web3j Java and Android Ethereum library

          pyethereum Python core library of the Ethereum project

          Machinomy JS library for micropayments in Ether over HTTP

        </v-card-text>
      </v-card>
    </v-expansion-panel-content>

Security

Security. Security. Security. Do it! Follow the guidelines, both for general online security as well as for saver smart contract programming. Your and other people's money might depend on it.

    <v-expansion-panel-content class="grey darken-2 white--text">

Links for online and wallet security

      <v-card>
        <v-card-text class="grey lighten-3 black--text">
          Guide to securing your digital life necessary when dealing with cryptocurrencies

          Ledger Nano Hardware wallet to store your ether and Tokens

          Wallet Security and how to secure them

        </v-card-text>
      </v-card>
    </v-expansion-panel-content>
    <v-expansion-panel-content class="grey darken-2 white--text">

Links for smart contract security

      <v-card>
        <v-card-text class="grey lighten-3 black--text">
          Smart contract best practices by ConsenSys

          Stack exhange security tag see what people ask about security

          Contract Safety and Security Checklist by King of the Ether

          Analysis of theDAO exploit How a bug caused a theft of $50 million

          Deconstructing theDAO Attack The bug that caused the theft

          Solgraph Visualize Solidity control flow for smart contract security analysis.

          Zeppelin framework to build secure smart contracts in the Solidity language

          Formal Verification For Solidity

        </v-card-text>
      </v-card>
    </v-expansion-panel-content>

News and communities

There are many quality news outlet reporting about Ethereum and the decentralization of the web. Check them out or follow us via the links in the footer for the most important news articles of the day.

    <v-expansion-panel-content class="grey darken-2 white--text">

Links

      <v-card>
        <v-card-text class="grey lighten-3 black--text">
          Official Ethereum blog by the Ethereum Foundation

          ETHNews News Website

          Cointelegraph News Website

          ConsenSys Blog Blog of the Ethereum powerhouse ConsenSys

          CryptocoinsNews News Website

          Bitcoin Magazine News Website

          Coindesk News Website

          International Business Times News Website

          The week in Ethereum Newsletter by Evan Van Ness

          Ethereum subreddit Daily news, development Most news about Ethereum can be found here daily

          Ethtrader subreddit Ether price and trading discussions

          EthDev subreddit Discussions about Ethereum development

        </v-card-text>
      </v-card>
    </v-expansion-panel-content>

Exchanges

Even though there are no borders in the Ethereum world, you would need some ether to use the services and decentralized apps there. Like exchanging into the local currency in a foreign country you're visiting. Exchanges provide a means to move in or out of ether by trading it for fiat money ($, €, ¥, £) or other crypto-currencies.
Some of the exchanges directly offer fiat money trades via bank transfers, while others only handle trades between crypto-currencies. And then there are the decentralized ones. You'll need to run an Ethereum client, such as Mist or MetaMask, but they never hold costumer funds and generally have lower fees than the normal ones.
Before getting in crypto-currencies, be sure to read the wallet and online security related parts in the section above.

    <v-expansion-panel-content class="grey darken-2 white--text">

Links

      <v-card>
        <v-card-text class="grey lighten-3 black--text">
          Coinbase Exchange based in the US

          Kraken Exchange base in the US

          Bitfinex Exchange based in China

          Yunbi Exchange based in China

          Poloniex Cryptocurrency only Exchange

          Bittrex Cryptocurrency only Exchange

          Maker Market Decentralized Cryptocurrency Exchange

        </v-card-text>
      </v-card>
    </v-expansion-panel-content>

FAQs

Answers to some of the questions you might enconter while getting to know Ethereum. More questions and answers can be found at the Ethereum StackExchange.

    <v-expansion-panel-content class="grey darken-2 white--text">

Where do I start?

      <v-card>
        <v-card-text class="grey lighten-3 black--text">

The Ethereum network can be very overwhelming, so that is a good question and completely depends what you're looking for. If you are a developer looking into blockchain programming and the creation of decentralized apps, most of the sections here are directed towards you. Let me know if you run into any trouble or out-dated info.
 As a curious user, on <router-link to="/projects">the projects page</router-link> use any decentralized app that you find interesting. Then complain to the developers about any user experience difficulties that you encounter, and otherwise give helpful feedback.
 Generally be curious and engage in the community, either through meetups or the ones mentioned in the section above

        </v-card-text>
      </v-card>
    </v-expansion-panel-content>
    <v-expansion-panel-content class="grey darken-2 white--text">

What is the current roadmap?

      <v-card>
        <v-card-text class="grey lighten-3 black--text">

Both the Ethereum Foundatin and the Enterprise Ethereum Alliance are working on it.

        </v-card-text>
      </v-card>
    </v-expansion-panel-content>
    <v-expansion-panel-content class="grey darken-2 white--text">

Can ether be used as a currency?

      <v-card>
        <v-card-text class="grey lighten-3 black--text">

Answer

        </v-card-text>
      </v-card>
    </v-expansion-panel-content>
    <v-expansion-panel-content class="grey darken-2 white--text">

What is Ethereum Classic, SOILcoin, Expanse or any of the other Ethereum forks?

      <v-card>
        <v-card-text class="grey lighten-3 black--text">

Because every Ethereum implementation is completely open-source, anyone can just run their own version with all kind of variations. The mentioned projects either moved away for some changes or stayed behind when the community moved on. They are all legit efforts with more or less noble causes, just be aware what you want to use.
All the projects shown on <router-link to="/projects">/projects</router-link> use the real Ethereum, currently valued at about ${{price.USD}}, while most others might end up with almost no value eventually.

        </v-card-text>
      </v-card>
    </v-expansion-panel-content>
    <v-expansion-panel-content class="grey darken-2 white--text">

Question?

      <v-card>
        <v-card-text class="grey lighten-3 black--text">

Answer

        </v-card-text>
      </v-card>
    </v-expansion-panel-content>
    <v-expansion-panel-content class="grey darken-2 white--text">

Question?

      <v-card>
        <v-card-text class="grey lighten-3 black--text">

Answer

        </v-card-text>
      </v-card>
    </v-expansion-panel-content>

  </v-expansion-panel>

    <VueDisqus shortname="ethereumnetwork" :identifier="$route.path" :url="'https://ethereum.network' + $route.path"></VueDisqus>

</v-container>
</template>

<template>
<v-container fluid>

Ethereum is still a young and experimental project, it isn't safe or scalable yet. Most resources here are for developers not afraid to try out new things. In the future, there will be more information and step-by-step guides to help less technical users to understand Ethereum.

  <v-expansion-panel class="pl-1">

What is Ethereum?

The Ethereum project aims to do for human collaboration what the internet did for information. It is part of a world computer, where everyone can publish and access content, write and use applications, send value and make agreements.

This is done through so called smart contracts and decentralized applications (dapps), open, tamper proof, opt-in, self executing applications that run exactly as programmed and all share one common, append-only "truth", the Ethereum blockchain, while ensuring that there is no downtime, censorship, fraud or third party interference.
This decentralized environment allows all people, programs, IoT devices, markets, registries and other things to collaborate without the need for explicit trust. That's why people also call it the trust machine, it is not just an upgrade to our databases and Internet, but rather a tool to re-architect social, financial and political systems.

While that all just sounds a lot like a long list of awesome buzzwords, it is very actively developed by tens of thousand of developers around the world and happening right now. Below you'll find some links to instruction guides and videos that will help you get started. Once you're a bit more familiar with Ethereum, dive in deeper and read the other sections

    <v-expansion-panel-content class="grey darken-2 white--text">

Links

      <v-card>
        <v-card-text class="grey lighten-3 black--text">
          What is Ethereum? A Step-by-Step Beginners Guide

          A beginner's guide to Ethereum by Coinbase

          Video "How the blockchain is changing money and business" by Don Tapscott

          Video "Ethereum, the world computer" How the internet will work in the future

          Video "Ethereum in 25 minutes" by Vitalik Buterin

          Videos from Ethereum DevCon 2 Sep. 2016 in Shanghai

          Using the Decentralized Web Interact with decentralized applications without understanding Ethereum

          Ethereum for Dummies introducing the next great technological leap forward

          Ethereum for Dummies 2 a less up-to-date version by Dr. Gavin Wood, still relevant

          Introduction to Ethereum as the Internet’s Government

          Blockchain Tokens and the dawn of the Decentralized Business Model

          A gentle introduction to Ethereum

          Blockchain stack #1 Installing Ethereum Geth and your first smart contract

          Ethereum meetups around the world Every meetup is welcoming and happy to help, as you can read in our blog

        </v-card-text>
      </v-card>
    </v-expansion-panel-content>

Wallets and Browsers

Wallets and browsers are your windows to the Ethereum world. The former works just like your normal wallet, i.e. it allows you to store, add and spend money via different currencies and payment systems. It contains one or more Ethereum addresses (long hexadecimal strings that uniquely identifies them) and can receive and send ether (the underlying Ethereum currency) or other tokens running on top of Ethereum. Before taking the plunge and spending any money on ether, please read the information provided by the first link in the security section.

As we said already, Ethereum is much more than just a crypto-currency blockchain. The main purpose is hosting and running smart contracts, storing distributed data (swarm), decentralized communication (whisper) and much more. This begs the question: “How can I access all these cool features?”. This is where browser plugins such as Metamask and Ethereum browsers like Mist come in.

    <v-expansion-panel-content class="grey darken-2 white--text">

Links

      <v-card>
        <v-card-text class="grey lighten-3 black--text">
          Mist Official Ethereum browser and wallet

          MetaMask Chrome plugin to access Ethereum dapps

          MyEtherWallet client-side Ethereum online wallet and smart contract execution

          Parity Wallet Parity also includes a bundled wallet application

          Jaxx Wallet for multiple currencieson on multiple platforms

          Status Ethereum browser/messenger/wallet for mobile phones

          LETH A mobile Ethereum wallet with chat function

          imToken A smart digital wallet for mobile phones

        </v-card-text>
      </v-card>
    </v-expansion-panel-content>

Guides and Tips:

Every day there are new blog posts, tutorials, research article and discussions about how to develop smart contracts and decentralized applications. I try to keep the best and most up-to-date ones here, please let me know about new ones I should add or old ones to remove.

Below you'll find some links to instruction guides and videos that will help you on your path to becoming a Ðapp developer.

    <v-expansion-panel-content class="grey darken-2 white--text">

Links

      <v-card>
        <v-card-text class="grey lighten-3 black--text">
          101 Noob Intro to Programming Smart Contracts

          Smart Contracts Beginner’s Guide

          Truffle BoxA Set of Truffle + Webpack + React Boilerplates

          Developing Ethereum Projects with Truffle and MetaMask

          Truffle Tricks for Ethereum Development Dispelling Myths and First Impressions

          Creating an Upgradeable Token With Dapple and Dappsys

          Dapple’s Next-Generation Testing Tools Saving Time and Sanity

          Devcon2 videos and slides

          Ethereum for web developers including a Full Stack Hello World Voting Ethereum Dapp Tutorial part1 and part2

          Decentralized applications development for .NET developers using Microsoft Visual Studio

          Building a DApp and write contracts video by Alex Van de Sande and Christian Reitwiessner

          Building an Ethereum dapp using Solidity video series by Shlomi Zeltsinger

          iEx.ec EDCON series 10 blog posts to understand the technology behind the Ethereum decentralized cloud

          How to build severless applications for Mist

           A generic “Claim and Endorse” Contract

          Set up a private chain for testing purposes

          Ethereum Reading List for more in depth learning

          Getting Started with Smart Contracts using Solidity

          Solidity series on Eris different blockchain, same smart contract language

          Try out Ethereum using only nodejs and npm

          How to create a Token Factory with Ethereum. Part 2

          Video Series for Ethereum Ðapp Development (paid)

          Certified Online Course for Ethereum Developer (paid)

          8 week immersive program for Blockchain App Dev (paid)

        </v-card-text>
      </v-card>
    </v-expansion-panel-content>

Developer Resources and Tools

Now that you have a wallet and have probably installed Mist and/or Metamask, it’s time roll up your sleeves and get your hands dirty. There are tons of frameworks, tools and resources that you will help you create your very own first Ðapp.

Ethereum nodes each run an EVM (Ethereum Virtual Machine). This is where the smart contracts run. To run code on the EVM, you will want to pick a language to write them in. As Solidity can be considered the reference implementation in terms of smart-contract programming languages, it is a good place to start. Once you have gotten familiar with it and maybe even compiled your first smart contract using Solc, you will want to look at Ðapp development frameworks such as Truffle, Embark or Dapple.

    <v-expansion-panel-content class="grey darken-2 white--text">

Links

      <v-card>
        <v-card-text class="grey lighten-3 black--text">
          Ethereum Website Browser and first tutorials from the Ethereum Foundation

          White Paper The formal proposal of Ethereum

          Yellow Paper The formal specification of the Ethereum protocol

          Solidity Docs learn the contract-oriented, high-level language for the Ethereum Virtual Machine

          Homestead Documentation the current version of Ethereum

          Ethereum StackExchange get answers for all your Ethereum questions

          Ethereum JavaScript API

          Truffe Development framework for Ethereum

          Embark Framework to develop and deploy DApps

          Dapple Development framework for Ethereum

          Projectle EVM contract system developer multi-tool

          BlockApps REST API and Javascript and Mobile SDK to Ethereum blockchains.

          Infura APIs to Ethereum and IPFS nodes

          Browser Solidity Solidity Realtime compiler and IDE

          Viper Experimental EVM programming language with several security features

          Wafr A super simple Solidity test harness for Ethereum smart-contracts.

          git webhook to your solidity codebases for the Ethereum Function Signature Registry

          Ether Camp Blockchain explorer

          Etherscan Blockchain explorer

        </v-card-text>
      </v-card>
    </v-expansion-panel-content>

Clients and Implementations

Clients directly (node as part of the network) or indirectly (remote connection to a node) connect to the Ethereum network and are used by browsers and wallets to allow the user to interact with it.

    <v-expansion-panel-content class="grey darken-2 white--text">

Links

      <v-card>
        <v-card-text class="grey lighten-3 black--text">
          Geth Ethereum Client Ethereum client developed in Go

          Parity Ethereum Client Ethereum client developed in Rust

          ethereumJS Javascript gateway to Ethereum

          Web3 Javascript API to interact with Ethereum

          Nethereum .Net integration library for Ethereum

          web3j Java and Android Ethereum library

          pyethereum Python core library of the Ethereum project

          Machinomy JS library for micropayments in Ether over HTTP

        </v-card-text>
      </v-card>
    </v-expansion-panel-content>

Security

Security. Security. Security. Do it! Follow the guidelines, both for general online security as well as for saver smart contract programming. Your and other people's money might depend on it.

    <v-expansion-panel-content class="grey darken-2 white--text">

Links for online and wallet security

      <v-card>
        <v-card-text class="grey lighten-3 black--text">
          Guide to securing your digital life necessary when dealing with cryptocurrencies

          Ledger Nano Hardware wallet to store your ether and Tokens

          Wallet Security and how to secure them

        </v-card-text>
      </v-card>
    </v-expansion-panel-content>
    <v-expansion-panel-content class="grey darken-2 white--text">

Links for smart contract security

      <v-card>
        <v-card-text class="grey lighten-3 black--text">
          Smart contract best practices by ConsenSys

          Stack exhange security tag see what people ask about security

          Contract Safety and Security Checklist by King of the Ether

          Analysis of theDAO exploit How a bug caused a theft of $50 million

          Deconstructing theDAO Attack The bug that caused the theft

          Solgraph Visualize Solidity control flow for smart contract security analysis.

          Zeppelin framework to build secure smart contracts in the Solidity language

          Formal Verification For Solidity

        </v-card-text>
      </v-card>
    </v-expansion-panel-content>

News and communities

There are many quality news outlet reporting about Ethereum and the decentralization of the web. Check them out or follow us via the links in the footer for the most important news articles of the day.

    <v-expansion-panel-content class="grey darken-2 white--text">

Links

      <v-card>
        <v-card-text class="grey lighten-3 black--text">
          Official Ethereum blog by the Ethereum Foundation

          ETHNews News Website

          Cointelegraph News Website

          ConsenSys Blog Blog of the Ethereum powerhouse ConsenSys

          CryptocoinsNews News Website

          Bitcoin Magazine News Website

          Coindesk News Website

          International Business Times News Website

          The week in Ethereum Newsletter by Evan Van Ness

          Ethereum subreddit Daily news, development Most news about Ethereum can be found here daily

          Ethtrader subreddit Ether price and trading discussions

          EthDev subreddit Discussions about Ethereum development

        </v-card-text>
      </v-card>
    </v-expansion-panel-content>

Exchanges

Even though there are no borders in the Ethereum world, you would need some ether to use the services and decentralized apps there. Like exchanging into the local currency in a foreign country you're visiting. Exchanges provide a means to move in or out of ether by trading it for fiat money ($, €, ¥, £) or other crypto-currencies.
Some of the exchanges directly offer fiat money trades via bank transfers, while others only handle trades between crypto-currencies. And then there are the decentralized ones. You'll need to run an Ethereum client, such as Mist or MetaMask, but they never hold costumer funds and generally have lower fees than the normal ones.
Before getting in crypto-currencies, be sure to read the wallet and online security related parts in the section above.

    <v-expansion-panel-content class="grey darken-2 white--text">

Links

      <v-card>
        <v-card-text class="grey lighten-3 black--text">
          Coinbase Exchange based in the US

          Kraken Exchange base in the US

          Bitfinex Exchange based in China

          Yunbi Exchange based in China

          Poloniex Cryptocurrency only Exchange

          Bittrex Cryptocurrency only Exchange

          Maker Market Decentralized Cryptocurrency Exchange

        </v-card-text>
      </v-card>
    </v-expansion-panel-content>

FAQs

Answers to some of the questions you might enconter while getting to know Ethereum. Another good place is the Ethereum StackExchange.

    <v-expansion-panel-content class="grey darken-2 white--text">

Where do I start?

      <v-card>
        <v-card-text class="grey lighten-3 black--text">

The Ethereum network can be very overwhelming, so that is a good question and completely depends what you're looking for. If you are a developer looking into blockchain programming and the creation of decentralized apps, most of the sections here are directed towards you. Let me know if you run into any trouble or out-dated info.
 As a curious user, on <router-link to="/projects">the projects page</router-link> use any decentralized app that you find interesting. Then complain to the developers about any user experience difficulties that you encounter, and otherwise give helpful feedback.
 Generally be curious and engage in the community, either through meetups or the ones mentioned in the section above

        </v-card-text>
      </v-card>
    </v-expansion-panel-content>
    <v-expansion-panel-content class="grey darken-2 white--text">

What is the current roadmap?

      <v-card>
        <v-card-text class="grey lighten-3 black--text">

Both the Ethereum Foundatin and the Enterprise Ethereum Alliance are working on it.

        </v-card-text>
      </v-card>
    </v-expansion-panel-content>
    <v-expansion-panel-content class="grey darken-2 white--text">

Can ether be used as a currency?

      <v-card>
        <v-card-text class="grey lighten-3 black--text">

Answer

        </v-card-text>
      </v-card>
    </v-expansion-panel-content>
    <v-expansion-panel-content class="grey darken-2 white--text">

What is Ethereum Classic, SOILcoin, Expanse or any of the other Ethereum forks?

      <v-card>
        <v-card-text class="grey lighten-3 black--text">

Because every Ethereum implementation is completely open-source, anyone can just run their own version with all kind of variations. The mentioned projects either moved away for some changes or stayed behind when the community moved on. The are all legit efforts with more or less noble causes, just be aware which variant you want to use.
All the projects shown on <router-link to="/projects">/projects</router-link> use the real Ethereum, currently valued at about ${{price.USD}}, while most others end up with almost no value eventually.

        </v-card-text>
      </v-card>
    </v-expansion-panel-content>
    <v-expansion-panel-content class="grey darken-2 white--text">

Question?

      <v-card>
        <v-card-text class="grey lighten-3 black--text">

Answer

        </v-card-text>
      </v-card>
    </v-expansion-panel-content>
    <v-expansion-panel-content class="grey darken-2 white--text">

Question?

      <v-card>
        <v-card-text class="grey lighten-3 black--text">

Answer

        </v-card-text>
      </v-card>
    </v-expansion-panel-content>

  </v-expansion-panel>

    <VueDisqus shortname="ethereumnetwork" :identifier="$route.path" :url="'https://ethereum.network' + $route.path"></VueDisqus>

</v-container>
</template>


add some new user fields but not aligned and doesn't look good

<template>

User Management

Current Users

      <button class="delete" v-on:click="getUsersAlert=false"></button>
        Error getting users: {{ getUsersError }}

      <button class="delete" v-on:click="passwordSetAlert=false"></button>
        New password has been assigned

      <button class="delete" v-on:click="userDeletedAlert=false"></button>
        User has been deleted

      <button class="delete" v-on:click="errorAssigningPasswordAlert=false"></button>
        Error assigning password: {{ passwordSetError }}

      <button class="delete" v-on:click="errorDeletingUserAlert=false"></button>
        Error deleting user: {{ userDeleteError }}

          Username
          Admin
          Active Sessions
          Password Reset
          Delete User

          {{ user.username }}
          {{ user.admin }}
          {{ user.sessions}}

                <input :id="user.username" class="input" type="password">

                <button class="button is-danger" v-on:click="setPassword(user.username)">Set Password</button>

            <button class="button is-danger" v-on:click="deleteUser(user.username)">Delete</button>

Add User

        Username

            <input class="input" v-model="newUsername">

        Password

            <input class="input" type="password" v-model="newPassword">

              <input type="checkbox">
                Admin

            <button class="button is-info">
              Create User
            </button>

</template>

<template>

User Management

Current Users

      <button class="delete" v-on:click="getUsersAlert=false"></button>
        Error getting users: {{ getUsersError }}

      <button class="delete" v-on:click="passwordSetAlert=false"></button>
        New password has been assigned

      <button class="delete" v-on:click="userDeletedAlert=false"></button>
        User has been deleted

      <button class="delete" v-on:click="errorAssigningPasswordAlert=false"></button>
        Error assigning password: {{ passwordSetError }}

      <button class="delete" v-on:click="errorDeletingUserAlert=false"></button>
        Error deleting user: {{ userDeleteError }}

          Username
          Admin
          Active Sessions
          Password Reset
          Delete User

          {{ user.username }}
          {{ user.admin }}
          {{ user.sessions}}

                <input :id="user.username" class="input" type="password">

                <button class="button is-danger" v-on:click="setPassword(user.username)">Set Password</button>

            <button class="button is-danger" v-on:click="deleteUser(user.username)">Delete</button>

Add User

</template>


Removing native styling

Removing native styling

<template>

      <form @submit.prevent="submitSetupForm" novalidate class="container">

{{ $tr('formHeader') }}

        <ui-alert @dismiss="clearGlobalError()" type="error" v-if="globalError">
          {{ globalError }}
        </ui-alert>

{{ $tr('deviceOwnerSectionHeader') }}

{{ $tr('deviceOwnerDescription') }}

          <core-textbox
          @focus="firstUsernameFieldVisit || visitUsername()"
          @blur="validateUsername()"
          :invalid="!!usernameError"
          :error="usernameError"
          v-model="username"
          :required="true"
          :label="$tr('usernameInputLabel')"/>

          <core-textbox
          @focus="firstPasswordFieldsVisit || visitPassword()"
          :invalid="!!passwordError"
          :error="passwordError"
          type="password"
          v-model="password"
          :required="true"
          :label="$tr('passwordInputLabel')"/>

          <core-textbox
          @blur="validatePassword()"
          :invalid="!!passwordError"
          type="password"
          v-model="passwordConfirm"
          :required="true"
          :label="$tr('confirmPasswordInputLabel')"/>

{{ $tr('facilitySectionHeader') }}

{{ $tr('facilityDescription') }}

          <core-textbox
          @focus="firstFacilityFieldVisit || visitFacility()"
          @blur="validateFacility"
          :invalid="!!facilityError"
          :error="facilityError"
          v-model="facility"
          :required="true"
          :label="$tr('facilityInputLabel')"/>

          <icon-button :text="$tr('formSubmissionButton')" type="submit"/>

      </form>

</template>

<template>

      <form @submit.prevent="submitSetupForm" class="container">

{{ $tr('formHeader') }}

        <ui-alert @dismiss="clearGlobalError()" type="error" v-if="globalError">
          {{ globalError }}
        </ui-alert>

{{ $tr('deviceOwnerSectionHeader') }}

{{ $tr('deviceOwnerDescription') }}

          <core-textbox
          @focus="firstUsernameFieldVisit || visitUsername()"
          @blur="validateUsername()"
          :invalid="!!usernameError"
          :error="usernameError"
          v-model="username"
          :required="true"
          :label="$tr('usernameInputLabel')"/>

          <core-textbox
          @focus="firstPasswordFieldsVisit || visitPassword()"
          :invalid="!!passwordError"
          :error="passwordError"
          type="password"
          v-model="password"
          :required="true"
          :label="$tr('passwordInputLabel')"/>

          <core-textbox
          @blur="validatePassword()"
          :invalid="!!passwordError"
          type="password"
          v-model="passwordConfirm"
          :required="true"
          :label="$tr('confirmPasswordInputLabel')"/>

{{ $tr('facilitySectionHeader') }}

{{ $tr('facilityDescription') }}

          <core-textbox
          @focus="firstFacilityFieldVisit || visitFacility()"
          @blur="validateFacility"
          :invalid="!!facilityError"
          :error="facilityError"
          v-model="facility"
          :required="true"
          :label="$tr('facilityInputLabel')"/>

          <icon-button :text="$tr('formSubmissionButton')" type="submit"/>

      </form>

</template>