Merge pull request #19 from SoftwareAteliers/16-netcore30

.NET Core 3.0

Author: liborpansky

AspNetCoreVueStarter.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Web">
 
   <PropertyGroup>
-    <TargetFramework>netcoreapp2.2</TargetFramework>
+    <TargetFramework>netcoreapp3.0</TargetFramework>
     <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
     <TypeScriptToolsVersion>Latest</TypeScriptToolsVersion>
     <IsPackable>false</IsPackable>
@@ -19,9 +19,8 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="Microsoft.AspNetCore.App" />
-    <PackageReference Include="Microsoft.AspNetCore.SpaServices.Extensions" Version="2.2.0" />
-    <PackageReference Include="VueCliMiddleware" Version="2.2.1" />
+    <PackageReference Include="Microsoft.AspNetCore.SpaServices.Extensions" Version="3.0.0" />
+    <PackageReference Include="VueCliMiddleware" Version="3.0.0" />
   </ItemGroup>
 
   <ItemGroup>

ClientApp/package-lock.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "date-fns": "^2.2.1",
     "register-service-worker": "^1.6.2",
     "vue": "^2.6.10",
     "vue-class-component": "^7.1.0",

ClientApp/package.json

@@ -0,0 +1,5 @@
+import { format } from 'date-fns';
+
+export default (date: Date) => {
+  return format(new Date(date), 'eeee, dd MMMM');
+};

ClientApp/src/filters/date.filter.ts

@@ -6,9 +6,12 @@ import App from './App.vue';
 import router from './router';
 import store from '@/store/index';
 import './registerServiceWorker';
+import dateFilter from '@/filters/date.filter';
 
 Vue.config.productionTip = false;
 
+Vue.filter('date', dateFilter);
+
 new Vue({
   vuetify,
   router,

ClientApp/src/main.ts

@@ -1,6 +1,6 @@
 export class Forecast {
   constructor(
-    public dateFormatted: Date,
+    public date: Date,
     public temperatureC: number,
     public temperatureF: number,
     public summary: string,

ClientApp/src/models/Forecast.ts

@@ -14,11 +14,11 @@
             class="elevation-1"
           >
             <v-progress-linear v-slot:progress color="blue" indeterminate></v-progress-linear>
-            <template v-slot:items="props">
-              <td>{{ props.item.dateFormatted }}</td>
-              <td>{{ props.item.temperatureC }}</td>
-              <td>{{ props.item.temperatureF }}</td>
-              <td>{{ props.item.summary }}</td>
+            <template v-slot:item.date="{ item }">
+              <td>{{ item.date | date }}</td>
+            </template>
+            <template v-slot:item.temperatureC="{ item }">
+              <v-chip :color="getColor(item.temperatureC)" dark>{{ item.temperatureC }}</v-chip>
             </template>
           </v-data-table>
         </v-col>
@@ -56,27 +56,34 @@ export default class FetchDataView extends Vue {
   private errorMessage: string = 'Error while loading weather forecast.';
   private forecasts: Forecast[] = [];
   private headers = [
-    { text: 'Date', value: 'dateFormatted' },
+    { text: 'Date', value: 'date' },
     { text: 'Temp. (C)', value: 'temperatureC' },
     { text: 'Temp. (F)', value: 'temperatureF' },
     { text: 'Summary', value: 'summary' },
   ];
 
-  private created() {
-    this.fetchWeatherForecasts();
+  private getColor(temperature: number) {
+    if (temperature < 0) {
+      return 'blue';
+    } else if (temperature >= 0 && temperature < 30) {
+      return 'green';
+    } else {
+      return 'red';
+    }
+  }
+  private async created() {
+    await this.fetchWeatherForecasts();
   }
 
-  private fetchWeatherForecasts() {
-    axios
-      .get<Forecast[]>('api/SampleData/WeatherForecasts')
-      .then((response) => {
-        this.forecasts = response.data;
-      })
-      .catch((e) => {
-        this.showError = true;
-        this.errorMessage = `Error while loading weather forecast: ${e.message}.`;
-      })
-      .finally(() => (this.loading = false));
+  private async fetchWeatherForecasts() {
+    try {
+      const response = await axios.get<Forecast[]>('api/WeatherForecast');
+      this.forecasts = response.data;
+    } catch (e) {
+      this.showError = true;
+      this.errorMessage = `Error while loading weather forecast: ${e.message}.`;
+    }
+    this.loading = false;
   }
 }
 </script>

ClientApp/src/views/FetchData.vue

@@ -0,0 +1,40 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using AspNetCoreVueStarter.Models;
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.Extensions.Logging;
+
+namespace AspNetCoreVueStarter.Controllers
+{
+    [Route("api/[controller]")]
+    [ApiController]
+    public class WeatherForecastController : ControllerBase
+    {
+        private static readonly string[] Summaries = new[]
+        {
+            "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
+        };
+
+        private readonly ILogger<WeatherForecastController> _logger;
+
+        public WeatherForecastController(ILogger<WeatherForecastController> logger)
+        {
+            _logger = logger;
+        }
+
+        [HttpGet]
+        public IEnumerable<WeatherForecast> Get()
+        {
+            var rng = new Random();
+            return Enumerable.Range(1, 5).Select(index => new WeatherForecast
+            {
+                Date = DateTime.Now.AddDays(index),
+                TemperatureC = rng.Next(-20, 55),
+                Summary = Summaries[rng.Next(Summaries.Length)]
+            })
+            .ToArray();
+        }
+    }
+}

Controllers/SampleDataController.cs

@@ -0,0 +1,18 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+
+namespace AspNetCoreVueStarter.Models
+{
+    public class WeatherForecast
+    {
+        public DateTime Date { get; set; }
+
+        public int TemperatureC { get; set; }
+
+        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
+
+        public string Summary { get; set; }
+    }
+}