Bij mijn huidige werkgever gebruiken we dashing om op de service-afdeling een dashboard te tonen met de statistieken van het door ons gebruikte helpdesksysteem, de status van de internetverbindingen, of Github nog up-en-running is en nog vele andere gegevens.
Dit is gebouwd op basis van Ruby on Rails, het draait dus op een Raspberry Pi, de taken richten we in met Ruby. Een mooi leerproject. Enige tijd later kwam de vraag of we dit ook voor een klant in konden zetten. Omdat we ons voornamelijk richten op .NET ben ik even gaan zoeken en kwam daarbij uit op 2 Github-projecten die het project als basis genomen hebben en dit omgebouwd hebben naar een .NET variant.
https://github.com/sbarski/dashing.net
Dashing.NET is een rechtstreekse port.
https://github.com/Davlind/dashing.net
De versie van "Davlind" is een portering van die versie, waarbij geprobeerd is zoveel mogelijk standaard .NET functionaliteit te gebruiken, waarbij de originele werking van het dashboard natuurlijk wel in stand blijft.
Voor de klant was het later niet meer nodig, maar zelf was ik wel nieuwsgierig of het net zo goed zou werken als het dashboard wat we nu gebruiken. Ik ben dus van start gegaan met de versie van Davlind. Je ziet daarbij ook een verwijzing naar een demo-site waar je kunt zien wat het dashboard kan (en dat is dus exact hetzelfde als de originele dashing-versie):
http://dashingdotnet.azurewebsites.net/
Bijna al mijn sites zijn gehost bij providers die alleen PHP ondersteunen, maar gelukkig heb ik ook ergens .NET beschikbaar. Ik zou ook wat met Azure kunnen gaan doen, maar dit is alleen wat "hobby-werk", dus zoveel hoeft het nu ook weer niet te kosten ;)
Subdomein aanmaken, code compilen, overzetten, in het controlpanel instellen dat het een .NET-applicatie is en kom maar op met dat dashboard.
Dat valt helaas tegen. Ik krijg foutmeldingen te zien, het wordt me niet echt duidelijk, maar na het stap-voor-stap doorlopen van de code, zaken uitzetten, kan ik het pin-pointen op de volgende plaats:
In je project heb je een map Views/Shared/ waar het bestand Layout.cshtml in staat. In die view wordt je javascript gebundeld in de @Scripts.Render(...) functie en worden je .scss bestanden (je stylesheets, sassy css bestanden) verwerkt via @Styles.Render(...)
Het javascript gaat goed, maar omdat het type bestand .scss niet wordt herkend, mogen hier bepaalde acties door de System.Web.Optimization klasse niet uitgevoerd worden. Hoe gaan we dit fixen?
Als ik het echt goed ga doen, dan moet ik dus mijn eigen "bundler-script" gaan schrijven. Dit is alleen nog maar een proof of concept, dus het hoeft nog niet perfect. En ik wil er ook weer niet teveel tijd aan besteden, want die tijd heb ik nodig voor andere zaken. Dus het volgende gedaan:
- Waar nu de @Styles.Render(...) staat vervangen met @DashingStyles.Render(...)
- Bovenin deze pagina waar nu @using System.Web.Optimization staat ook nog toegevoegd:
@using dashing.net.Infrastructure
In de map Infrastructure heb ik een class DashingStyles.cs aangemaakt, de code daarvan zit bijgevoegd bij dit bericht.
Wat doet deze code? Hierin doorloop ik de .scss bestanden die ingesteld worden in het bestand /App_Start/BundleConfig.cs.
Deze .scss-bestanden zet ik om naar "normale" CSS-bestanden. Het meeste is al normale CSS, alleen bepaalde variabelen, die je herkent doordat ze met een $-teken beginnen, die moeten verwijderd worden, de waarde moet vervolgens ingevuld worden bij de elementen die de variabele gebruiken. Daar zit nog even wat piel-werk, eigenlijk zit er nog een klein bugje in, omdat de "clear-fix" van de application nu binnen een tag valt en er eigenlijk buiten zou moeten vallen, maar dat zorgt er weer voor dat de widgets ongeldige CSS krijgen. Dus dat "bugje" maar laten zitten, want visueel levert dat geen probleem op en het bewijst mijn proof of concept, ja, we kunnen ook met een dotNet-variant gaan werken, mocht dat nog eens nodig zijn.
