add homepage id to graph

4 files changed, 72 insertions, 4 deletions

diff --git a/cli/app/sql/models/graph.py b/cli/app/sql/models/graph.py
index fdea32a..fbfb09c 100644
--- a/cli/app/sql/models/graph.py
+++ b/cli/app/sql/models/graph.py
@@ -13,6 +13,7 @@ class Graph(Base):
   """Table for storing references to graphs"""
   __tablename__ = 'graph'
   id = Column(Integer, primary_key=True)
+  home_page_id = Column(Integer, nullable=True)
   path = Column(String(64, convert_unicode=True), nullable=False)
   title = Column(String(64, convert_unicode=True), nullable=False)
   username = Column(String(32, convert_unicode=True), nullable=False)
@@ -26,6 +27,7 @@ class Graph(Base):
   def toJSON(self):
     return {
       'id': self.id,
+      'home_page_id': self.home_page_id,
       'path': self.path,
       'title': self.title,
       'username': self.username,
diff --git a/cli/app/sql/versions/202007102019_add_home_page_id_to_graph.py b/cli/app/sql/versions/202007102019_add_home_page_id_to_graph.py
new file mode 100644
index 0000000..9f44d3a
--- /dev/null
+++ b/cli/app/sql/versions/202007102019_add_home_page_id_to_graph.py
@@ -0,0 +1,29 @@
+"""add home_page_id to graph
+
+Revision ID: d929da3e398b
+Revises: 91a729020584
+Create Date: 2020-07-10 20:19:55.467411
+
+"""
+from alembic import op
+import sqlalchemy as sa
+import sqlalchemy_utc
+
+
+# revision identifiers, used by Alembic.
+revision = 'd929da3e398b'
+down_revision = '91a729020584'
+branch_labels = None
+depends_on = None
+
+
+def upgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.add_column('graph', sa.Column('home_page_id', sa.Integer(), nullable=True))
+    # ### end Alembic commands ###
+
+
+def downgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.drop_column('graph', 'home_page_id')
+    # ### end Alembic commands ###
diff --git a/frontend/views/page/components/tile.list.js b/frontend/views/page/components/tile.list.js
index 5e87cb6..7e4f650 100644
--- a/frontend/views/page/components/tile.list.js
+++ b/frontend/views/page/components/tile.list.js
@@ -22,7 +22,12 @@ class TileList extends Component {
 
   componentDidMount(prevProps) {
     const { tiles } = this.props.page.show.res
-    this.setState({ tiles: tiles.slice(0).reverse() })
+    const { pages } = this.props.graph.show.res
+    const pageTitles = pages.reduce((a,b) => {
+      a[b.id] = b.title
+      return a
+    }, {})
+    this.setState({ tiles: tiles.slice(0).reverse(), pageTitles })
   }
 
   componentDidUpdate(prevProps, prevState) {
@@ -68,7 +73,7 @@ class TileList extends Component {
   }
 
   render() {
-    const { tiles } = this.state
+    const { tiles, pageTitles } = this.state
     return (
       <div className='box tileList'>
         <ReactSortable
@@ -79,7 +84,11 @@ class TileList extends Component {
           {tiles.map(tile => (
             tile.type === 'image'
             ? <TileListImage key={tile.id} tile={tile} />
-            : <TileListText key={tile.id} tile={tile} />
+            : tile.type === 'text'
+            ? <TileListText key={tile.id} tile={tile} />
+            : tile.type === 'link'
+            ? <TileListLink key={tile.id} tile={tile} pageTitles={pageTitles} />
+            : <TileListMisc key={tile.id} tile={tile} />
           ))}
         </ReactSortable>
       </div>
@@ -95,7 +104,28 @@ const TileListImage = ({ tile }) => (
 
 const TileListText = ({ tile }) => (
   <div className='row' data-id={tile.id}>
-    <span className='snippet'>{tile.settings.content.substr(0, 100)}</span>
+    <span className='snippet'>{(tile.settings.content || "").substr(0, 100)}</span>
+  </div>
+)
+
+const TileListLink = ({ tile, pageTitles }) => (
+  <div className='row link' data-id={tile.id}>
+    <span className='snippet'>
+      {'Link: '}
+      {tile.target_page_id === -1
+        ? 'External'
+        : !tile.target_page_id
+        ? 'No link specified!'
+        : tile.target_page_id in pageTitles
+        ? pageTitles[tile.target_page_id]
+        : 'Error, broken link!'}
+    </span>
+  </div>
+)
+
+const TileListMisc = ({ tile }) => (
+  <div className='row' data-id={tile.id}>
+    <span className='snippet'>{"Tile: "}{tile.type}</span>
   </div>
 )
 
diff --git a/frontend/views/page/page.css b/frontend/views/page/page.css
index 2e90518..c29aff2 100644
--- a/frontend/views/page/page.css
+++ b/frontend/views/page/page.css
@@ -70,6 +70,7 @@
   width: 100%;
   white-space: nowrap;
   padding: 0.25rem;
+  cursor: default;
 }
 .tileList .thumb {
   width: 100%;
@@ -86,6 +87,12 @@
 .tileList .row.sortable-drag {
   opacity: 0.6;
 }
+.tileList .row.link {
+  border: 1px solid #31f;
+  background: rgba(48,16,255,0.3);
+  box-shadow: inset 0 0 16px rgba(0,0,0,0.5);
+  padding-left: 0.375rem;
+}
 
 /* tile form */