Add routes and modify angular output path to work locally and on server

Client/.angular-cli.json

@@ -6,7 +6,7 @@
   "apps": [
     {
       "root": "src",
-      "outDir": "dist",
+      "outDir": "../Server/www",
       "assets": [
         "assets",
         "favicon.ico"

Client/src/app/components/event-large/event-large.component.ts

@@ -1,6 +1,9 @@
 import { Component, AfterContentInit, Input } from '@angular/core';
+import { MdDialog, MdDialogConfig } from '@angular/material';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 
+import { SharePopupComponent } from './../popups/share-popup/share-popup.component';
+
 import { MONTHS_FULL } from '../../constants/months';
 
 @Component({
@@ -44,6 +47,8 @@ export class EventLargeComponent implements AfterContentInit {
   @Input()
   public loggedIn: boolean;
 
+  @Input()
+  id: number;
   @Input()
   title: string;
   @Input()
@@ -64,7 +69,7 @@ export class EventLargeComponent implements AfterContentInit {
     return "/cim/" + monthName + "/" + this.startDate.getDate();
   }
 
-  constructor(){
+  constructor(private dialog: MdDialog){
       console.log(this.title);
   }
 
@@ -78,7 +83,17 @@ export class EventLargeComponent implements AfterContentInit {
   }
 
   share(){
-    
+    let opts = new MdDialogConfig;
+    opts.data = { prefix: 'd', id: this.id, title: this.title, description: this.description };
+    let dialog = this.dialog.open(SharePopupComponent, opts);
+  }
+
+  edit(){
+
+  }
+
+  delete(){
+
   }
 
 }

Client/src/app/components/events-page/events-page.component.html

@@ -4,9 +4,12 @@
         <ul>
             <li *ngFor="let event of events; let i = index;">
                 <event-large-component
+                    [id]="event.id"
                     [title]="event.title"
                     [startDate]="event.startDate"
+                    [description]="event.description"
                     [delayFadeIn]="(i+1)*200"
+                    [loggedIn]="loggedIn"
                     ></event-large-component>
             </li>
         </ul>

Client/src/app/components/popups/share-popup/share-popup.component.ts

@@ -15,16 +15,16 @@ export class SharePopupComponent implements OnInit {
   private twitterPartA: string = "https://twitter.com/intent/tweet?text=";
   private twitterPartB: string = "https://twitter.com/intent/tweet?text=ShareThis&url=http%3A%2F%2Fwww.sharethis.com%2F";
   public twitterUrl: string;
-  private sermonId: string;
+  private id: string;
   public facebookIframeUrl: string;
-  private shareBaseUrl: string = "https://ofbbutte.com/api/share/s";
+  private shareBaseUrl: string = "https://ofbbutte.com/api/share/";
   public shareUrl: string;
 
   constructor(@Inject(MD_DIALOG_DATA) public data: any, private mdDialogRef: MdDialogRef<SharePopupComponent>, private snackbar: MdSnackBar) { 
-    this.sermonId = data.sermonId;
+    this.id = data.id;
-    this.shareUrl = this.shareBaseUrl + this.sermonId;
+    this.shareUrl = this.shareBaseUrl + data.prefix + this.id;
     this.facebookIframeUrl = this.urlPartA + this.shareUrl + this.urlPartB;
-    this.twitterUrl = this.twitterPartA + data.sermonTitle + " - " + data.sermonDescription + "&url=" + this.shareUrl;
+    this.twitterUrl = this.twitterPartA + data.title + " - " + data.description + "&url=" + this.shareUrl;
   }
 
   ngOnInit() {

Client/src/app/components/sermon-large/sermon-large.component.ts

@@ -72,7 +72,7 @@ export class SermonLargeComponent extends SermonSmallComponent implements OnInit
 
   share(){
     let opts = new MdDialogConfig;
-    opts.data = { sermonId: this.id, sermonTitle: this.title, sermonDescription: this.description };
+    opts.data = { prefix: 's', id: this.id, title: this.title, description: this.description };
     let dialog = this.dialog.open(SharePopupComponent, opts);    
   }
 

Server/package-lock.json

@@ -0,0 +1,3 @@
+{
+  "lockfileVersion": 1
+}

Server/src/app.js

@@ -4,9 +4,14 @@ const path = require('path');
 const { execFile } = require('child_process');
 const fs = require('fs');
 
+app.use('/api/share/*',function(req,res){
+  console.log(req.originalUrl);
+  var fullUrl = req.protocol + '://' + req.hostname + req.originalUrl;
+  res.send(fullUrl);
+});
 
 
-app.get('/cim/:month/:day',function(req,res){
+app.get('/api/cim/:month/:day',function(req,res){
   console.log(__dirname);
   var file = __dirname + '/calendar_image_maker/generated_images/' + req.params.month + '_' + req.params.day + '.png';
   if (fs.existsSync(file)){
@@ -28,7 +33,7 @@ app.get('/cim/:month/:day',function(req,res){
   });
 });
 
-app.use(express.static('www')); 
+app.use(express.static('../www')); 
 
 app.get('/*', function (req, res) {
   console.log(__dirname);

Server/src/routes/share.js

@@ -0,0 +1,125 @@
+var express   = require('express');
+var router    = express.Router();
+
+var dbSermons = require('../database/sermons');
+
+
+router.get("/:shareCode",function(req,res){
+    var sharecode = req.params.shareCode;
+    var type = sharecode.substring(0,1);
+    var param = sharecode.substring(1);
+    console.log("type: " +   type + "; param: " + param);
+
+    switch(type){
+        case "s":
+            return getSermon(req, res, param);
+        case "e":
+            return getEvent(req,res,param);
+    }
+});
+
+function getSermon(req, res, id){
+    var userAgent = req.headers['user-agent'];
+    if (userAgent.startsWith('facebookexternalhit/1.1') ||
+       userAgent === 'Facebot' ||
+       userAgent.startsWith('Twitterbot')) {
+        getSermonMeta(res, id);
+    } else {
+        res.redirect("https://ofbbutte.com/sermons/" + id);
+    }
+}
+
+function getSermonMeta(res, id){
+    dbSermons.getSermon(id,function(error,sermon){
+        if (error){
+            res.status(404).json({"status":404,"message":"Error processing request"});
+            return;
+        }
+        if (sermon == null){
+            res.status(404).json({"status":404,"message":"Sermon does not exist"});
+            return;
+        }
+
+        var result = `<html>
+                        <head>
+                        <title>Old Fashion Baptist Church</title>
+                            <!-- You can use Open Graph tags to customize link previews.
+                            Learn more: https://developers.facebook.com/docs/sharing/webmasters -->
+                        <meta property="og:url"           content="https://ofbbutte.com/api/share/s`+ sermon.id +`"/>
+                        <meta property="og:type"          content="website" />
+                        <meta property="og:title"   content="` + sermon.title + `" />
+                        <meta property="og:description"   content="` + sermon.description + `" />
+                        <meta property="og:image"         content="https://ofbbutte.com/static/ofbmain/images/facebookplay.png" />
+                        </head>
+                        <body>
+                        </body>
+                        </html>`;
+
+        res.set('Content-Type', 'text/html');
+        res.send(new Buffer(result));
+    });
+}
+
+function getEvent(req, res, id){
+    var userAgent = req.headers['user-agent'];
+    if (userAgent.startsWith('facebookexternalhit/1.1') ||
+       userAgent === 'Facebot' ||
+       userAgent.startsWith('Twitterbot')) {
+        getEventMeta(res, id);
+    } else {
+        res.redirect("https://ofbbutte.com/events/" + id);
+    }
+}
+
+function getEventMeta(res, id){
+    dbSermons.getEvent(id,function(error,event){
+        if (error){
+            res.status(404).json({"status":404,"message":"Error processing request"});
+            return;
+        }
+        if (sermon == null){
+            res.status(404).json({"status":404,"message":"Event does not exist"});
+            return;
+        }
+
+        var monthNum = event.startDate.getMonth();
+        var monthName = MONTHS_FULL[monthNum];
+        var day = event.startDate.getDate();
+
+        var result = `<html>
+                        <head>
+                        <title>Old Fashion Baptist Church</title>
+                            <!-- You can use Open Graph tags to customize link previews.
+                            Learn more: https://developers.facebook.com/docs/sharing/webmasters -->
+                        <meta property="og:url"           content="https/share/e`+ event.id +`"/>
+                        <meta property="og:type"          content="website" />
+                        <meta property="og:title"         content="` + event.title + `" />
+                        <meta property="og:description"   content="` + event.description + `" />
+                        <meta property="og:image"         content="/cim/` + monthName + `/` + day + `"/>
+                        </head>
+                        <body>
+                        </body>
+                        </html>`;
+
+        res.set('Content-Type', 'text/html');
+        res.send(new Buffer(result));
+    });
+}
+
+const MONTHS_FULL = {
+    0: "JANUARY",
+    1: "FEBRUARY",
+    2: "MARCH",
+    3: "APRIL",
+    4: "MAY",
+    5: "JUNE",
+    6: "JULY",
+    7: "AUGUST",
+    8: "SEPTEMBER",
+    9: "OCTOBER",
+    10: "NOVEMBER",
+    11: "DECEMBER"
+};
+
+
+module.exports = router;