populate import/export settings pane

3 files changed, 134 insertions, 1 deletions

diff --git a/src/guff/views/pages/admin.cr b/src/guff/views/pages/admin.cr
index 16d3eb0..dd8537d 100644
--- a/src/guff/views/pages/admin.cr
+++ b/src/guff/views/pages/admin.cr
@@ -22,6 +22,7 @@ class Guff::Views::Pages::Admin < Guff::Views::HTMLView
     assets/js/dropdown.js
     assets/js/admin/tabs/posts.js
     assets/js/admin/tabs/files.js
+    assets/js/admin/tabs/import.js
     assets/js/admin/tabs/users.js
     assets/js/admin/tabs/themes.js
     assets/js/admin/dialogs/user-add.js
diff --git a/src/guff/views/panes/settings/import.cr b/src/guff/views/panes/settings/import.cr
index 244dba3..6406de6 100644
--- a/src/guff/views/panes/settings/import.cr
+++ b/src/guff/views/panes/settings/import.cr
@@ -1,3 +1,13 @@
 class Guff::Views::Panes::Settings::Import < Guff::Views::HTMLView
+  OPTION = "<option value='%s'>%s</option>"
+
+  private def site_options
+    @site_options ||= String.build do |io|
+      @context.models.site.get_sites.each do |row|
+        io << OPTION % %w{site_id name}.map { |key| h(row[key]) }
+      end
+    end
+  end
+
   ECR.def_to_s("src/views/panes/settings/import.ecr")
 end
diff --git a/src/views/panes/settings/import.ecr b/src/views/panes/settings/import.ecr
index fe8e94f..5201e77 100644
--- a/src/views/panes/settings/import.ecr
+++ b/src/views/panes/settings/import.ecr
@@ -5,12 +5,134 @@
 >
   <div class='panel panel-default'>
     <div class='panel-heading'>
+      <b>
+        <i class='fa fa-upload'></i>
+        Import Blog Posts
+      </b>
     </div><!-- panel-heading -->
 
     <div class='panel-body'>
       <p>
-        TODO: import
+        This panel allows you to import blog posts.
       </p>
+
+      <p>
+        Use the file input field below to select an input
+        <a
+          href='https://codex.wordpress.org/Tools_Export_Screen'
+          title='View WordPress export instructions.'
+          rel='nofollow noopener'
+          target='_blank'
+        >WXR</a>
+        file, select a destination site, then press the "Import Blog
+        Posts" button to import your blog posts.
+      </p>
+
+      <div class='form-group'>
+        <label for='import-file'>
+          Input File
+        </label>
+
+        <input
+          id='import-file'
+          type='file'
+          class='form-control'
+          title='Choose input file.'
+          aria-describedby='import-file-help'
+        />
+
+        <p id='import-file-help' class='help-block'>
+          Source file (in WXR format) containing blog posts.
+        </p>
+      </div><!-- form-group -->
+
+      <div class='form-group'>
+        <label for='import-file'>
+          Destination Site
+        </label>
+
+        <select
+          id='import-site'
+          class='form-control'
+          title='Choose destination site.'
+          aria-describedby='import-site-help'
+        ><%=
+          site_options
+        %></select>
+
+        <p id='import-site-help' class='help-block'>
+          Destination site for imported blog posts.
+        </p>
+      </div><!-- form-group -->
+
+      <div class='form-group'>
+        <a
+          href='#'
+          id='import-posts'
+          class='btn btn-primary'
+          title='Import blog posts from WXR file.'
+        >
+          <i class='fa fa-upload'></i>
+          Import Blog Posts
+        </a>
+      </div><!-- form-group -->
+    </div><!-- panel-body -->
+  </div><!-- panel -->
+
+  <div class='panel panel-default'>
+    <div class='panel-heading'>
+      <b>
+        <i class='fa fa-download'></i>
+        Export Blog Posts
+      </b>
+    </div><!-- panel-heading -->
+
+    <div class='panel-body'>
+      <p>
+        This panel allows you to export blog posts.
+      </p>
+
+      <p>
+        Choose a source site, then click the "Export Blog Posts" button
+        below to export blog posts in
+        <a
+          href='https://codex.wordpress.org/Tools_Export_Screen'
+          title='View WordPress export instructions.'
+          rel='nofollow noopener'
+          target='_blank'
+        >WXR</a> format.
+      </p>
+
+      <div class='form-group'>
+        <label for='export-site'>
+          Source Site
+        </label>
+
+        <select
+          id='export-site'
+          class='form-control'
+          title='Choose source site.'
+          aria-describedby='export-site-help'
+        ><%=
+          site_options
+        %></select>
+
+        <p id='export-site-help' class='help-block'>
+          Source site of blog posts to export.
+        </p>
+      </div><!-- form-group -->
+
+      <div class='form-group'>
+        <a
+          href='#'
+          id='export-posts'
+          class='btn btn-primary'
+          title='Export blog posts to file in WXR format.'
+        >
+          <i class='fa fa-download'></i>
+          Export Blog Posts
+        </a>
+      </div><!-- form-group -->
     </div><!-- panel-body -->
   </div><!-- panel -->
 </div><!-- tab-pane -->