[WIP] Add Control Panel

appveyor.yml

@@ -9,6 +9,12 @@ before_build:
     choco install opencover.portable
 
     choco install codecov
+
+    cd MineCase.ControlPanel
+
+    npm install
+
+    cd ..
 build:
   project: ./src/
   verbosity: minimal

src/MineCase.ControlPanel/.gitignore

@@ -0,0 +1,239 @@
+/Properties/launchSettings.json
+
+## Ignore Visual Studio temporary files, build results, and
+## files generated by popular Visual Studio add-ons.
+
+# User-specific files
+*.suo
+*.user
+*.userosscache
+*.sln.docstates
+
+# User-specific files (MonoDevelop/Xamarin Studio)
+*.userprefs
+
+# Build results
+[Dd]ebug/
+[Dd]ebugPublic/
+[Rr]elease/
+[Rr]eleases/
+x64/
+x86/
+build/
+bld/
+bin/
+Bin/
+obj/
+Obj/
+
+# Visual Studio 2015 cache/options directory
+.vs/
+/wwwroot/dist/
+
+/yarn.lock
+
+# MSTest test Results
+[Tt]est[Rr]esult*/
+[Bb]uild[Ll]og.*
+
+# NUNIT
+*.VisualState.xml
+TestResult.xml
+
+# Build Results of an ATL Project
+[Dd]ebugPS/
+[Rr]eleasePS/
+dlldata.c
+
+# DNX
+artifacts/
+
+*_i.c
+*_p.c
+*_i.h
+*.ilk
+*.meta
+*.obj
+*.pch
+*.pdb
+*.pgc
+*.pgd
+*.rsp
+*.sbr
+*.tlb
+*.tli
+*.tlh
+*.tmp
+*.tmp_proj
+*.log
+*.vspscc
+*.vssscc
+.builds
+*.pidb
+*.svclog
+*.scc
+
+# Chutzpah Test files
+_Chutzpah*
+
+# Visual C++ cache files
+ipch/
+*.aps
+*.ncb
+*.opendb
+*.opensdf
+*.sdf
+*.cachefile
+
+# Visual Studio profiler
+*.psess
+*.vsp
+*.vspx
+*.sap
+
+# TFS 2012 Local Workspace
+$tf/
+
+# Guidance Automation Toolkit
+*.gpState
+
+# ReSharper is a .NET coding add-in
+_ReSharper*/
+*.[Rr]e[Ss]harper
+*.DotSettings.user
+
+# JustCode is a .NET coding add-in
+.JustCode
+
+# TeamCity is a build add-in
+_TeamCity*
+
+# DotCover is a Code Coverage Tool
+*.dotCover
+
+# NCrunch
+_NCrunch_*
+.*crunch*.local.xml
+nCrunchTemp_*
+
+# MightyMoose
+*.mm.*
+AutoTest.Net/
+
+# Web workbench (sass)
+.sass-cache/
+
+# Installshield output folder
+[Ee]xpress/
+
+# DocProject is a documentation generator add-in
+DocProject/buildhelp/
+DocProject/Help/*.HxT
+DocProject/Help/*.HxC
+DocProject/Help/*.hhc
+DocProject/Help/*.hhk
+DocProject/Help/*.hhp
+DocProject/Help/Html2
+DocProject/Help/html
+
+# Click-Once directory
+publish/
+
+# Publish Web Output
+*.[Pp]ublish.xml
+*.azurePubxml
+# TODO: Comment the next line if you want to checkin your web deploy settings
+# but database connection strings (with potential passwords) will be unencrypted
+*.pubxml
+*.publishproj
+
+# NuGet Packages
+*.nupkg
+# The packages folder can be ignored because of Package Restore
+**/packages/*
+# except build/, which is used as an MSBuild target.
+!**/packages/build/
+# Uncomment if necessary however generally it will be regenerated when needed
+#!**/packages/repositories.config
+
+# Microsoft Azure Build Output
+csx/
+*.build.csdef
+
+# Microsoft Azure Emulator
+ecf/
+rcf/
+
+# Microsoft Azure ApplicationInsights config file
+ApplicationInsights.config
+
+# Windows Store app package directory
+AppPackages/
+BundleArtifacts/
+
+# Visual Studio cache files
+# files ending in .cache can be ignored
+*.[Cc]ache
+# but keep track of directories ending in .cache
+!*.[Cc]ache/
+
+# Others
+ClientBin/
+~$*
+*~
+*.dbmdl
+*.dbproj.schemaview
+*.pfx
+*.publishsettings
+orleans.codegen.cs
+
+/node_modules
+
+# RIA/Silverlight projects
+Generated_Code/
+
+# Backup & report files from converting an old project file
+# to a newer Visual Studio version. Backup files are not needed,
+# because we have git ;-)
+_UpgradeReport_Files/
+Backup*/
+UpgradeLog*.XML
+UpgradeLog*.htm
+
+# SQL Server files
+*.mdf
+*.ldf
+
+# Business Intelligence projects
+*.rdl.data
+*.bim.layout
+*.bim_*.settings
+
+# Microsoft Fakes
+FakesAssemblies/
+
+# GhostDoc plugin setting file
+*.GhostDoc.xml
+
+# Node.js Tools for Visual Studio
+.ntvs_analysis.dat
+
+# Visual Studio 6 build log
+*.plg
+
+# Visual Studio 6 workspace options file
+*.opt
+
+# Visual Studio LightSwitch build output
+**/*.HTMLClient/GeneratedArtifacts
+**/*.DesktopClient/GeneratedArtifacts
+**/*.DesktopClient/ModelManifest.xml
+**/*.Server/GeneratedArtifacts
+**/*.Server/ModelManifest.xml
+_Pvt_Extensions
+
+# Paket dependency manager
+.paket/paket.exe
+
+# FAKE - F# Make
+.fake/

src/MineCase.ControlPanel/ClientApp/boot.ts

@@ -0,0 +1,17 @@
+import './css/site.css';
+import 'bootstrap';
+import Vue from 'vue';
+import VueRouter from 'vue-router';
+Vue.use(VueRouter);
+
+const routes = [
+    { path: '/', component: require('./components/home/home.vue.html') },
+    { path: '/counter', component: require('./components/counter/counter.vue.html') },
+    { path: '/fetchdata', component: require('./components/fetchdata/fetchdata.vue.html') }
+];
+
+new Vue({
+    el: '#app-root',
+    router: new VueRouter({ mode: 'history', routes: routes }),
+    render: h => h(require('./components/app/app.vue.html'))
+});

src/MineCase.ControlPanel/ClientApp/components/app/app.ts

@@ -0,0 +1,10 @@
+import Vue from 'vue';
+import { Component } from 'vue-property-decorator';
+
+@Component({
+    components: {
+        MenuComponent: require('../navmenu/navmenu.vue.html')
+    }
+})
+export default class AppComponent extends Vue {
+}

src/MineCase.ControlPanel/ClientApp/components/app/app.vue.html

@@ -0,0 +1,14 @@
+<template>
+    <div id='app-root' class="container-fluid">
+        <div class="row">
+            <div class="col-sm-3">
+                <menu-component />
+            </div>
+            <div class="col-sm-9">
+                <router-view></router-view>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script src="./app.ts"></script>

src/MineCase.ControlPanel/ClientApp/components/counter/counter.ts

@@ -0,0 +1,11 @@
+import Vue from 'vue';
+import { Component } from 'vue-property-decorator';
+
+@Component
+export default class CounterComponent extends Vue {
+    currentcount: number = 0;
+
+    incrementCounter() {
+        this.currentcount++;
+    }
+}

src/MineCase.ControlPanel/ClientApp/components/counter/counter.vue.html

@@ -0,0 +1,13 @@
+<template>
+    <div>
+        <h1>Counter</h1>
+
+        <p>This is a simple example of a Vue.js component.</p>
+
+        <p>Current count: <strong>{{ currentcount }}</strong></p>
+
+        <button @click="incrementCounter">Increment</button>
+    </div>
+</template>
+
+<script src="./counter.ts"></script>

src/MineCase.ControlPanel/ClientApp/components/fetchdata/fetchdata.ts

@@ -0,0 +1,22 @@
+import Vue from 'vue';
+import { Component } from 'vue-property-decorator';
+
+interface WeatherForecast {
+    dateFormatted: string;
+    temperatureC: number;
+    temperatureF: number;
+    summary: string;
+}
+
+@Component
+export default class FetchDataComponent extends Vue {
+    forecasts: WeatherForecast[] = [];
+
+    mounted() {
+        fetch('api/SampleData/WeatherForecasts')
+            .then(response => response.json() as Promise<WeatherForecast[]>)
+            .then(data => {
+                this.forecasts = data;
+            });
+    }
+}

src/MineCase.ControlPanel/ClientApp/components/fetchdata/fetchdata.vue.html

@@ -0,0 +1,30 @@
+<template>
+    <div>
+        <h1>Weather forecast</h1>
+
+        <p>This component demonstrates fetching data from the server.</p>
+
+        <table v-if="forecasts.length" class="table">
+            <thead>
+                <tr>
+                    <th>Date</th>
+                    <th>Temp. (C)</th>
+                    <th>Temp. (F)</th>
+                    <th>Summary</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr v-for="item in forecasts">
+                    <td>{{ item.dateFormatted }}</td>
+                    <td>{{ item.temperatureC }}</td>
+                    <td>{{ item.temperatureF }}</td>
+                    <td>{{ item.summary }}</td>
+                </tr>
+            </tbody>
+        </table>
+
+        <p v-else><em>Loading...</em></p>
+    </div>
+</template>
+
+<script src="./fetchdata.ts"></script>

src/MineCase.ControlPanel/ClientApp/components/home/home.vue.html

@@ -0,0 +1,19 @@
+<template>
+    <div>
+        <h1>Hello, world!</h1>
+        <p>Welcome to your new single-page application, built with:</p>
+        <ul>
+            <li><a href="https://get.asp.net/">ASP.NET Core</a> and <a href="https://msdn.microsoft.com/en-us/library/67ef8sbd.aspx">C#</a> for cross-platform server-side code</li>
+            <li><a href="https://vuejs.org/">Vue.js</a> and <a href="http://www.typescriptlang.org/">TypeScript</a> for client-side code</li>
+            <li><a href="https://webpack.github.io/">Webpack</a> for building and bundling client-side resources</li>
+            <li><a href="http://getbootstrap.com/">Bootstrap</a> for layout and styling</li>
+        </ul>
+        <p>To help you get started, we've also set up:</p>
+        <ul>
+            <li><strong>Client-side navigation</strong>. For example, click <em>Counter</em> then <em>Back</em> to return here.</li>
+            <li><strong>Webpack dev middleware</strong>. In development mode, there's no need to run the <code>webpack</code> build tool. Your client-side resources are dynamically built on demand. Updates are available as soon as you modify any file.</li>
+            <li><strong>Hot module replacement</strong>. In development mode, you don't even need to reload the page after making most changes. Within seconds of saving changes to files, your Vue app will be rebuilt and a new instance injected is into the page.</li>
+            <li><strong>Efficient production builds</strong>. In production mode, development-time features are disabled, and the <code>webpack</code> build tool produces minified static CSS and JavaScript files.</li>
+        </ul>
+    </div>
+</template>